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