任何一个节点,都有属性,可以操作

节点类型: 节点.nodeType 执行结果是 一个数值

元素节点  1
属性节点  2
文本节点  3
注释节点  8

节点名称:  节点.nodeName

元素节点  大写英文字母的标签名称
属性节点  属性名称
文本节点  #text
注释节点  #comment

节点内容:  节点.nodeValue

元素节点  null
属性节点  属性值
文本节点  节点中的文本内容
注释节点  注释内容

实际应用

1.元素节点

htmlcssjs
    <table>
        <tr><!--我是注释内容-->
            <td id="john" name="myname">John</td>
            <td>Doe</td>
            <td id="jack">Jack</td>
        </tr>
    </table>
随便写写
    var a = document.getElementById("john");  
    console.log(a.nodeType);  // 1
    console.log(a.nodeName);  // TD
    console.log(a.nodeValue);  // null

2.属性节点

htmlcssjs
    <table>
        <tr><!--我是注释内容-->
            <td id="john" name="myname">John</td>
            <td>Doe</td>
            <td id="jack">Jack</td>
        </tr>
    </table>
随便写写
    var b = document.getElementById("john").getAttributeNode("name");  
    console.log(b.nodeType);  // 2
    console.log(b.nodeName);  // name
    console.log(b.nodeValue);  //myname

3.文本节点

htmlcssjs
    <table>
        <tr><!--我是注释内容-->
            <td id="john" name="myname">John</td>
            <td>Doe</td>
            <td id="jack">Jack</td>
        </tr>
    </table>
随便写写
    var c = document.getElementsByTagName("td")[0].firstChild;
    console.log(c.nodeType);  // 3
    console.log(c.nodeName);  // #text
    console.log(c.nodeValue); // John

4.注释节点

htmlcssjs
    <table>
        <tr><!--我是注释内容-->
            <td id="john" name="myname">John</td>
            <td>Doe</td>
            <td id="jack">Jack</td>
        </tr>
    </table>
随便写写
    var d = document.getElementById("tr").firstChild;
    console.log(d.nodeType);  // 8
    console.log(d.nodeName);  // #comment
    console.log(d.nodeValue); // 我是注释内容

试一试


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。