JavaScript學習筆記（DOM 導航、節點、集合、節點列表）

JavaScript學習筆記（DOM 導航、節點、集合、節點列表）
@[TOC](JavaScript學習筆記（DOM 導航、節點、集合、節點列表）)
DOM節點
節點關係：
在節點之間導航
子節點和節點值
1. 取出h1元素中的文本並複製到P元素中：(第一種)
2. 取出h1元素中的文本並複製到P元素中：(第二種)
3. 取出h1元素中的文本並複製到P元素中：(第三種)
JavaScript HTML DOM 元素（節點）
添加和刪除節點(HTML元素)
創建新的HTML元素-insertBefore()
刪除已有HTML元素（removeChild）
替換HTML元素(replaceChild)
JavaScript HTML DOM 集合
HTMLCollectioin 對象
HTML HTMLCollection長度
實例：改變所有p元素的背景色：
HTMLCollection並非數組！
HTML DOM NOdeList長度：
改變節點列表中所有p元素的背景色：

通過HTMLDOMain能夠使用節點關係來導航節點樹。

DOM節點

W3CHTML DOM標準，HTML文檔中的所有的事物都節點：

整個文檔是文檔節點
每個HTML元素是元素節點
HTML元素內的文本是文本節點
每個HTML屬性是屬性節點
所有註釋是註釋節點

有了HTML DOM，節點樹中的所有節點才能通過JavaScript來訪問。
能夠創建新節點，還可以修改和刪除所有節點。

節點關係：

節點樹中的節點彼此之間有一定的等級關係。

術語(父、子和同胞,parent、child以及sibling)用於描述這些關係。
在節點樹中，頂端節點被稱爲根(根節點)。
每個節點都有父節點，除了根(根節點沒有父節點)。
節點能夠擁有一定數量的子
同胞(兄弟或者姐妹)指的是擁有相同節點父的節點。

<html>
	<head>
		<title>DOM </title>
	</head>
	<body>
		<h1> 第一課</h1>
		<p> Hello World!</p>
	</body>
</html>

從以上的HTML中能夠讀到以下信息：

html是根節點
html沒有父
html是head和body的父
head是html的第一個子
body是html的最後一個子
同時：
head有一個子：title
title有一個子(文本節點)：“DOM”
body有兩個子：h1 和 p
h1有一個子：第一課
p有一個子：Hello World!
h1 和 p是同胞

在節點之間導航

通過JavaScript，可以使用以下節點屬性在節點之間導航：

parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling

子節點和節點值

DOM處理中的一種常見錯誤是認爲元素節點中包含文本。
實例：

<title id = "demo"> DOM 教程</title>

它包含了值爲"DOM 教程"的文本節點。

文本節點的值能夠通過節點的innerHTML 屬性進行訪問：

var myTitle = document.getElementById("demo").innerHTML;

訪問innerHTML 屬性等同於訪問首個子節點的nodeValue:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

訪問第一個子節點：

var myTitle = document.getElement("demo").childNodes[0].nodeValue;

1. 取出h1元素中的文本並複製到P元素中：(第一種)

<body>

    <h1 id="id01">我的第一張網頁</h1>
    <p id="id02">Hello!</p>

    <script>
      document.getElementById("id02").innerHTML = 
      document.getElementById("id01").innerHTML;
    </script>
</body>

2. 取出h1元素中的文本並複製到P元素中：(第二種)

<body>

    <h1 id="id01">我的第一張網頁</h1>
    <p id="id02">Hello!</p>

    <script>
      document.getElementById("id02").innerHTML = 
      document.getElementById("id01").firstChild.nodeValue;
    </script>
</body>

3. 取出h1元素中的文本並複製到P元素中：(第三種)

<body>

    <h1 id="id01">我的第一張網頁</h1>
    <p id="id02">Hello!</p>

    <script>
      document.getElementById("id02").innerHTML = 
      document.getElementById("id01").childNodes[0].nodeValue;
    </script>
</body>

InnerHTML
使用innerHTML取回HTML元素的內容。

DOM 根節點
有兩個特殊屬性允許訪問完整文檔：

