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

創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡營銷推廣、網(wǎng)站重做改版、新區(qū)網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5響應式網(wǎng)站、商城網(wǎng)站定制開發(fā)、集團公司官網(wǎng)建設、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為新區(qū)等各大城市提供網(wǎng)站開發(fā)制作服務。

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

什么是 DOM？

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

• HTML 元素作為對象
• HTML 元素的屬性和事件
• 訪問HTML元素的方法

HTML DOM模型

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

DOM 文檔

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

查找 HTML 元素

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

按 ID 獲取元素

getElementById()方法用于通過其 id 獲取單個元素。我們來看一個例子：

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

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

按類名獲取元素

還可以用getElementsByClassName()方法獲取多個對象，該方法返回一個元素數(shù)組。

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

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

按標簽名稱獲取元素

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

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(‘h2’);

獲取更具體的元素：

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

document.querySelector(“h2.heading”);

在這個例子中，我們同時搜索標記和類，并返回傳遞給 CSS Selector 的第一個元素。

Queryselectorall

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

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

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

更改 HTML 元素

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

更改HTML

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

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

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

InnerHTML 還可以把標簽放入另一個標簽中。

document.getElementsByTagName("div").innerHTML = "<h2>Hello World!</h2>"

在這里將 h2 標記放入所有已存在的 div 中。

更改屬性的值

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

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

在這個例子中，我們把所有<img/>標簽的src改為test.jpg。

改變樣式

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

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

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

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

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

添加和刪除元素

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

添加元素

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

在這里我們用了createElement()方法創(chuàng)建一個 div 元素，該方法將標記名作為參數(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);

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

替換元素

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

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

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

直接寫入HTML輸出流

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

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

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

document.write(Date());

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

事件處理

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

• 鼠標點擊
• 頁面加載
• 鼠標移動
• 輸入字段更改

分配事件

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

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

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

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

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

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

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

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

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

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

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

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

當然還可以把多個事件指定給單個元素：

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

節(jié)點關系

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

頂級節(jié)點稱為根節(jié)點，是唯一一個沒有父節(jié)點的節(jié)點。普通 HTML 文檔中的根是<html/>標記，因為它沒有父標記，并且是文檔的頂部標記。

在節(jié)點之間導航

可以用以下屬性在節(jié)點之間導航：

• parentNode
• childNodes
• firstChild
• lastChild
• nextSibling

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

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

總結(jié)

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

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

新聞名稱：JavaScriptDOM是什么？有什么作用-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://vcdvsql.cn/article42/ccciec.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設、品牌網(wǎng)站設計、云服務器、定制網(wǎng)站、商城網(wǎng)站、移動網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)