js文档节点关系

这一节简单介绍一下文档节点方面的相关内容：

一：获得节点关系的属性

 

　　1、获得该元素父节点的引用:obj.parentNode；

        <div class="content">
            <p class="img1"><img src="img/lingzhiling.jpg" /></p>
            <p class="img2"><img src="img/yufeihong.jpg" /></p>
        </div>
        <script type="text/javascript">
            var content = document.getElementsByClassName('content')[0];
            var img1 = document.getElementsByClassName('img1')[0];
            var img2 = document.getElementsByClassName('img2')[0];
            // 获得父节点的引用
            img1.onclick = function() {
                this.innerHTML = this.parentNode.className;
            }
        </script>

　　

　　2、获得该对象的子节点的集合obj.childNodes;

　　注意：元素中的空格被视为文本，而文本被视为节点

　　提示：您可以使用 length 属性来确定子节点的数量，以NodeList为对象，然后您就能够遍历所有的子节点并提取您需要的信息。

        <div class="content">
            <p class="img1"><img src="img/lingzhiling.jpg" /></p>
            <p class="img2"><img src="img/yufeihong.jpg" /></p>
        </div>
        <script type="text/javascript">
            var content = document.getElementsByClassName('content')[0];
            var img1 = document.getElementsByClassName('img1')[0];
            var img2 = document.getElementsByClassName('img2')[0];
            // 获得子节点的集合
            var childs = content.childNodes; // 元素中的空格被视为文本，而文本被视为节点。
        </script>

　　3、返回该对象的第一个子节点的引用：obj.firstChild;

　　注释：在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。以Node为对象

        <div class="content">
            <p class="img1"><img src="img/lingzhiling.jpg" /></p>
            <p class="img2"><img src="img/yufeihong.jpg" /></p>
        </div>
        <script type="text/javascript">
            var content = document.getElementsByClassName('content')[0];
            var img1 = document.getElementsByClassName('img1')[0];
            var img2 = document.getElementsByClassName('img2')[0];
            /*获得第一个子节点的引用*/ 
            img2.onclick = function(){   
                console.log(content.firstChild.nextElementSibling);
                this.innerHTML = document.firstChild.nodeName;
            }
        </script>

　　

　　4、返回列表中最后一个子节点；obj.lastChild

　　注释：lastChild 属性返回指定节点的最后一个子节点，以 Node 对象。

　　

 

　　5、获得下一个兄弟节点的引用：obj.nextSibling 

　　注释：元素中的空格被视作文本，而文本被视作文本节点。请尝试在两个 <p> 元素之间添加空格，结果将是 "undefined"。如果没有 nextSibling 节点，则返回值为 null。

        <div class="content">
            <p class="img1"><img src="img/lingzhiling.jpg" /></p><p class="img2"><img src="img/yufeihong.jpg" /></p><p class="text1">第一个</p><p class="text2">第二个</p>
        </div>
        <script type="text/javascript">
            var content = document.getElementsByClassName('content')[0];
            var img1 = document.getElementsByClassName('img1')[0];
            var img2 = document.getElementsByClassName('img2')[0];
            /*获得下一个兄弟节点的引用*/
            img1.onclick = function(){
                img1.innerHTML = img1.nextSibling.className;
            }

        </script>

 

　　6、获得上一个兄弟节点的引用：obj.previousSibling ；