目錄
1.概述
2.操作
2.1.document對(duì)象
2.2.選中元素
2.2.1.get
2.2.2.query
2.3.操作屬性
2.4.添加響應(yīng)
2.5.修改文本
1.概述
在Web開發(fā)中，JavaScript（JS）的DOM（Document Object Model，文檔對(duì)象模型）是一種用來表示網(wǎng)頁文檔結(jié)構(gòu)的編程接口。它將整個(gè)文檔抽象為一個(gè)樹形結(jié)構(gòu)，每個(gè)節(jié)點(diǎn)都是文檔中的一個(gè)元素，開發(fā)者可以使用JavaScript來操作這個(gè)樹形結(jié)構(gòu)，從而改變網(wǎng)頁的內(nèi)容、結(jié)構(gòu)和樣式。
示例：
一個(gè)document包含一個(gè)HTML屬性，HTML屬性中包含兩個(gè)成員變量（head、body），head包含title成員變量，body包含h1、p、p成員變量。通過JavaScript可以操作DOM。
2.操作
2.1.document對(duì)象
JavaScript中內(nèi)置一個(gè)document對(duì)象，該對(duì)象指向整個(gè)DOM，用來表示當(dāng)前 HTML 文檔的對(duì)象。并提供了訪問和操作網(wǎng)頁內(nèi)容的方法和屬性。document對(duì)象是所有 DOM 對(duì)象的根節(jié)點(diǎn)，它代表了整個(gè) HTML 文檔，包括頁面的內(nèi)容、結(jié)構(gòu)和樣式。
示例：
2.2.選中元素
2.2.1.get
document對(duì)象內(nèi)置多個(gè)get方法獲取HTML中的元素
var elementById = document.getElementById('elementId'); // 通過id獲取元素
var elementsByClass = document.getElementsByClassName('className'); // 通過類名獲取元素（返回NodeList）
var elementsByTag = document.getElementsByTagName('tagName'); // 通過標(biāo)簽名獲取元素（返回NodeList）通過標(biāo)簽名選中：
通過類名選中：
2.2.2.query
quary方法，默認(rèn)通過標(biāo)簽進(jìn)行匹配，想通過ID匹配，需要跟上 #
selector，選擇上下文中的首個(gè)。
selectorAll，選擇上下文中的所有。
選擇特定id下的元素：
2.3.操作屬性
在DOM編程中，你可以使用JavaScript來操作HTML元素的屬性。以下是一些常見的DOM屬性操作方法：
1. 獲取屬性的值：
通過DOM，你可以獲取HTML元素的屬性值。例如，獲取一個(gè)元素的ID屬性值：
var element = document.getElementById('myElement');
var id = element.id; // 獲取元素的ID屬性值
2. 設(shè)置屬性的值：
你也可以使用DOM來設(shè)置HTML元素的屬性值。例如，設(shè)置一個(gè)元素的類名屬性值：
var element = document.getElementById('myElement');
element.className = 'newClassName'; // 設(shè)置元素的類名屬性值
3. 獲取和設(shè)置自定義屬性（data-屬性）：
在HTML5中，你可以使用data-*屬性來存儲(chǔ)自定義數(shù)據(jù)。通過DOM，你可以獲取和設(shè)置這些自定義屬性的值：
var element = document.getElementById('myElement');
var customDataValue = element.getAttribute('data-custom'); // 獲取自定義屬性的值
element.setAttribute('data-custom', 'new value'); // 設(shè)置自定義屬性的值
4. 獲取和設(shè)置其他屬性：
除了上述示例中提到的屬性，你也可以獲取和設(shè)置元素的其他屬性，比如src、href、value等等。
var image = document.getElementById('myImage');
var imageUrl = image.src; // 獲取圖片的URL
image.src = 'newImage.jpg'; // 設(shè)置圖片的URL
var link = document.getElementById('myLink');
var linkUrl = link.href; // 獲取鏈接的URL
link.href = 'newPage.html'; // 設(shè)置鏈接的URL
var input = document.getElementById('myInput');
var inputValue = input.value; // 獲取輸入框的值
input.value = 'new value'; // 設(shè)置輸入框的值
5. 刪除屬性：
你可以使用removeAttribute()方法刪除元素的屬性：
var element = document.getElementById('myElement');
element.removeAttribute('data-custom'); // 刪除自定義屬性
2.4.添加響應(yīng)
在DOM編程中，你可以使用JavaScript為HTML元素添加事件監(jiān)聽器，從而響應(yīng)用戶的交互。addEventListener 方法可以用于在指定元素上添加事件監(jiān)聽器。這個(gè)方法有三個(gè)參數(shù)：事件類型、回調(diào)函數(shù)和一個(gè)可選的布爾值，用于指定事件是否在捕獲階段（true）或冒泡階段（false）觸發(fā)。通常，我們使用冒泡階段。
document.querySelector("button").addEventListener("click",function(){
document.querySelector("h1").classList.toggle("H1");
});2.5.修改文本
在DOM編程中，你可以使用JavaScript來修改HTML元素的文本內(nèi)容。以下是一些常見的方法，用于在DOM元素上修改文本內(nèi)容：
1. 使用 textContent 屬性：
textContent 屬性用于獲取或設(shè)置一個(gè)元素及其所有后代元素的文本內(nèi)容。這個(gè)屬性會(huì)返回元素內(nèi)的所有文本，包括子元素的文本，并且它不會(huì)解析或執(zhí)行HTML代碼。
var element = document.getElementById('myElement');
element.textContent = '新的文本內(nèi)容';
2. 使用 innerText 屬性：
innerText 屬性與 textContent 類似，用于獲取或設(shè)置元素的文本內(nèi)容。不同之處在于，innerText 只會(huì)返回可見文本，會(huì)忽略隱藏元素和通過CSS設(shè)置為不可見的元素。
var element = document.getElementById('myElement');
element.innerText = '新的文本內(nèi)容';
3. 使用 innerHTML 屬性：
innerHTML 屬性用于獲取或設(shè)置元素的HTML內(nèi)容，包括元素的標(biāo)簽和子元素。這個(gè)屬性可以用于修改元素的文本和結(jié)構(gòu)，但要注意，直接設(shè)置 innerHTML 可能會(huì)引起安全問題，因?yàn)樗鼤?huì)執(zhí)行包含在字符串中的任意腳本。
var element = document.getElementById('myElement');
element.innerHTML = '<strong>新的文本內(nèi)容</strong>';
4. 使用 createTextNode 和 appendChild 方法：文章來源：http://www.zghlxwxcb.cn/news/detail-736113.html
你可以使用 document.createTextNode(text) 方法創(chuàng)建一個(gè)文本節(jié)點(diǎn)，然后使用 appendChild() 方法將它添加到元素中。這種方法更安全，因?yàn)樗粫?huì)執(zhí)行腳本。文章來源地址http://www.zghlxwxcb.cn/news/detail-736113.html
var element = document.getElementById('myElement');
var newText = document.createTextNode('新的文本內(nèi)容');
element.appendChild(newText);
到了這里，關(guān)于【JavaScript 】DOM操作快速入門的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
