JavaScript DOM是什么？有什么作用

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

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

什么是 DOM？

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

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

HTML DOM模型

元素的位置稱(chēng)為節(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ì)象，必須從這里開(kāi)始。它還包含許多重要的屬性和方法，使我們能夠訪問(wèn)和修改自己的頁(yè)面。

查找 HTML 元素

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

按 ID 獲取元素

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

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

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

按類(lèi)名獲取元素

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

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

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

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

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

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

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

Queryselector

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

按 id 獲?。?/strong>

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

按 class 獲?。?/strong>

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

按標(biāo)簽獲?。?/strong>

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

獲取更具體的元素：

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

document.querySelector(“h2.heading”);

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

Queryselectorall

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

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

在這個(gè)例子中，我們得到所有屬于 heading 類(lèi)的 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 = "<h2>Hello World!</h2>"

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

更改屬性的值

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

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

在這個(gè)例子中，我們把所有 <img/> 標(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)編寫(xiě)。在這個(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ù)是要替換的元素。

直接寫(xiě)入HTML輸出流

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

document.write(“<h2>Hello World!</h2><p>This is a paragraph!</p>”);

我們也可以把像日期對(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 事件的例子：

<h2 onclick=”this.innerHTML = ‘Hello!’”>Click me!</h2>

在此例中，單擊按鈕時(shí)，<h2/> 的文本將被改為 “Hello！”。

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

<h2 onclick=”changeText(this)”>Click me!</h2>

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

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

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

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

接下來(lái)看看怎樣為 HTML 元素分配事件監(jiān)聽(tīng)器。

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)類(lèi)似于樹(shù)。我們用 parent，sibling 和 child 等術(shù)語(yǔ)來(lái)描述節(jié)點(diǎn)之間的關(guān)系。

頂級(jí)節(jié)點(diǎn)稱(chēng)為根節(jié)點(diǎn)，是唯一一個(gè)沒(méi)有父節(jié)點(diǎn)的節(jié)點(diǎn)。普通 HTML 文檔中的根是 <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)注億速云行業(yè)資訊頻道哦！