var headings = document.querySelector(‘h1’);

獲取更具體的元素：

我們還可以使用 CSS Selectors 獲得更多的特定元素。

document.querySelector(“h1.heading”);

在這個(gè)例子中，我們同時(shí)搜索標(biāo)記和類，并返回傳遞給 CSS Selector 的第一個(gè)元素。

querySelectorAll() 方法與 querySelector() 完全相同，只是它返回符合 CSS Selector 的所有元素。

var heading = document.querySelectorAll(‘h1.heading’);

在這個(gè)例子中，我們得到所有屬于 heading 類的 h1 標(biāo)簽，并將它們存儲在一個(gè)數(shù)組中。

本文首發(fā)微信公眾號：jingchengyideng
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

HTML DOM 允許我們通過更改其屬性來對 HTML 元素的內(nèi)容和樣式進(jìn)行修改。

innerHTML 屬性可用于修改 HTML 元素的內(nèi)容。

document.getElementById(“#header”).innerHTML = “Hello World!”;

在這個(gè)例子中，我們得到 id 為 header 的元素，并把其內(nèi)容設(shè)置為“Hello World！”。

InnerHTML 還可以把標(biāo)簽放入另一個(gè)標(biāo)簽中。

document.getElementsByTagName("div").innerHTML = "
Hello World!
"

在這里將 h1 標(biāo)記放入所有已存在的 div 中。

還可以用 DOM 更改屬性的值。

document.getElementsByTag(“img”).src = “test.jpg”;

在這個(gè)例子中，我們把所有 標(biāo)簽的 src 改為 test.jpg。

要更改 HTML 元素的樣式，需要更改元素的樣式屬性。以下是更改樣式的示例語法：

document.getElementById(id).style.property = new style

接下來看一個(gè)例子，我們獲取一個(gè)元素并將底部邊框改為純黑線：

document.getElementsByTag(“h1”).style.borderBottom = “solid 3px #000”;

CSS 屬性需要用 camelcase 而不是普通的 css 屬性名來編寫。在這個(gè)例子中，我們用 borderBottom 而不是 border-bottom。

現(xiàn)在我們來看看如何添加新元素和刪除現(xiàn)有元素。

var div = document.createElement(‘div’);

在這里我們用了 createElement() 方法創(chuàng)建一個(gè) div 元素，該方法將標(biāo)記名作為參數(shù)并將其保存到變量中。之后只需要給它一些內(nèi)容，然后將其插入到 DOM 文檔中。

var content = document.createTextNode("Hello World!"); 
div.appendChild(newContent);
document.body.insertBefore(div, currentDiv);

這里用了 createTextNode() 方法創(chuàng)建內(nèi)容，該方法用字符串作參數(shù)，然后在文檔中已經(jīng)存在的 div 之前插入新的 div 元素。

var elem = document.querySelector("#header");
elem.parentNode.removeChild(elem);

本例中我們得到一個(gè)元素并使用 removeChild() 方法將其刪除。

現(xiàn)在讓我們來看看怎樣替換一個(gè)項(xiàng)目。

var div = document.querySelector("#div");
var newDiv = document.createElement(‘div’);
newDiv.innerHTML = "Hello World2"
div.parentNode.replaceChild(newDiv, div);

這里我們使用 replaceChild() 方法替換元素。第一個(gè)參數(shù)是新元素，第二個(gè)參數(shù)是要替換的元素。

還可以使用 write() 方法將 HTML 表達(dá)式和 JavaScript 直接寫入 HTML 輸出流。

document.write(“
Hello World!
This is a paragraph!
”);

我們也可以把像日期對象這樣的參數(shù)傳給 JavaScript 表達(dá)式。

document.write(Date());

write() 方法還可以使用多個(gè)參數(shù)，這些參數(shù)會按其出現(xiàn)的順序附加到文檔中。

HTML DOM 允許 Javascript 對 HTML 事件做出反應(yīng)。下面列出了一些比較重要的事件：

鼠標(biāo)點(diǎn)擊

頁面加載

鼠標(biāo)移動(dòng)

輸入字段更改

可以用標(biāo)記上的屬性直接在 HTML 代碼中定義事件。以下是 onclick 事件的例子：

Click me!

在此例中，單擊按鈕時(shí)，

的文本將被改為 “Hello！”。

還可以在觸發(fā)事件時(shí)調(diào)用函數(shù)，如下一個(gè)例子所示。

Click me!

這里我們在單擊按鈕時(shí)調(diào)用 changeText() 方法，并將該元素作為屬性傳遞。

還可以用 Javascript 代碼為多個(gè)元素分配相同的事件。

document.getElementById(“btn”).onclick = changeText();

指定事件監(jiān)聽器

接下來看看怎樣為 HTML 元素分配事件監(jiān)聽器。

document.getElementById(“btn”)addEventListener("click", runEvent);

這里我們剛剛指定了一個(gè) click 事件，在單擊 btn 元素時(shí)調(diào)用 runEvent 方法。

當(dāng)然還可以把多個(gè)事件指定給單個(gè)元素：

document.getElementById(“btn”)addEventListener("mouseover", runEvent);

節(jié)點(diǎn)關(guān)系

DOM Document 中的節(jié)點(diǎn)之間具有層次關(guān)系。這意味著節(jié)點(diǎn)的結(jié)構(gòu)類似于樹。我們用 parent，sibling 和 child 等術(shù)語來描述節(jié)點(diǎn)之間的關(guān)系。

頂級節(jié)點(diǎn)稱為根節(jié)點(diǎn)，是唯一一個(gè)沒有父節(jié)點(diǎn)的節(jié)點(diǎn)。普通 HTML 文檔中的根是 標(biāo)記，因?yàn)樗鼪]有父標(biāo)記，并且是文檔的頂部標(biāo)記。

在節(jié)點(diǎn)之間導(dǎo)航

可以用以下屬性在節(jié)點(diǎn)之間導(dǎo)航：

parentNode

childNodes

firstChild

lastChild

nextSibling

下面是得到 h1 的父元素的例子。

var parent = document.getElementById(“heading”).parentNode

總結(jié)

望本文能幫助你理解 Javascript DOM 以及如何用它來操作頁面上的元素。

如果你覺得本文有用，請推薦給你的朋友和他們分享。如果你有什么問題或反饋，請?jiān)谙旅娴脑u論中告訴我。

本文首發(fā)微信公眾號：jingchengyideng 歡迎掃描二維碼關(guān)注公眾號，每天都給你推送新鮮的前端技術(shù)文章

歡迎繼續(xù)閱讀本專欄其它高贊文章：

12個(gè)令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

世界頂級公司的前端面試都問些什么

CSS Flexbox 可視化手冊

過節(jié)很無聊？還是用 JavaScript 寫一個(gè)腦力小游戲吧！

從設(shè)計(jì)者的角度看 React

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實(shí)現(xiàn)動(dòng)畫效果

程序員30歲前月薪達(dá)不到30K，該何去何從

7個(gè)開放式的前端面試題

React 教程：快速上手指南