document.body - 文檔的body
document.documentElement - 完整文檔
實例：

	<p>Hello World!</p>

    <div>
        <p>DOM 很有用</p>

        <p>本例演示：<b>doucument.body</b>屬性。</p>
    </div>

    <script>
      alert(document.body.innerHTML);
    </script>

第二種：

	<p>Hello World!</p>

    <div>
        <p>DOM 很有用</p>

        <p>本例演示：<b>doucument.documentElement</b>屬性。</p>
    </div>
    <script>
      alert(document.documentElement.innerHTML);
    </script>

nodeName屬性
nodeName屬性規定節點的名稱。

nodeName 是隻讀的
元素節點的nodeName 等同於標籤名
屬性節點的nodeName 是屬性名稱
文本節點的nodeName 總是 #text
方根節點的nodeName 總是 #document

案例：

<h1 id="id01">我的第一張網頁</h1>

    <p id="id02"></p>

    <script>
      //獲取id爲id01的標籤名
      document.getElementById("id02").innerHTML = 
      document.getElementById("id01").nodeName;//H1
    </script>

注意：nodeName總是包含HTML元素的大寫標籤名。

nodeType屬性
nodeType屬性返回節點的類型，nodeType是隻讀的。

<h1 id="id01">我的第一張網頁</h1>

    <p id="id02"></p>

    <script>
      //獲取id爲id01的標籤名

      document.getElementById("id02").innerHTML = 
      document.getElementById("id01").nodeType;//1
    </script>

nodeType的屬性：

JavaScript HTML DOM 元素（節點）

添加和刪除節點(HTML元素)

如需向HTML DOM添加新元素，必須首先創建這個元素(元素節點)，然後將其追加到已有的元素。

例子：

<div id="div1">
        <p id="p1">這是一段文字。</p>
        <p id="p2">這是另一段文字。</p>
    </div>  

    <script>
        //創建了一個新的<p>元素
        var para = document.createElement("p");
        //如果要向<p>元素添加文本，就需要先創建文本節點，
        var node = document.createTextNode("這是個新文本！");
        //然後向<p>元素添加這個文本節點
        para.appendChild(node);

        //查找一個已有的元素
        var element = document.getElementById("div1");
        //向這個已有的元素追加新元素
        element.appendChild(para);
    </script>

創建新的HTML元素-insertBefore()

<div id="div1"> 
        <p id="p1"></p>這是一段文字！</p>
        <p id="p2">這是另一段文字。</p>
    </div>

    <script>
        var para = document.createElement("p");
        var node = document.createTextNode("這是最新的文本哦！");
        para.appendChild(node);

        var element = document.getElementById("div1");
        var child = document.getElementById("p1");
        element.insertBefore(para,child);
    </script>

刪除已有HTML元素（removeChild）

如需刪除某個HTML元素，需要知道該元素的父：
第一種：

<div id="div1">
        <p id="p1">這是第一段文字</p>
        <p id="p2">這是第二段文字</p>
    </div>

    <script>
        var parent = document.getElementById("div1");
        var child = document.getElementById("p1");
        parent.removeChild(child);
    </script>

第二種方式：

	<div id="div1">
        <p id="p1">這是第一段文字</p>
        <p id="p2">這是第二段文字</p>
    </div>

    <script>
        //拿到child
        var child = document.getElementById("p2");
        //通過child找到它的parent並且刪除child
        child.parentNode.removeChild(child);
    </script>

方法 node.remove() 是在 DOM 4 規範中實現的。

替換HTML元素(replaceChild)

如需替換元素的，請使用 replaceChild() 方法：

<div id="div1">
        <p id="p1">這是一段文字。</p>
        <p id="p2">這是另一段文字。</p>
    </div>
    <script>
        var parent = document.getElementById("div1");
        var child = document.getElementById("p1");

        var para = document.createElement("p");
        var node = document.createTextNode("這是新的文本。小可愛！");
        //用新的文本替換了id爲p1的文本
        parent.replaceChild(para,child);
    </script>

JavaScript HTML DOM 集合

HTMLCollectioin 對象

