翻譯：瘋狂的技術宅
Javascript DOM（文件物件模型）是一個允許開發人員操縱頁面內容、結構和風格的介面。在本文中，我們將理解什麼是 DOM 以及如何用 Javascript 去操作它。本文還可以作為基本 DOM 操作的參考。
什麼是 DOM？
基本上網頁由 HTML 和 CSS 文件組成。瀏覽器用於建立文件的描述被稱為文件物件模型（DOM）。它使 Javascript 能夠訪問和操作頁面的元素和樣式。該模型構建在基於物件的樹結構中，並定義：
- HTML 元素作為物件
- HTML 元素的屬性和事件
- 訪問HTML元素的方法
HTML DOM模型
元素的位置稱為節點。不僅元素獲得節點，而且元素和文字的屬性也有屬於它們自己的節點（屬性節點和文字節點）。
DOM 文件
DOM 文件是網頁中所有其他物件的所有者。這意味著如果你想訪問網頁上的任何物件，必須從這裡開始。它還包含許多重要的屬性和方法，使我們能夠訪問和修改自己的頁面。
查詢 HTML 元素
現在我們瞭解了 DOM 文件是什麼，接下來就可以開始獲取我們的第一個 HTML 元素了。 Javascript DOM 有許多不同的方法可以用，不過這些最常見：
按 ID 獲取元素
getElementById() 方法用於通過其 id 獲取單個元素。我們來看一個例子：
var title = document.getElementById(‘header-title’);
複製程式碼我們得到 id 為 header-title 的元素，並將其儲存到變數中。
按類名獲取元素
還可以用 getElementsByClassName() 方法獲取多個物件，該方法返回一個元素陣列。
var items = document.getElementsByClassName(‘list-items’);
複製程式碼這裡我們得到類 list-items 的所有專案，並將它們儲存到變數中。
按標籤名稱獲取元素
還可以用 getElementsByClassName() 方法按標記名稱獲取元素。
var listItems = document.getElementsByTagName(‘li’);
複製程式碼這裡我們獲取 HTML 文件中所有得 li 元素並將它們儲存到變數中。
Queryselector
querySelector()方法返回與指定的 CSS選擇器匹配的第一個元素。這意味著你可以通過id、class、tag和所有其他有效的 CSS 選擇器獲取元素。在這裡我列出了一些最常用的選項。
按 id 獲取：
var header = document.querySelector(‘#header’)
複製程式碼按 class 獲取：
var items = document.querySelector(‘.list-items’)
複製程式碼按標籤獲取：
var headings = document.querySelector(‘h1’);
複製程式碼獲取更具體的元素：
我們還可以使用 CSS Selectors 獲得更多的特定元素。
document.querySelector(“h1.heading”);
複製程式碼在這個例子中，我們同時搜尋標記和類，並返回傳遞給 CSS Selector 的第一個元素。
Queryselectorall
querySelectorAll() 方法與 querySelector() 完全相同，只是它返回符合 CSS Selector 的所有元素。
var heading = document.querySelectorAll(‘h1.heading’);
複製程式碼在這個例子中，我們得到所有屬於 heading 類的 h1 標籤，並將它們儲存在一個陣列中。
更改 HTML 元素
HTML DOM 允許我們通過更改其屬性來對 HTML 元素的內容和樣式進行修改。
更改HTML
innerHTML 屬性可用於修改 HTML 元素的內容。
document.getElementById(“#header”).innerHTML = “Hello World!”;
複製程式碼在這個例子中，我們得到 id 為 header 的元素，並把其內容設定為“Hello World！”。
InnerHTML 還可以把標籤放入另一個標籤中。
document.getElementsByTagName("div").innerHTML = "<h1>Hello World!</h1>"
複製程式碼在這裡將 h1 標記放入所有已存在的 div 中。
更改屬性的值
還可以用 DOM 更改屬性的值。
document.getElementsByTag(“img”).src = “test.jpg”;
複製程式碼在這個例子中，我們把所有 <img/> 標籤的 src 改為 test.jpg。
改變樣式
要更改 HTML 元素的樣式，需要更改元素的樣式屬性。以下是更改樣式的示例語法：
document.getElementById(id).style.property = new style
複製程式碼接下來看一個例子，我們獲取一個元素並將底部邊框改為純黑線：
document.getElementsByTag(“h1”).style.borderBottom = “solid 3px #000”;
複製程式碼CSS 屬性需要用 camelcase 而不是普通的 css 屬性名來編寫。在這個例子中，我們用 borderBottom 而不是 border-bottom。
新增和刪除元素
現在我們來看看如何新增新元素和刪除現有元素。
新增元素
var div = document.createElement(‘div’);
複製程式碼在這裡我們用了 createElement() 方法建立一個 div 元素，該方法將標記名作為引數並將其儲存到變數中。之後只需要給它一些內容，然後將其插入到 DOM 文件中。
var content = document.createTextNode("Hello World!");
div.appendChild(newContent);
document.body.insertBefore(div, currentDiv);
複製程式碼這裡用了 createTextNode() 方法建立內容，該方法用字串作引數，然後在文件中已經存在的 div 之前插入新的 div 元素。
刪除元素
var elem = document.querySelector('#header');
elem.parentNode.removeChild(elem);
複製程式碼本例中我們得到一個元素並使用 removeChild() 方法將其刪除。
替換元素
現在讓我們來看看怎樣替換一個專案。
var div = document.querySelector('#div');
var newDiv = document.createElement(‘div’);
newDiv.innerHTML = "Hello World2"
div.parentNode.replaceChild(newDiv, div);
複製程式碼這裡我們使用 replaceChild()方法替換元素。第一個引數是新元素，第二個引數是要替換的元素。
直接寫入HTML輸出流
還可以使用 write() 方法將 HTML 表示式和 JavaScript 直接寫入 HTML 輸出流。
document.write(“<h1>Hello World!</h1><p>This is a paragraph!</p>”);
複製程式碼我們也可以把像日期物件這樣的引數傳給 JavaScript 表示式。
document.write(Date());
複製程式碼write() 方法還可以使用多個引數，這些引數會按其出現的順序附加到文件中。
事件處理
HTML DOM 允許 Javascript 對 HTML 事件做出反應。下面列出了一些比較重要的事件：
- 滑鼠點選
- 頁面載入
- 滑鼠移動
- 輸入欄位更改
分配事件
可以用標記上的屬性直接在 HTML 程式碼中定義事件。以下是 onclick 事件的例子：
<h1 onclick=”this.innerHTML = ‘Hello!’”>Click me!</h1>
複製程式碼在此例中，單擊按鈕時，<h1/> 的文字將被改為 “Hello！”。
還可以在觸發事件時呼叫函式，如下一個例子所示。
<h1 onclick=”changeText(this)”>Click me!</h1>
複製程式碼這裡我們在單擊按鈕時呼叫 changeText() 方法，並將該元素作為屬性傳遞。
還可以用 Javascript 程式碼為多個元素分配相同的事件。
document.getElementById(“btn”).onclick = changeText();
複製程式碼指定事件監聽器
接下來看看怎樣為 HTML 元素分配事件監聽器。
document.getElementById(“btn”)addEventListener('click', runEvent);
複製程式碼這裡我們剛剛指定了一個 click 事件，在單擊 btn 元素時呼叫 runEvent 方法。
當然還可以把多個事件指定給單個元素：
document.getElementById(“btn”)addEventListener('mouseover', runEvent);
複製程式碼節點關係
DOM Document 中的節點之間具有層次關係。這意味著節點的結構類似於樹。我們用 parent，sibling 和 child 等術語來描述節點之間的關係。
頂級節點稱為根節點，是唯一一個沒有父節點的節點。普通 HTML 文件中的根是 <html/> 標記，因為它沒有父標記，並且是文件的頂部標記。
在節點之間導航
可以用以下屬性在節點之間導航：
- parentNode
- childNodes
- firstChild
- lastChild
- nextSibling
下面是得到 h1 的父元素的例子。
var parent = document.getElementById(“heading”).parentNode
複製程式碼總結
望本文能幫助你理解 Javascript DOM 以及如何用它來操作頁面上的元素。
如果你覺得本文有用，請推薦給你的朋友和他們分享。
如果你有什麼問題或反饋，請在下面的評論中告訴我。
歡迎關注京程一燈公眾號：京程一燈，獲取更多前端乾貨。
