Node对象属性

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>

相关推荐