DOM节点

childNodes表示的就是孩子的意思，其中需要注意的几点是：

1.table和ul的区别

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
</head>
<body>
<div>
    <table border='1'>
        <tr><td>111</td><td>111</td></tr>
        <tr><td>222</td><td>222</td></tr>
        <tr><td>333</td><td>333</td></tr>
    </table>

    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
    </ul>

    <div id="a">
        <p></p>
        <a></a>
    </div>
    
</div>
<script type="text/javascript">
    window.onload = function(){
        var table = document.getElementsByTagName("table")[0].childNodes;
        console.log(table[0].nodeName);//#text
        console.log(table[1].nodeName);//TBODY
        console.log(table[2].nodeName);//报错，因为已经超出界限了
        console.log(table.length);//2

        var ul = document.getElementsByTagName("ul")[0].childNodes;
        console.log(ul[0].nodeName);//#text
        console.log(ul[1].nodeName);//LI
        console.log(ul[2].nodeName);//#text
        console.log(ul[3].nodeName);//LI
        console.log(ul.length);//7


        var a = document.getElementById("a").childNodes;
        console.log(a[1].nodeName);//#text
        console.log(a[1].nodeName);//P
        console.log(a[2].nodeName);//A
        console.log(a[3].nodeName);//超出界限
    }
    //从上面的实例我们可以看出，table和ul是不一样的，table其实就相当于<table><tbody></tbody></table>,
    // 所以table[0]是文本，table[0].nodeName为#text;table[1]就是tbody,table[1].nodeName为TBODY;
    // 而ul就不一样,ul[0]为文本，ul[1]为li,ul[2]为文本，ul[3]为li


</script>
</body>
</html>

View Code

2.节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

1. nodeName : 节点的名称

2. nodeValue ：节点的值

3. nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9