網頁物件 (DOM)

節點

在 DOM 中，標籤（tag）、標籤夾起來的內容（text）、屬性（attribute）、<!-- --> 註解（comment）、& 之類的實體（entity），都是節點（node）。

DOM 提供 Node 介面做為共通的屬性和方法，然後視功能需要繼承出其它介面，例如 Element 介面來處理標籤和屬性之間的關係。

傳回多個節點時會取得 NodeList 物件，當陣列物件看待即可，透過索引值直接取得裡面的 Node，或使用 length 取得節點數量。

產生新節點：

節點類型：

來看些範例，首先是插入節點，例如在 BODY 標籤的開頭與結尾，各加入 HR 標籤：

document.body.insertBefore(document.createElement('hr'),document.body.firstChild); document.body.appendChild(document.createElement('hr'));
要注意的是，空白和換行也算一個節點！所以 insertBefore() 第二參數使用 childNodes[索引值] 時，必須連空行節點也數進去！

然後是節點樹，用它來增加元素，再把節點樹增加到網頁，避免頻繁更新整個頁面的 DOM 結構，降低運算開銷：

let frag=document.createDocumentFragment(); let p1=document.createElement('p'); p1.textContent='RED'; p1.style.color='#f00'; let p2=document.createElement('p'); p2.textContent='GREEN'; p2.style.color='#0f0'; let p3=document.createElement('p'); p3.textContent='BLUE'; p3.style.color='#00f'; frag.appendChild(p1); frag.appendChild(p2); frag.appendChild(p3); document.body.appendChild(frag);

元素

HTML 的標籤 (Tag) 在 DOM 改稱為元素 (Element)，底下是 Element 介面的屬性和方法：

由於網頁是由標籤和屬性構成，因此元素的使用，大多不在產生新的元素，而是取得現成的元素節點，也就是剖析文件！底下是 DOM 提供的方法，可用於 XML：

document.getElementById('ID 屬性')
document.getElementsByClassName('CLASS 屬性')[索引值]
document.getElementsByTagName('標籤名稱')[索引值]
document.querySelector('CSS 選擇器')
document.querySelectorAll('CSS 選擇器')[索引值]

也可以用 BOM 直接取得 HTML 的節點，但這不是 DOM 標準，不適用於 XML：

「依 ID 名稱取得節點」以及「直接取得節點」是最直覺的！建議應用程式都採取這種做法來存取元素，有助於保障開發時效。

至於其它做法，通常是為了「剖析資料」用的，例如 Ajax 的通訊、或者像是 docx 附檔名的 Microsoft Office Word XML Format 文件。由於不知道節點的元素名稱與排列架構，只好用巡迴的方式逐筆處理資料，但如果不是這種場合，大可跳過這些做法。

另外，getElementsByTagName() 是傳回節點樹本身，所以查詢速度快，但每增刪節點都會動到整棵節點樹，所以增刪速度慢。querySelectorAll() 則是另外複製一棵小節點樹，所以查詢速度慢，但增刪節點只動這小棵節點樹，所以增刪速度快。

currentScript 如果寫在另一個 SCRIPT 標籤的函式來調用，將無法傳回元素節點，所以只能在當前 SCRIPT 標籤使用。

內容、屬性

取得元素節點後，來看 JavaScript 能用它來做哪些事～

首先來看 textContent，它可以讓你存取元素的文字內容。底下範例在 BODY 裡面新增一個 DIV 元素，然後又在 DIV 裡面新增一個 B 元素，最後在 B 元素使用 textContent 輸入 Hello 做為文字內容：

let div=document.createElement('DIV'); document.body.appendChild(div); let b=document.createElement('B'); div.appendChild(b); b.textContent='Hello';
接著來看 innerHTML，它可以直接在元素節點裡面輸入 HTML 語法，上面的範例可以因此簡化為……

let div=document.createElement('DIV'); document.body.appendChild(div); div.innerHTML='<b>Hello</b>';
然後來看存取 HTML 標籤的屬性，例如 IMG 標籤有個 SRC 屬性，那 JavaScript 建立一個 IMG 元素時，就可以這樣來設定，比 setAttribute() 省事多了：

let img=document.createElement('IMG'); document.body.append(img); img.src='image.png';
再來看設定 CSS 樣式，下面的範例將先前程式的 b 用 CSS 設定為紅色，且字型設定為「微軟正黑體」：

b.style.color='red'; b.style.fontFamily='微軟正黑體';
上面程式相當於如下 CSS 描述：

b { color:red; font-family:微軟正黑體 }

請注意 CSS 的 font-family 橫線，到了 JavaScript 改成 fontFamily 字母大寫。

但有些樣式名稱並不規則，例如 CSS 的 float 在 JavaScript 是 cssFolat。

最後來看事件，將 b 加入「在上面按滑鼠左鍵會跳出『別亂按』訊息」的功能：

b.onclick=function(){ document.write('別亂按～'); };
addEventListener() 是 DOM 標準寫法，不像設定 on 事件會覆寫掉原先的功能，它是追加功能進去，按先後順序執行，並且可用 removeEventListener() 移除。它有第三個參數，設為 true 可以阻止往它層元素傳遞事件，也就是只在自己這層元素觸發事件。