DOM-Nodes

Posted on Edited on In Views: Disqus:

 

一、

DOM 有一些跟 Node 有關的東西如下：

parentNode、childNodes[nodenumber]、firstChild、lastChild、previousSibling、nextSibling；

另外有還有許多如 appendChild()、removeChild()、firstChild、nextSibling、previousSibling、parentNode

方法與屬性也是跟操作 Node 有關的

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <div id="div1">
        div1
        <p id="p1">p1</p>
        <p id="p2">p2</p>
        <p id="p3">p3</p>

        <div id="div2">
            div2
            <p id="p21">p21</p>
            <p id="p22">p22</p>
            <p id="p23">p23</p>

            <div id="div3">
                div3
                <p id="p31">p31</p>
                <p id="p32">p32</p>
                <p id="p33">p33</p>
            </div>
        </div>
    </div>
</body>
</html>

操作如下

根據不同的childNodes索引，可得知位置如下

 

二、nodeValue屬性

nodeValue屬性可以取text nodes、attribute nodes，但取不到element nodes。

注意節點childNodes[0]、childNodes[1]屬於text nodes，所以nodeValue屬性應用如下

 

三、nodeName屬性

1、nodeName屬性是唯讀的。

2、一個元素節點的nodeName就是tag name

3、一個attribute node的nodeName就是attribute name

4、一個text node的nodeName總是表示成#text

5、一個document的nodeName總是表示成#document

 

四、nodeType屬性

如果是element的話則nodeType會被表示為1、attribute的nodeType則為2、

text的nodeType則為3、comment的nodeType則為8、document的nodeType則為9。

 

五、document.body與document.documentElement 的差別