本文在介紹關(guān)于JavaScript DOM是什么？有什么作用，重點(diǎn)探討了其具體步驟，本文內(nèi)容緊湊，希望大家可以有所收獲。

公司主營(yíng)業(yè)務(wù)：成都做網(wǎng)站、網(wǎng)站制作、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)公司推出義安免費(fèi)做網(wǎng)站回饋大家。

Javascript DOM（文檔對(duì)象模型）是一個(gè)允許開發(fā)人員操縱頁(yè)面內(nèi)容、結(jié)構(gòu)和風(fēng)格的接口。在本文中，我們將理解什么是 DOM 以及如何用 Javascript 去操作它。本文還可以作為基本 DOM 操作的參考。

什么是 DOM？

基本上網(wǎng)頁(yè)由 HTML 和 CSS 文檔組成。瀏覽器用于創(chuàng)建文檔的描述被稱為文檔對(duì)象模型（DOM）。它使 Javascript 能夠訪問(wèn)和操作頁(yè)面的元素和樣式。該模型構(gòu)建在基于對(duì)象的樹結(jié)構(gòu)中，并定義：

• HTML 元素作為對(duì)象
• HTML 元素的屬性和事件
• 訪問(wèn)HTML元素的方法

HTML DOM模型

元素的位置稱為節(jié)點(diǎn)。不僅元素獲得節(jié)點(diǎn)，而且元素和文本的屬性也有屬于它們自己的節(jié)點(diǎn)（屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)）。

DOM 文檔

DOM 文檔是網(wǎng)頁(yè)中所有其他對(duì)象的所有者。這意味著如果你想訪問(wèn)網(wǎng)頁(yè)上的任何對(duì)象，必須從這里開始。它還包含許多重要的屬性和方法，使我們能夠訪問(wèn)和修改自己的頁(yè)面。

查找 HTML 元素

現(xiàn)在我們了解了 DOM 文檔是什么，接下來(lái)就可以開始獲取我們的第一個(gè) HTML 元素了。 Javascript DOM 有許多不同的方法可以用，不過(guò)這些最常見：

按 ID 獲取元素

getElementById() 方法用于通過(guò)其 id 獲取單個(gè)元素。我們來(lái)看一個(gè)例子：

var title = document.getElementById(‘header-title’);

我們得到 id 為 header-title 的元素，并將其保存到變量中。

按類名獲取元素

還可以用 getElementsByClassName() 方法獲取多個(gè)對(duì)象，該方法返回一個(gè)元素?cái)?shù)組。

var items = document.getElementsByClassName(‘list-items’);

這里我們得到類 list-items 的所有項(xiàng)目，并將它們保存到變量中。

按標(biāo)簽名稱獲取元素

還可以用 getElementsByTagName() 方法按標(biāo)記名稱獲取元素。

var listItems = document.getElementsByTagName(‘li’);

這里我們獲取 HTML 文檔中所有得 li 元素并將它們保存到變量中。

Queryselector

querySelector() 方法返回與指定的 CSS選擇器匹配的第一個(gè)元素。這意味著你可以通過(guò)id、class、tag和所有其他有效的 CSS 選擇器獲取元素。在這里我列出了一些最常用的選項(xiàng)。

按 id 獲取：

var header = document.querySelector(‘#header’)

按 class 獲取：

var items = document.querySelector(‘.list-items’)

按標(biāo)簽獲取：

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

獲取更具體的元素：

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

document.querySelector(“h2.heading”);

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

Queryselectorall

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

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

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

更改 HTML 元素

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

更改HTML

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!
"

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

更改屬性的值

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

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

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

改變樣式

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

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

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

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

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

添加和刪除元素

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

添加元素

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

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

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

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

刪除元素

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

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

替換元素

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

var p = document.querySelector('#p');
var newp = document.createElement(‘p’);
newp.innerHTML = "Hello World2"
p.parentNode.replaceChild(newp, p);

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

直接寫入HTML輸出流

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

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

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

document.write(Date());

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

事件處理

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

• 鼠標(biāo)點(diǎn)擊
• 頁(yè)面加載
• 鼠標(biāo)移動(dòng)
• 輸入字段更改

分配事件

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

Click me!

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

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

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

Click me!

這里我們?cè)趩螕舭粹o時(shí)調(diào)用 changeText() 方法，并將該元素作為屬性傳遞。

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

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

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

接下來(lái)看看怎樣為 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ù)語(yǔ)來(lái)描述節(jié)點(diǎn)之間的關(guān)系。

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

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

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

• parentNode
• childNodes
• firstChild
• lastChild
• nextSibling

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

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

總結(jié)

望本文能幫助你理解 Javascript DOM 以及如何用它來(lái)操作頁(yè)面上的元素。

以上就是JavaScript DOM是什么及其作用的分享，當(dāng)然詳細(xì)使用上面的不同還得要大家自己使用過(guò)才領(lǐng)會(huì)。如果想了解更多，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道哦！