首页 > 代码库 > Node对象属性

Node对象属性

2024-08-17 21:11:29   223人阅读

1.Node对象属性一
            * nodeName
            * nodeType
            * nodeValue

            * 使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象

     

<body>
    <span id="spanid">哈哈呵呵</span>

    <script type="text/javascript">
        //获取标签对象
        var span1 = document.getElementById("spanid");
        //alert(span1.nodeType);   //  1
        ///alert(span1.nodeName);   // SPAN
        ///alert(span1.nodeValue);  // null

        //获取属性对象
        var id1 = span1.getAttributeNode("id");
        //alert(id1.nodeType);  // 2
        //alert(id1.nodeName);  // id
        //alert(id1.nodeValue); // spanid

        //获取文本
        var text1 = span1.firstChild;
        alert(text1.nodeType);  //  3
        alert(text1.nodeName);  // #text
        alert(text1.nodeValue); // 内容

    </script>

 </body>

            * 标签节点对应的值
                       nodeType： 1
                       nodeName： 大写标签名称 比如SPAN
                       nodeValue: null
            * 属性节点对应的值
                       nodeType： 2
                       nodeName： 属性名称
                       nodeValue: 属性的值
            * 文本节点对应的值
                       nodeType： 3
                       nodeName： #text
                       nodeValue: 文本内容

 2.Node对象的属性二
           <ul>
                   <li>qqqqq</li>
                   <li>wwww</li>
          </ul>

           * 父节点
                     - ul是li的父节点
                     - parentNode
                     - //得到li1
                    var li1 = document.getElementById("li1");
                      //得到ul
                       var ul1 = li1.parentNode;
                      alert(ul1.id);

           * 子节点
                    - li是ul的子节点
                    - childNodes：得到所有子节点，但是兼容性很差

                    - firstChild：获取第一个子节点
                              - //获取ul的第一个子节点 id=li1
                               //得到ul
                               var ul1 = document.getElementById("ulid");
                               //第一个子节点
                               var li1 = ul1.firstChild;
                               alert(li1.id);
                    - lastChild：获取最后一个子节点
                               //得到最后一个子节点
                               var li4 = ul1.lastChild;
                               alert(li4.id);

          * 同辈节点
                    - li直接关系是同辈节点
                    - nextSibling: 返回一个给定节点的下一个兄弟节点。
                      previousSibling：返回一个给定节点的上一个兄弟节点。

                               - //获取li的id是li3的上一个和下一个兄弟节点
                                 var li3 = document.getElementById("li3");
                                //alert(li3.nextSibling.id);
                                 alert(li3.previousSibling.id);

 <body>

    <ul id="ulid">
        <li id="li1" value="qqq">qqqqq</li>
        <li id="li2">wwww</li>
        <li id="li3">yyyyyy</li>
        <li id="li4">test1111</li>
    </ul>

    <script type="text/javascript">
        
        //得到li1
        var li1 = document.getElementById("li1");
        //得到ul
        var ul1 = li1.parentNode;
    //    alert(ul1.id);

        //获取ul的第一个子节点 id=li1
        //得到ul
        var ul1 = document.getElementById("ulid");
        //第一个子节点
        var li1 = ul1.firstChild;
        //alert(li1.id);

        //得到最后一个子节点
        var li4 = ul1.lastChild;
        //alert(li4.id);

        //获取li的id是li3的上一个和下一个兄弟节点
        var li3 = document.getElementById("li3");
        alert(li3.nextSibling.id);
        alert(li3.previousSibling.id);
        
    </script>

 </body>

 

Node对象属性


联系
我们