JS中DOM的API使用示例詳解
在JavaScript中，DOM（文檔對(duì)象模型）API是操作HTML/XML文檔結(jié)構(gòu)、內(nèi)容和樣式的核心接口。通過DOM API，我們可以動(dòng)態(tài)創(chuàng)建、修改、刪除元素，處理事件，以及改變文檔的布局和樣式。以下是DOM API的常用分類及示例：
一、獲取DOM元素（選擇器API）
獲取元素是操作DOM的第一步，常用方法如下：
| 方法 | 說明 | 示例 |
|---|---|---|
document.getElementById(id) | 通過ID獲取唯一元素（效率最高） | const box = document.getElementById('app'); |
document.getElementsByClassName(className) | 通過類名獲取元素集合（動(dòng)態(tài)更新） | const items = document.getElementsByClassName('item'); |
document.getElementsByTagName(tagName) | 通過標(biāo)簽名獲取元素集合（動(dòng)態(tài)更新） | const lis = document.getElementsByTagName('li'); |
document.querySelector(selector) | 通過CSS選擇器獲取第一個(gè)匹配元素 | const firstItem = document.querySelector('.list .item'); |
document.querySelectorAll(selector) | 通過CSS選擇器獲取所有匹配元素（靜態(tài)集合） | const allItems = document.querySelectorAll('ul > li'); |
二、操作元素內(nèi)容
通過API可以修改元素的文本或HTML內(nèi)容：
textContent：獲取/設(shè)置元素的純文本內(nèi)容（忽略HTML標(biāo)簽，安全防XSS）
const div = document.querySelector('#content');
div.textContent = 'Hello <strong>DOM</strong>'; // 顯示：Hello <strong>DOM</strong>innerHTML：獲取/設(shè)置元素的HTML內(nèi)容（會(huì)解析HTML標(biāo)簽，有XSS風(fēng)險(xiǎn)）
div.innerHTML = 'Hello <strong>DOM</strong>'; // 顯示：Hello DOM（strong標(biāo)簽生效）
value：獲取/設(shè)置表單元素（input、textarea等）的值
const input = document.querySelector('input');
input.value = '默認(rèn)值'; // 設(shè)置輸入框內(nèi)容
console.log(input.value); // 獲取用戶輸入三、操作元素屬性
修改元素的HTML屬性（如src、href、class等）：
直接操作屬性：
const img = document.querySelector('img');
img.src = 'new-image.jpg'; // 修改圖片路徑
img.alt = '新圖片'; // 設(shè)置alt屬性setAttribute(name, value)：設(shè)置任意屬性（包括自定義屬性）
const link = document.querySelector('a');
link.setAttribute('target', '_blank'); // 設(shè)置a標(biāo)簽跳轉(zhuǎn)方式
link.setAttribute('data-id', '123'); // 設(shè)置自定義屬性data-id
getAttribute(name)：獲取屬性值
console.log(link.getAttribute('href')); // 獲取鏈接地址
console.log(link.getAttribute('data-id')); // 獲取自定義屬性
removeAttribute(name)：移除屬性
img.removeAttribute('title'); // 移除title屬性四、操作元素樣式
動(dòng)態(tài)修改元素的CSS樣式：
style屬性：直接修改行內(nèi)樣式（駝峰命名，如fontSize對(duì)應(yīng)font-size）
const box = document.querySelector('.box');
box.style.width = '200px';
box.style.backgroundColor = 'blue'; // 對(duì)應(yīng)CSS的background-color
box.style.fontSize = '16px';
classList：操作元素的類名（推薦，避免覆蓋原有樣式）
const btn = document.querySelector('button');
btn.classList.add('active'); // 添加active類
btn.classList.remove('disabled'); // 移除disabled類
btn.classList.toggle('highlight'); // 切換highlight類
console.log(btn.classList.contains('active')); // 輸出：trueadd(class)：添加類remove(class)：移除類toggle(class)：切換類（存在則移除，不存在則添加）contains(class)：判斷是否包含類
五、DOM結(jié)構(gòu)操作（增刪改節(jié)點(diǎn)）
動(dòng)態(tài)創(chuàng)建、添加、刪除元素：
創(chuàng)建元素：document.createElement(tagName)
const newLi = document.createElement('li'); // 創(chuàng)建li元素
newLi.textContent = '新列表項(xiàng)';
newLi.className = 'item'; // 添加類名添加元素：
const list = document.querySelector('ul');
list.appendChild(newLi); // 在ul末尾添加li
const firstItem = list.querySelector('li:first-child');
list.insertBefore(newLi, firstItem); // 在第一個(gè)li前插入新liparent.appendChild(child)：在父元素末尾添加子元素parent.insertBefore(newChild, referenceChild)：在參考元素前插入新元素
替換元素：parent.replaceChild(newChild, oldChild)
const oldLi = list.querySelector('li:nth-child(2)');
list.replaceChild(newLi, oldLi); // 用新li替換第二個(gè)li- 刪除元素：
parent.removeChild(child)或child.remove()（更簡(jiǎn)潔）
const toRemove = list.querySelector('li:last-child');
toRemove.remove(); // 直接刪除元素（無需父元素）六、事件處理（交互核心）
通過DOM API綁定事件，處理用戶交互（如點(diǎn)擊、輸入、滾動(dòng)等）：
addEventListener(event, handler)：綁定事件（推薦，可綁定多個(gè)同類型事件）
const btn = document.querySelector('button');
btn.addEventListener('click', function() {
console.log('按鈕被點(diǎn)擊了');
});
// 箭頭函數(shù)寫法
btn.addEventListener('mouseenter', () => {
btn.style.color = 'red';
});removeEventListener(event, handler)：移除事件監(jiān)聽（需引用原函數(shù)）
function handleClick() {
console.log('點(diǎn)擊事件');
}
btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick); // 移除監(jiān)聽- 常用事件類型：
- 鼠標(biāo)：
click（點(diǎn)擊）、mouseover（鼠標(biāo)移入）、mouseout（鼠標(biāo)移出） - 鍵盤：
keydown（按鍵按下）、keyup（按鍵松開） - 表單：
input（輸入變化）、submit（表單提交） - 窗口：
load（頁面加載完成）、resize（窗口大小變化）
- 鼠標(biāo)：
七、節(jié)點(diǎn)關(guān)系與遍歷
DOM樹中節(jié)點(diǎn)（元素、文本、注釋等）的關(guān)系操作：
parentNode：獲取父節(jié)點(diǎn)childNodes：獲取所有子節(jié)點(diǎn)（包括文本、注釋，返回NodeList）children：獲取所有子元素節(jié)點(diǎn)（只含元素，返回HTMLCollection）firstChild/lastChild：第一個(gè)/最后一個(gè)子節(jié)點(diǎn)previousSibling/nextSibling：前一個(gè)/后一個(gè)兄弟節(jié)點(diǎn)previousElementSibling/nextElementSibling：前一個(gè)/后一個(gè)兄弟元素
示例：
const list = document.querySelector('ul');
console.log(list.children); // 所有l(wèi)i子元素
console.log(list.firstElementChild); // 第一個(gè)li
console.log(list.lastElementChild); // 最后一個(gè)li
const firstLi = list.firstElementChild;
console.log(firstLi.nextElementSibling); // 第二個(gè)li總結(jié)
DOM API是前端交互的核心，常用操作可歸納為：
- 選擇元素（
querySelector系列最常用） - 操作內(nèi)容（
textContent、innerHTML） - 修改樣式（
style、classList） - 調(diào)整結(jié)構(gòu)（
createElement、appendChild、remove） - 處理事件（
addEventListener）
實(shí)際開發(fā)中，結(jié)合這些API可以實(shí)現(xiàn)動(dòng)態(tài)頁面效果（如表單驗(yàn)證、列表增刪、交互反饋等）。
到此這篇關(guān)于JS中DOM的API使用的文章就介紹到這了,更多相關(guān)js dom api使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
layer.close()關(guān)閉進(jìn)度條和Iframe窗的方法
今天小編就為大家分享一篇layer.close()關(guān)閉進(jìn)度條和Iframe窗的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
combox改進(jìn)版 頁面原型參考dojo的，比網(wǎng)上jQuery的那些combox功能強(qiáng)，代碼更小
對(duì)于combox功能實(shí)現(xiàn)的最小化js代碼，頁面原型參考dojo的combox模樣，支持鍵盤動(dòng)作以及自動(dòng)篩選,高亮等2010-04-04
For循環(huán)中分號(hào)隔開的3部分的執(zhí)行順序探討
這篇文章主要探討了For循環(huán)中分號(hào)隔開的3部分的執(zhí)行順序,需要的朋友可以參考下2014-05-05
echarts幾個(gè)公司內(nèi)部數(shù)據(jù)可視化圖表必收藏
最近公司有一個(gè)需求，要做一個(gè)數(shù)據(jù)可視化的頁面，所有的圖表都在下面，做這些都是本人自己寫的，全部都是真是的項(xiàng)目中的代碼，包含有柱狀圖、折線圖、水球圖以及散點(diǎn)圖，這里直接打出來給大家練手，希望大家多多支持，如果這篇文章對(duì)您有用的話必須收藏2022-08-08
這篇文章主要給大家介紹了關(guān)于Require.JS中幾種define定義方式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
轉(zhuǎn)換json格式的日期為Javascript對(duì)象的函數(shù)
項(xiàng)目中碰到了用jQuery從后臺(tái)獲取的json格式的日期的字符串，需要將此字符串轉(zhuǎn)換成JavaScript的日期對(duì)象，記在此處，以備后用。2010-07-07
談到JS的類型判斷大家應(yīng)該都不陌生,下面這篇文章主要給大家介紹了關(guān)于JS數(shù)據(jù)類型判斷的9種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
dotopAlert 提示用戶需安裝播放器的代碼，多用于電影站推廣某些播放器2012-09-09
JavaScript 讀URL參數(shù)增強(qiáng)改進(jìn)版版
網(wǎng)上有不少JavaScript 讀 URL 參數(shù)的函數(shù)，但沒考慮到 URL 中帶 # 符的情況，我的可以處理這種情況，并使用了點(diǎn)對(duì)象寫法，優(yōu)化了些性能。2008-10-10
這篇文章主要介紹了淺談Javascript數(shù)組的使用的相關(guān)資料,包括數(shù)組的大小，數(shù)組的遍歷以及數(shù)組的一些方法，非常細(xì)致，需要的朋友可以參考下2015-07-07