JS 节点属性和Element属性-蒲公英云

JS 节点属性和Element属性

短命女 2023-10-05 08:23 54阅读 0赞

节点属性

parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

Element**属性**

firstElementChild	返回节点的第一个子节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>hello</h1>
        <ul id="ul">
            <li id="a1">电风扇<a href="javascript:void(0)">隐藏</a></li>
            <li>蓝宝<a href="javascript:void(0)">隐藏</a></li>
            <li>刘芳<a href="javascript:void(0)">隐藏</a></li>
            <li>杨树<a href="javascript:void(0)">隐藏</a></li>
            <li id="a5">张飞<a href="javascript:void(0)">隐藏</a></li>
        </ul>
        <p>mike</p>
    </body>
</html>
<script type="text/javascript">
      window.onload = function () {
          // fun1()
           // fun2();
           // fun3();
           // fun4();
           fun5();
        }
    //parentNode
    function fun1(){
        var ul = document.getElementById("ul");
         //取出所有的a标签
        var aA = ul.getElementsByTagName("a");
        for (var i = 0; i < aA.length; i++) {
            //给每个a标签注册事件
            aA[i].onclick = function () {
                //this是当前元素,parentNode  是单数，
                //因为每个节点，只有一个父节点！有多个子节点
               this.parentNode.style.display = "none";
            }
        }
    }
    //childNodes既包括元素节点，又包括文本节点
    function fun2(){
        var ul = document.getElementById("ul");
        for (var i = 0; i < ul.childNodes.length; i++) {
             //nodeType=1,元素节点
            //nodeType=3,文本节点(#text 空文本)
            console.log(ul.childNodes[i].nodeName);
            if(ul.childNodes[i].nodeType==1){
                ul.childNodes[i].style.color="orchid";
            }
        }
    }
    function fun3(){
        var ul = document.getElementById("ul");
        //children  只包括元素节点，不包括文本节点
        for (var i = 0; i < ul.children.length; i++) {
            console.log(ul.children[i].nodeName);
            ul.children[i].style.color="red";
        }
    }
    //注意：firstChild和lastChild只能对单个节点就行操作,不能对节点数组进行操作;
        //firstChild和lastChild弹出的是undefined？
        function fun4(){
            var ul=document.getElementById("ul");
            console.log(ul.firstChild.nextSibling.innerHTML);
            console.log(ul.lastChild.previousSibling.innerHTML);
        }
    //    问题主要是出自<ul id="a1">之后和</ul>之前的“回车”和“空格”字符，复现里面打印出的#text就是这些“回车”和“空格”字符，也称文本节点，它们才是真正意义上的firstChild和lastChild，而不是我们想要获取的li，所以debug中将这些空白字符去掉即可。
    //访问节点兼容问题
    //Element属性:
     function fun5(){
            var ul=document.getElementById("ul");
            // console.log(ul.firstElementChild.innerHTML);  //first
            // console.log(ul.lastElementChild.innerHTML);  //last
            console.log(ul.nextElementSibling.innerHTML); //next  ==>mike
            console.log(ul.previousElementSibling.innerHTML); //previous ==>hello
        }
</script>