JavaScript & DOM 學習筆記（三）

時間 2019-11-13

原文原文鏈接

1. JavaScript 語言裏的對象能夠分爲三種類型：html

a. 用戶定義對象（user-defined object）：由程序員自行建立的對象。
node

b. 內建對象（native object）：內建在 JavaScript 語言裏的對象，如 Array、Math 和 Date 等
程序員

c. 宿主對象（host object）：由瀏覽器提供的對象。
數組

2. DOM 文檔的節點可分爲：元素節點、屬性節點和文本節點等。瀏覽器

元素節點（element node）：DOM 的原子是元素節點。如筆記二中代碼部分，咱們使用了 <body>、、<ul> 之類的元素。 Don't forget to buy this stuff.this

文本節點（text node）：上面的 元素節點中，包含着的「Don't forget to buy this stuff.」就是一個文本節點。在 XHTML 文檔裏，文本節點老是被包含在元素節點的內部。但並不是全部的元素節點都包含有文本節點。
spa

屬性節點（attribute node）： 節點中的 title="a gentle reminder" 就是一個屬性節點。由於屬性老是被放在起始標籤裏，因此屬性節點老是被包含在元素節點中。並不是全部的元素都包含着屬性，但全部的甦醒都被元素包含。code

3. 獲取元素的方式：（下面的方法名區分大小寫）htm

a. getElementById（id）：返回一個該 id 的元素節點。如：document.getElementById（"idName"）
對象

b. getElementByTagName（tag）：返回一個對象數組，每一個對象分別對應文檔中該 tag 標籤的元素。

c. getElementByClassName（class）：返回一個具備相同類名的元素的數組。這個方法能夠查找帶有多個類名的元素，只須要在參數中用空格將類名分隔開。如：document.getElementByClassName（"class1 class2"）; 多個類名的順序不影響結果。

4. 獲取和設置元素的屬性

a. getAttribute：object.getAttribute（attribute）；此方法不屬於 document對象，因此不能經過 document 對象去調用。只能經過元素節點對象調用。

b. setAttribute：object.setAttribute（attribute）；值得關注的細節：setAttribute 作出的修改不會反應在文檔自己的源代碼裏，也就是說不會改動源代碼。這種現象源自 DOM 的工做模式：先加載文檔的靜態內容，在動態刷新，而動態刷新不會影響文檔的靜態內容。這正是 DOM 的真正威力：對頁面內容進行刷新卻不須要在瀏覽器裏刷新頁面。

5. childNodes、nodeType、nodeValue 屬性

childNodes：在一棵節點樹上，childNodes屬性能夠用來獲取任何一個元素的全部子元素，返回值是一個數組，而這個數組中包含全部的類型節點。事實上，文檔中幾乎每同樣東西都是一個節點，甚至連空格和換行符都會被解釋爲節點。
nodeType：幸虧的是，每個節點都有 nodeType 屬性，nodeType 屬性的值是一個數字。nodeType 屬性總共有 12 種可取值，其中三種最具實用價值：

元素節點 nodeType 屬性值是 1，屬性節點 nodeType 屬性值是 2，文本節點 nodeType 屬性值是 3

nodeValue：若是想改變一個文本節點的值，那就使用 nodeValue 屬性來獲取該文本對象的值 node.nodeValue。

例如：一個文本節點

<p id="description">Choose a image.</p>

注意：用 nodeValue 屬性獲取 description 對象的值時，獲得的並非包含在這個段落裏的文本。使用 alert (description.nodeValue) 來驗證，返回的是一個 null 值。元素自己的 nodeValue 是一個空值。而包含在 元素中的文本是另外一個節點，它是 元素的第一個子節點。正確的獲取文本是這樣的：alert（description.childNodes[0].nodeValue）

6. firstChild 和 lastChild 屬性

上面介紹的 chiildNodes[0] 有個更直觀的同義詞 firstChild。若是隻須要訪問 childNodes 數組的第一個元素，就能夠使用 firstChild。這不只更加簡短，並且可讀性更強。一樣，與之對應的 node.childNodes[node.childNodes.length - 1] 也有個同義詞, node.lastChild。用來獲取元素 childNodes 中的最後一個元素。