Document 節點 · 學習講義 2019

## 一、概述 `document`節點對象代表整個文檔，每張網頁都有自己的`document`對象。`window.document`屬性就指向這個對象。只要瀏覽器開始載入 HTML 文檔，該對象就存在了，可以直接使用。 ## 二、屬性 ### 2.1 快捷方式屬性 * 對于 HTML 文檔來說，`document`對象一般有兩個子節點。第一個子節點是`document.doctype`，指向`<DOCTYPE>`節點，即文檔類型（Document Type Declaration，簡寫DTD）節點。HTML 的文檔類型節點，一般寫成`<!DOCTYPE html>`。如果網頁沒有聲明 DTD，該屬性返回`null`。`document.firstChild`通常就返回這個節點。 * `document.documentElement`屬性返回當前文檔的根元素節點（root）。它通常是`document`節點的第二個子節點，緊跟在`document.doctype`節點后面。HTML網頁的該屬性，一般是`<html>`節點。 * `document.body`屬性指向`<body>`節點，`document.head`屬性指向`<head>`節點。這兩個屬性總是存在的，如果網頁源碼里面省略了`<head>`或`<body>`，瀏覽器會自動創建。另外，這兩個屬性是可寫的，如果改寫它們的值，相當于移除所有子節點。 ### 2.2 節點集合屬性 * `document.links`屬性返回當前文檔所有設定了`href`屬性的`<a>`及`<area>`節點。 * `document.images`屬性返回頁面所有`<img>`圖片節點。 ### 2.3 文檔靜態信息屬性 * `document.URL`屬性都返回一個字符串，表示當前文檔的網址。 * `document.domain`屬性返回當前文檔的域名，不包含協議和端口。 * `document.title`屬性返回當前文檔的標題。 * `document.characterSet`屬性返回當前文檔的編碼，比如`UTF-8`、`ISO-8859-1`等等。 ## 三、方法 ### 3.1 document.querySelector()，document.querySelectorAll() `document.querySelector`方法接受一個 CSS 選擇器作為參數，返回匹配該選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回`null`。 ~~~ var el1 = document.querySelector('.myclass'); ~~~ `document.querySelectorAll`方法與`querySelector`用法類似，區別是返回一個`NodeList`對象，包含所有匹配給定選擇器的節點。 ~~~ elementList = document.querySelectorAll('.myclass'); ~~~ 這兩個方法的參數，可以是逗號分隔的多個 CSS 選擇器，返回匹配其中一個選擇器的元素節點，這與 CSS 選擇器的規則是一致的。 ### 3.2 document.getElementsByTagName() `document.getElementsByTagName`方法搜索 HTML 標簽名，返回符合條件的元素。它的返回值是一個類似數組對象，可以實時反映 HTML 文檔的變化。如果沒有任何匹配的元素，就返回一個空集。 ~~~ var paras = document.getElementsByTagName('p'); paras instanceof HTMLCollection // true ~~~ 上面代碼返回當前文檔的所有`p`元素節點。 ### 3.3 document.getElementsByClassName() `document.getElementsByClassName`方法返回一個類似數組的對象（`HTMLCollection`實例），包括了所有`class`名字符合指定條件的元素，元素的變化實時反映在返回結果中。 ~~~ var elements = document.getElementsByClassName(names); ~~~ 由于`class`是保留字，所以 JavaScript 一律使用`className`表示 CSS 的`class`。參數可以是多個`class`，它們之間使用空格分隔。 ~~~ var elements = document.getElementsByClassName('foo bar'); ~~~ 上面代碼返回同時具有`foo`和`bar`兩個`class`的元素，`foo`和`bar`的順序不重要。 ### 3.4 document.getElementById() `document.getElementById`方法返回匹配指定`id`屬性的元素節點。如果沒有發現匹配的節點，則返回`null`。 ~~~ var elem = document.getElementById('para1'); ~~~ `document.getElementById`方法與`document.querySelector`方法都能獲取元素節點，不同之處是`document.querySelector`方法的參數使用 CSS 選擇器語法，`document.getElementById`方法的參數是元素的`id`屬性。 ~~~ document.getElementById('myElement') document.querySelector('#myElement') ~~~ 上面代碼中，兩個方法都能選中`id`為`myElement`的元素，但是`document.getElementById()`比`document.querySelector()`效率高得多。 ### 3.5 document.createElement() `document.createElement`方法用來生成元素節點，并返回該節點。 ~~~ var newDiv = document.createElement('div'); ~~~ `createElement`方法的參數為元素的標簽名，即元素節點的`tagName`屬性，對于 HTML 網頁大小寫不敏感，即參數為`div`或`DIV`返回的是同一種節點。如果參數里面包含尖括號（即`<`和`>`）會報錯。 ### 3.6 document.createTextNode() `document.createTextNode`方法用來生成文本節點（`Text`實例），并返回該節點。它的參數是文本節點的內容。 ~~~ var newDiv = document.createElement('div'); var newContent = document.createTextNode('Hello'); newDiv.appendChild(newContent); ~~~ 上面代碼新建一個`div`節點和一個文本節點，然后將文本節點插入`div`節點。 ### 3.7 document.createAttribute() `document.createAttribute`方法生成一個新的屬性節點（`Attr`實例），并返回它。 ~~~ var attribute = document.createAttribute(name); ~~~ `document.createAttribute`方法的參數`name`，是屬性的名稱。 ~~~ var node = document.getElementById('div1'); var a = document.createAttribute('my_attrib'); a.value = 'newVal'; node.setAttributeNode(a); // 或者 node.setAttribute('my_attrib', 'newVal'); ~~~ ### 3.8 document.addEventListener()，document.removeEventListener()，document.dispatchEvent() ~~~ // 添加事件監聽函數 document.addEventListener('click', listener, false); // 移除事件監聽函數 document.removeEventListener('click', listener, false); // 觸發事件 var event = new Event('click'); document.dispatchEvent(event); ~~~