1：nextSibling属性
该属性表示当前节点的下一个节点（其后的节点与当前节点同属一个级别）；如果其后没有与其同级的节点，则返回null。
需要特别注意的是：该属性在不同的浏览器中的执行结果并不都相同，见下面例示：
先来看一个例子：

该对象的结构表面上看，div的nextSibling只有2项——两个input节点。但实际上有5项——/n,input,/n,input,/n。这是因为input作为创建各种表单输入控件的标签，无论是生成button、checkbox、radio...等或其他表单控件，IE都会自动在后面创建一个1字节位的空白。 
IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取，因此，在ie中用nextSibling便可读取到的下一个节点元素，在FF中就需要这样写：nextSibling.nextSibling了。 
opera和safari对nextSibling的处理方式与FF一致 

2：previousSibling属性 
该属性与nextSibling属性的作用正好相反。例如：someTagObject.nextSibling.previousSibling其实返回的是该标签元素本身，但前提必须是：该标签元素的后面必须有一个同级的元素，否则就返回null了。 

3：通过nextSibling或者 previousSibling所获得的HTML标签元素对象的属性问题 
一般先通过nextSibling.nodeName来获知其标签名，或者通过nextSibling.nodeType来获知其标签类型，然后，如果该nextSibling.nodeName = #text，则通过nextSibling.nodeValue来获知其文本值；否则，可以通过nextSibling.innerHTML等其他常用标签元素属性来获取其属性。 
 <body>

 <div>

 <input id="a4" type="button" onclick="alert(this.nextSibling);" value="d" />

 <input id="a5" type="button" onclick="alert(this.nextSibling);" value="e" />

 </div> 
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript">

               window.onload = function(){

        var selectContents = "",//待填充的文本

                _selectContent = document.getElementsByName("getSelectContent"),

                i = 0,

                sl = _selectContent.length;//获取元素的长度即个数

        for(;  i < sl ; i++){//限制复选框最多选择3项

            _selectContent[i].onclick = function(){
 var _t = this.nextSibling.nextSibling.innerHTML;
//var _t = this.nextSibling.nextSibling.innerHTML;
 console.log(this.nextSibling.nodeName);

                  console.log(this.nextSibling.nodeType);

                if(this.checked){//如果内容被选中，则填充文本，否则删除

                    selectContents += "<br />" + _t;

                }else{

                    selectContents = selectContents.replace("<br />" + _t, "")

                }

                document.getElementById("selectedContents").innerHTML = "被选择的内容："+selectContents;//填充html文本

            }

        }

    };

        </script>

    </head>

    <body>

        <h2>获取复选框所有选中内容</h2>

        <ul>

            <li>

                <input type="checkbox" name='getSelectContent'>

                <div class="contentCheckbox">等待选择的内容····1</div>

            </li>

            <li>

                <input type="checkbox" name='getSelectContent'>

                <div class="contentCheckbox">等待选择的内容····2</div>

            </li>

            <li>

                <input type="checkbox" name='getSelectContent'>

                <div class="contentCheckbox">等待选择的内容····3</div>

            </li>

        </ul>

        <p id='selectedContents'>被选择的内容：选择内容为空</p>

    </body>

</html>