getElementsByTagName() 方法返回HTMLCollection對象。
HTMLCollection對象是類數組的HTML元素列表(集合)。
例如：選中文檔中的所有p元素：

var x = document.getElementsByTagName("p");

該集合中的元素可通過索引號進行訪問。
如果需要訪問第二個p 元素，可以寫：

y = x[1];


	<h1>JavaScript HTML DOM</h1>

    <p>Hello World!</p>

    <p>Hello Chinal!</p>

    <p id="demo"></p>
    <script>
        //將所有的p標籤都放到myCollection集合
        var myCollection = document.getElementsByTagName("p");
        document.getElementById("demo").innerHTML = 
        "第二段的 innerHTML 是："+
        myCollection[1].innerHTML;
    </script>

HTML HTMLCollection長度

lenght 屬性定義了HTMLCollection中元素的數量：

<h1>JavaScript HTML DOM</h1>

    <p>Hello World!</p>

    <p>Hello Chinal!</p>

    <p id="demo"></p>

    <p id="last"></p>
    <script>
        var myCollection = document.getElementsByTagName("p");
        document.getElementById("last").innerHTML = 
        "此文檔包含 "+ myCollection.length + "段文字。";
    </script>

實例：改變所有p元素的背景色：

<h1>JavaScript HTML DOM</h1>

    <p>Hello World!</p>

    <p>單擊按鈕可更改所有P元素的顏色</p>

    <button onclick="myFunction()">試一試</button>

    <script>
        function myFunction() {
            var myCollection = document.getElementsByTagName("p");
            var i;
            for(i = 0; i< myCollection.length; i++){
                myCollection[i].style.color = "red";
            }
        }
    </script>

HTMLCollection並非數組！

HTMLCollection 也許看起來像數組，但並非數組。
能夠遍歷列表並通過數字引用元素(就像數組那樣)。
不過，我們無法像作用數組那樣，valueOf()、pop()、push()或者join()。

JavaScript HTML DOM 節點列表

HTML DOM NodeList對象
NOdeList對象與HTMLCollection對象幾乎相同。
NodeList對象與HTMLCollection 對象幾乎是相同的。
如果使用getElementsByClassName()方法，某些瀏覽器會返回NodeList對象而不是HTMcollection.
但是所有的瀏覽器都會爲childNode屬性返回NodeList對象。
大多數瀏覽器會爲querySelectorAll() 方法返回 NodeList對象。
例子：選中文檔中的所有p節點：

	<h1>JavaScript HTML DOM</h1>

    <p>Hello World!</p>

    <p>Hello China!</p>

    <button onclick="myFunction()">點擊一下！</button>
    <p id="demo"></p>
    <p id="demo2"></p>
    <script>
        function myFunction() {
            var myNodeList = document.querySelectorAll("p");
        document.getElementById("demo").innerHTML = 
        "第一段的 innerHTML 是："+
        myNodeList[0].innerHTML;

            var myNodeList2 = document.querySelectorAll("p");
        document.getElementById("demo2").innerHTML = 
        "第二段的 innerHTML 是："+
        myNodeList2[1].innerHTML;
        }
    </script>

HTML DOM NOdeList長度：

length屬性定義節點列表中的節點數：

	<h1>JavaScript HTML DOM</h1>

    <p>Hello World!</p>

    <p>Hello China!</p>

    <p>Hello China!</p>
    
    <p>Hello China!</p>

    <p id="demo"></p>

    <script>
        var myNodeList = document.querySelectorAll("p");
        document.getElementById("demo").innerHTML = 
        "此文檔包含"+myNodeList.length  + " 段文字!";
    </script>

改變節點列表中所有p元素的背景色：

<h1>JavaScript HTML DOM</h1>

    <p>Hello World!</p>

    <p>Hello China!</p>

    <p>Hello China!</p>

    <p>Hello China!</p>

    <button onclick="myFunction()">試一試</button>

    <script>
        function myFunction() {
            var myNodeList = document.querySelectorAll("p");
            var i;
            for(i = 0; i< myNodeList.length; i++){
                myNodeList[i].style.color = "pink";
            }
        }
    </script>

JavaScript學習筆記（DOM 導航、節點、集合、節點列表）