HTML DOM總結 - bhaltair－IT工程師數位筆記本

文章出處

MDN的定義

文檔對象模型 (DOM) 是 HTML 和 XML 文檔的編程接口。它給文檔（結構樹）提供了一個結構化的表述并且定義了一種方式—程序可以對結構樹進行訪問，以改變文檔的結構，樣式和內容。 DOM 提供了一種表述形式— 將文檔作為一個結構化的節點組以及包含屬性和方法的對象。從本質上說，它將 web 頁面和腳本或編程語言連接起來了。

DOM核心API

在DOM編程時，通常使用的最多的就是 Document和 window 對象。 window 對象表示瀏覽器中的內容，是根元素。而 document 對象是文檔本身的根節點。Element 繼承了通用的 Node 接口

document.getElementById(id)

element.getElementsByTagName(name)

document.createElement(name)

parentNode.appendChild(node)

element.innerHTML

element.style.left

element.setAttribute

element.getAttribute

element.addEventListener

window.onload

接口及對象

許多對象會對多個不同的接口進行實現。比如table對象實現了HTML Table Element Interface ，由于table對象也是一個HTML元素，所以也實現了Element接口，最后，其還是節點數中的一個節點，所以更基本的還實現了Node接口

屬性操作

 1 // 獲取一個{name, value}的數組
 2 
 3 var attrs = el.attributes;
 4 
 5 // 獲取、設置屬性
 6 
 7 var c = el.getAttribute('class');
 8 
 9 el.setAttribute('class','highlight');
10 
11 // 判斷、移除屬性
12 
13 el.hasAttribute('class');
14 
15 el.removeAttribute('class');
16 
17 // 是否有屬性設置
18 
19 el.hasAttributes();