回到基礎：理解 JavaScript DOM

翻譯：瘋狂的技術宅

原文：medium.freecodecamp.org/an-introduc…

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 以及如何用它來操做頁面上的元素。

若是你以爲本文有用，請推薦給你的朋友和他們分享。

若是你有什麼問題或反饋，請在下面的評論中告訴我。

歡迎關注京程一燈公衆號：京程一燈，獲取更多前端乾貨。