js nextSibling属性和previousSibling属性概述及使用注意

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js nextSibling属性和previousSibling属性概述及使用注意相关的知识,希望对你有一定的参考价值。

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等其他常用标签元素属性来获取其属性。 
1 <body> 
2 <div> 
3 <input id="a4" type="button" onclick="alert(this.nextSibling);" value="d" /> 
4 <input id="a5" type="button" onclick="alert(this.nextSibling);" value="e" /> 
5 </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属性概述及使用注意的主要内容,如果未能解决你的问题,请参考以下文章

js:nextSibling兄弟节点的使用

原生js使用 nextSibling 实现可输入下拉框

原生js使用 nextSibling 实现可输入下拉框

原生js使用 nextSibling 实现可输入下拉框

原生js使用 nextSibling 实现可输入下拉框

js实现双向链表, 双向链表需要增加一个previous属性