previousSibling && nextSibling学习笔记

文章参考 http://www.w3school.com.cn/jsref/prop_node_nodetype.asp

 

dom对象查找最近的兄弟节点

 

<div class="parentClass" style="border:1px solid red;">
    <div class="previousBrother">previousBrother</div>
    <div class="current" onclick="checkWidget(this)">current</div>
    <div class="nextBrother">nextBrother</div>
</div>

<script type="text/javascript">
    function checkWidget(obj){
        //获取当前对象的父亲节点
        alert(obj.parentNode.outerHTML);
        //获取第一个子节点
        alert(obj.parentNode.firstChild.nextSibling.outerHTML);
        //obj.previousSibling是节点(Node)对象，而不是控件对象
        alert(obj.previousSibling.nodeType);//3
        alert(obj.previousSibling.outerHTML);
        //获取当前节点的前一个节点
        alert(obj.previousSibling.previousSibling.outerHTML);
        //获取当前节点的后一个节点
        alert(obj.nextSibling.nextSibling.outerHTML);
    }
</script>

 

Node 对象

Node 对象是整个 DOM 的主要数据类型。

节点对象代表文档树中的一个单独的节点。

节点可以是元素节点、属性节点、文本节点，或者也可以是“节点类型”那一节中所介绍的任何一种节点。

 

 

元素节点	节点类型取值（nodeType）
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9