js nextSibling属性和previousSibling属性概述及使用注意的更多相关文章

  1. HTML DOM firstChild lastChild nextSibling previousSibling 属性_获取属性值的undefined问题

    <html> <head> <title>HTML示例</title> <style type="text/css"> ...

  2. js修改input的type属性问题

    js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以 ...

  3. 判断JS对象是否拥有某属性的方法举例

    判断JS对象是否拥有某属性 JS是否拥有某属性的判断方法,这里提供两种方式,供大家参考. 1.in 运算符 var obj = {name:'jack'}; alert('name' in obj); ...

  4. js小记 function 的 length 属性

    原文:js小记 function 的 length 属性 [1,2,3]., ,这个略懂js的都知道. 但是  eval.length,RegExp.length,"".toStr ...

  5. js对象中动态读取属性值 动态属性值 js正则表达式全局替换

    $(document).ready(function(){ var exceptionMsg = '${exception.message }'; var exceptionstr = ''; //j ...

  6. js中的访问器属性中的getter和setter函数实现数据双向绑定

    嗯,之前在读js红宝书的时候,在对象那一章有介绍属性类型.第一种数据类型指的是数据属性,第二种是访问器属性.在初识vue的时候,其双向数据绑定也是基于访问器属性中的getter和setter函数原理来 ...

  7. JavaScript面向对象(二)——成员属性、静态属性、原型属性与JS原型链

      前  言 JRedu 上一篇博客中,我们介绍了JS中的面向对象,并详细的解释了this的指向问题.本篇博客,我们继续来学习JS的面向对象.来深入理解一下JavaScript OOP中的成员属性/方 ...

  8. JS 对象API之判断自有属性、共有属性

    自有属性:对象实例私有的属性,只有该对象实例可用 共有属性:对象实例共有的属性,所有对象实例都可用 要判断对象实例的自有属性.共有属性:首先看看JS给我们提供的两个方法: 1.判断是否是对象实例的属性 ...

  9. JS函数可以再添加属性（包括方法）

    1 前言 JS函数可以再添加属性(包括方法),这个有点有趣,记录一下. 2 代码 <!DOCTYPE html> <html> <head> <title&g ...

随机推荐

  1. 如何写兼容浏览器和Node.js环境的Javascript代码

    如果有打开过jQuery的源码(从1.11及以后),或者Vue.js.React.js的源码,都会在文件的前面看见这样一段代码: ( function( global, factory ) { &qu ...

  2. 关于【IE兼容】的都在这

    滚动条 ie的滚动条覆盖了内容,为了触屏操作优化浏览器的内容显示,IE 浏览器提供了一种可以浮动显示,自动隐藏的滚动条样式,但是这个样式会在某些情况下造成一些困扰,比如下图... 其实默认情况下,桌面 ...

  3. 带分页、过滤条件的DSL

    "query": { "bool": { "must_not": { "match_phrase": { "p ...

  4. python之实现缓存环

    看了CodeBokk 第二版通过python实现缓存环,吸收之后记录下,方便以后查阅. 任务: 定义一个固定尺寸的缓存,当它填满的时候,新加入的元素会覆盖第一个(最老的)元素.这种数据结构在存储日志和 ...

  5. sublime文字处理技巧

    1.针对多行文本去除重复行,而不改变文本原来的顺序,即不通过排序的方式移除重复行 安装ShellCommand插件,全选文本,ctrl+alt+|调出shell执行终端,输入 awk '!x[$0]+ ...

  6. 一个用于上传文件的servlet

    1.jsp页面操作文件: <%@ page language="java" import="java.util.*" pageEncoding=" ...

  7. html基础及心得

    html开始 <adress></adress>斜体(地址) <em><em>斜体(表示强调) <code></code>插入一 ...

  8. MyBatis学习-映射文件标签篇(select、resultMap)

    MyBatis 真正的核心在映射文件中.比直接使用 JDBC 节省95%的代码.而且将 SQL 语句独立在 Java 代码之外,可以进行更为细致的 SQL 优化. 一. 映射文件的顶级元素 selec ...

  9. 五大科技巨头VR/AR专利报告，Magic Leap以22.6%领跑

    在十月份发布的<VR/AR专利技术深度分析报告>指出,VR.AR行业的专利多被佳能.索尼.微软.谷歌等科技巨头"包养",但是并没有对这部分进行详细分析.近日,风投公司C ...

  10. c#弱事件(weak event)

    传统事件publisher和listener是直接相连的,这样会对垃圾回收带来一些问题,例如listener已经不引用任何对象但它仍然被publisher引用 垃圾回收器就不能回收listener所占 ...