原生JavaScript的DOM操作方法總結

什么是DOM？

　　DOM即文檔對象模型，Document Object Model。  是HTML和XML文檔的編程接口。它提供了對文檔的結構化的表述，並定義了一種方式可以使從程序中對該結構進行訪問，從而改變文檔的結構，樣式和內容。DOM 將文檔解析為一個由節點和對象（包含屬性和方法的對象）組成的結構集合。簡言之，它會將web頁面和腳本或程序語言連接起來。

　　實際上，DOM就是瀏覽器為JavaScript提供的一系列的接口（由window.document提供），通過這些接口，我們可以操作web頁面。 　　

　　另外，DOM也可以給其他語言提供操作接口的，比如python。 這里，作為前端，我們只談JavaScript。 

一般，我們可以從DOM節點的創建、查詢、更改、刪除、屬性操作等方面來談DOM的api，這樣更具有邏輯性。

 

DOM 創建

　　DOM節點往往是一個標簽、文本或者屬性等，我們可以通過元素的nodetype屬性來判斷這個節點的類型，下面是常見的：

• Element --- 元素，nodeType的值為1。
• Attribute --- 屬性， nodeType的值為2。
• Text --- 文本，nodeType的值為3.

　　基本創建方式如下：

var el1 = document.createElement('div');
var el2 = document.createElement('input');
var node = document.createTextNode('hello world!');

 

 

DOM 查詢

　　元素查詢的API返回的結果是DOM節點或者是DOM節點的列表，document提供了下面幾種查詢方法：

// 返回當前文檔中第一個類名為 "myclass" 的元素
var el = document.querySelector(".myclass");

// 返回一個文檔中所有的class為"note"或者 "alert"的div元素
var els = document.querySelectorAll("div.note, div.alert");

// 獲取元素
var el = document.getElementById('xxx');
var els = document.getElementsByClassName('highlight');
var els = document.getElementsByTagName('td');

 

另外，Element也提供了很多相對於元素的DOM導航方法：

// 獲取父元素、父節點
var parent = ele.parentElement;
var parent = ele.parentNode;

// 獲取子節點，子節點可以是任何一種節點，可以通過nodeType來判斷
var nodes = ele.children;    

// 查詢子元素
var els = ele.getElementsByTagName('td');
var els = ele.getElementsByClassName('highlight');

// 當前元素的第一個/最后一個子元素節點
var el = ele.firstChild;
var el = ele.firstElementChild;

var el = ele.lastChild;
var el = ele.lastElementChild;

// 下一個/上一個兄弟元素節點
var el = ele.nextSibling;
var el = ele.nextElementSibling;

var el = ele.previousSibling;
var el = ele.previousElementSibling;

 

 

DOM 更改

// 添加、刪除子元素
ele.appendChild(el);
ele.removeChild(el);

// 替換子元素
ele.replaceChild(el1, el2);

// 插入子元素
parentElement.insertBefore(newElement, referenceElement);

 

 

屬性操作

// 獲取一個{name, value}的數組
var attrs = el.attributes;

// 獲取、設置屬性
var c = el.getAttribute('class');
el.setAttribute('class', 'highlight');

// 判斷、移除屬性
el.hasAttribute('class');
el.removeAttribute('class');

// 是否有屬性設置
el.hasAttributes();     

 

 

 

 

常見的面試問題

innerHTML與outerHTML的區別？

DOM元素的innerHTML, outerHTML, innerText, outerText屬性的區別也經常被面試官問到， 比如對於這樣一個HTML元素：<div>content<br/></div>。

innerHTML：內部HTML，content<br/>；
outerHTML：外部HTML，<div>content<br/></div>；
innerText：內部文本，content ；
outerText：內部文本，content ；

 

上述四個屬性不僅可以讀取，還可以賦值。outerText和innerText的區別在於outerText賦值時會把標簽一起賦值掉，另外xxText賦值時HTML特殊字符會被轉義。