JavaScript DOM從內(nèi)容到節(jié)點的實戰(zhàn)指南
更新時間：2026年02月02日 15:39:22 作者：Han.miracle
DOM（文檔對象模型）是前端開發(fā)中操作頁面結(jié)構(gòu)、內(nèi)容和樣式的核心,本文詳細介紹了JavaScript中DOM操作的核心技巧,涵蓋元素內(nèi)容、屬性、樣式的讀寫修改,以及節(jié)點的增刪改,通過實戰(zhàn)示例,感興趣的朋友跟隨小編一起看看吧
DOM（文檔對象模型）是前端開發(fā)中操作頁面結(jié)構(gòu)、內(nèi)容和樣式的核心，本文聚焦 DOM 中元素內(nèi)容、屬性、樣式的讀寫修改，以及節(jié)點的增刪改，結(jié)合實戰(zhàn)示例講解核心用法與最佳實踐。
一、操作元素內(nèi)容
元素內(nèi)容操作分為純文本處理和帶 HTML 結(jié)構(gòu)的處理，核心使用 innerText 和 innerHTML 兩個屬性，二者特性對比如下：
| 方法 | 識別 HTML 標簽 | 保留換行 / 空格 | 標準性 | 適用場景 |
|---|---|---|---|---|
| innerText | ? | ? | 非標準（IE） | 僅讀取 / 修改純文本 |
| innerHTML | ? | ? | W3C 標準 | 讀取 / 修改帶 HTML 結(jié)構(gòu)的內(nèi)容 |
1. innerText：純文本操作
僅處理文本內(nèi)容，會忽略 HTML 標簽和源碼中的換行 / 空格，適合簡單文本讀寫。
// 讀操作：獲取元素純文本內(nèi)容 var text = element.innerText; // 寫操作：設(shè)置純文本內(nèi)容（標簽會被當(dāng)作普通文本） element.innerText = "新文本內(nèi)容";
2. innerHTML：HTML 結(jié)構(gòu)操作（高頻使用）
可讀寫包含 HTML 標簽的內(nèi)容，保留源碼格式，是動態(tài)渲染頁面的核心方法。
// 讀操作：獲取元素包含 HTML 標簽的完整內(nèi)容 var html = element.innerHTML; // 寫操作：設(shè)置帶 HTML 結(jié)構(gòu)的內(nèi)容（標簽會被解析渲染） element.innerHTML = "<span>新的HTML內(nèi)容</span>";
示例對比
<div>
<span>hello world</span>
<span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
// innerText 僅輸出文本，無標簽、無換行
console.log(div.innerText); // 輸出：hello world hello world
// innerHTML 輸出完整 HTML 結(jié)構(gòu)，保留換行
console.log(div.innerHTML); // 輸出：<span>hello world</span>（含換行）
div.innerText = '<span>hello js</span>'; // 頁面顯示：<span>hello js</span>
div.innerHTML = '<span>hello js</span>'; // 頁面顯示：hello js（解析為 span 標簽）
</script>?? 注意：innerHTML 存在 XSS 安全風(fēng)險（如插入惡意腳本），若需插入用戶輸入內(nèi)容，需先轉(zhuǎn)義（如將 < 替換為 <、> 替換為 >）。
二、操作元素屬性
可直接通過元素對象的屬性讀寫 HTML 標簽屬性，覆蓋圖片、表單等各類元素的核心屬性。
1. 通用元素屬性（如 img/a/div）
以圖片為例，直接讀寫 src、alt、title 等屬性：
<img src="rose.jpg" alt="這是一朵花" title="玫瑰花">
<script>
var img = document.querySelector('img');
// 讀屬性：獲取完整 URL（src 會自動補全絕對路徑）
console.log(img.src); // 輸出：http://xxx/rose.jpg
console.log(img.alt); // 輸出：這是一朵花
// 改屬性：點擊切換圖片
img.onclick = function () {
if (img.src.includes('rose.jpg')) {
img.src = './rose2.png';
} else {
img.src = './rose.jpg';
}
}
</script>2. 表單元素屬性（input/select/textarea）
表單元素有專屬核心屬性，是實現(xiàn)交互的關(guān)鍵，常用屬性如下：
| 屬性 | 作用 | 適用場景 |
|---|---|---|
| value | 表單值（輸入框 / 按鈕文本） | 輸入框內(nèi)容、按鈕文本修改 |
| disabled | 是否禁用（true/false） | 禁用按鈕 / 輸入框 |
| checked | 復(fù)選框 / 單選框是否選中 | 全選 / 反選功能 |
| selected | 下拉選項是否選中 | 下拉框默認選中 |
| type | 輸入框類型（text/button） | 切換輸入框類型 |
示例 1：切換按鈕文本（播放 / 暫停）
<input type="button" value="播放">
<script>
var btn = document.querySelector('input');
btn.onclick = function () {
// 三元表達式快速切換文本
btn.value = btn.value === '播放' ? '暫停' : '播放';
}
</script>
示例 2：點擊計數(shù)（輸入框值 + 1）
<input type="text" id="text" value="0">
<input type="button" id="btn" value='點我+1'>
<script>
var text = document.querySelector('#text');
var btn = document.querySelector('#btn');
btn.onclick = function () {
// 注意：value 是字符串，需轉(zhuǎn)為數(shù)字再計算
var num = Number(text.value);
text.value = num + 1;
}
</script>
示例 3：復(fù)選框全選 / 反選（實戰(zhàn)）
<input type="checkbox" id="all">我全都要
<input type="checkbox" class="girl">貂蟬
<input type="checkbox" class="girl">小喬
<input type="checkbox" class="girl">安琪拉
<input type="checkbox" class="girl">妲己
<script>
var all = document.querySelector('#all');
var girls = document.querySelectorAll('.girl');
// 全選/取消全選：同步所有子復(fù)選框狀態(tài)
all.onclick = function () {
girls.forEach(girl => girl.checked = all.checked);
}
// 單個選項取消：同步取消全選框
girls.forEach(girl => {
girl.onclick = function () {
// 檢測所有子復(fù)選框是否都選中（轉(zhuǎn)為數(shù)組使用 every 方法）
all.checked = [...girls].every(girl => girl.checked);
}
});
</script>三、操作元素樣式
樣式操作分為 “行內(nèi)樣式”（優(yōu)先級高）和 “類名樣式”（批量修改），按需選擇使用。
1. 行內(nèi)樣式（style）
直接修改元素的 style 屬性，CSS 屬性名需轉(zhuǎn)為駝峰命名（如 background-color → backgroundColor），適合少量樣式修改。
// 單個樣式修改 element.style.樣式名 = 樣式值; // 多個樣式批量修改（用 cssText） element.style.cssText = "樣式名1:值1; 樣式名2:值2;";
示例：點擊放大字體
<div style="font-size: 20px; font-weight: 700;">哈哈</div>
<script>
var div = document.querySelector('div');
div.onclick = function () {
// 解析當(dāng)前字體大?。ㄈサ?px 轉(zhuǎn)為數(shù)字）
var curSize = parseInt(this.style.fontSize);
this.style.fontSize = (curSize + 10) + "px"; // 放大 10px
this.style.color = "red"; // 同時修改字體顏色為紅色
}
</script>
2. 類名樣式（className/classList）
適合批量修改樣式，通過切換 CSS 類名實現(xiàn)，推薦使用 classList（更靈活，不覆蓋原有類名）。
| 方法 | 作用 | 示例 |
|---|---|---|
| className | 覆蓋原有所有類名 | elem.className = "box dark" |
| classList.add() | 添加類名（不覆蓋原有） | elem.classList.add("dark") |
| classList.remove() | 刪除指定類名 | elem.classList.remove("light") |
| classList.toggle() | 切換類名（有則刪，無則加） | elem.classList.toggle("dark") |
示例：夜間模式切換（實戰(zhàn)）
<style>
.container { width: 100%; height: 300px; padding: 20px; }
.light { background: #f3f3f3; color: #333; }
.dark { background: #333; color: #f3f3f3; }
</style>
<div class="container light">這是一大段測試文本</div>
<script>
var div = document.querySelector('.container');
div.onclick = function () {
// 一行切換夜間/日間模式（toggle 自動判斷）
this.classList.toggle("dark");
this.classList.toggle("light");
}
</script>四、操作節(jié)點：增刪改 DOM 樹
DOM 樹的節(jié)點操作是動態(tài)修改頁面結(jié)構(gòu)的核心，包括 “新增節(jié)點” 和 “刪除節(jié)點” 兩類。
1. 新增節(jié)點（兩步法）
步驟 1：創(chuàng)建節(jié)點
核心使用 createElement 創(chuàng)建元素節(jié)點，可按需設(shè)置節(jié)點屬性 / 內(nèi)容。
// 創(chuàng)建元素節(jié)點（核心）
var newElem = document.createElement('標簽名');
// 可選：設(shè)置節(jié)點屬性/內(nèi)容
newElem.id = "newId";
newElem.className = "newClass";
newElem.innerHTML = "新節(jié)點內(nèi)容";
?? 擴展：還可創(chuàng)建文本節(jié)點（document.createTextNode("文本")）、注釋節(jié)點（document.createComment("注釋")），但實際開發(fā)以 createElement 為主。
步驟 2：插入節(jié)點
創(chuàng)建的節(jié)點需插入到 DOM 樹中才會顯示，常用兩種插入方式：
| 方法 | 作用 | 語法 |
|---|---|---|
| appendChild() | 插入到父節(jié)點最后一個子節(jié)點后 | 父節(jié)點.appendChild(新節(jié)點) |
| insertBefore() | 插入到指定子節(jié)點之前 | 父節(jié)點.insertBefore(新節(jié)點, 參考節(jié)點) |
示例 1：appendChild 插入到末尾
<div class="container"></div>
<script>
// 1. 創(chuàng)建節(jié)點
var newDiv = document.createElement('div');
newDiv.innerHTML = "我是新節(jié)點";
// 2. 插入到 container 末尾
var container = document.querySelector('.container');
container.appendChild(newDiv);
</script>
示例 2：insertBefore 插入到指定位置
<div class="container">
<div>11</div>
<div>22</div>
</div>
<script>
var newDiv = document.createElement('div');
newDiv.innerHTML = "插入到22之前";
var container = document.querySelector('.container');
// 插入到第二個子節(jié)點（22）之前
container.insertBefore(newDiv, container.children[1]);
</script>
?? 擴展：
- 若
insertBefore的參考節(jié)點為null，則等價于appendChild； - 同一節(jié)點插入多次，僅最后一次生效（節(jié)點被 “移動” 而非復(fù)制）。
2. 刪除節(jié)點
傳統(tǒng)方式：通過父節(jié)點刪除
// 父節(jié)點刪除子節(jié)點，返回被刪除的節(jié)點 var deletedNode = 父節(jié)點.removeChild(待刪除節(jié)點);
?? 注意：待刪除節(jié)點必須是父節(jié)點的直接子節(jié)點，否則會報錯。
簡化方式（ES6+）：節(jié)點自行刪除
無需找父節(jié)點，直接調(diào)用 remove() 即可，更簡潔。
待刪除節(jié)點.remove();
示例：刪除指定節(jié)點
<div class="container">
<div id="delMe">要刪除的節(jié)點</div>
<div>保留的節(jié)點</div>
</div>
<script>
var delElem = document.querySelector('#delMe');
// 方式1：通過父節(jié)點刪除
delElem.parentElement.removeChild(delElem);
// 方式2：自行刪除（推薦）
// delElem.remove();
</script>
?? 擴展：刪除的節(jié)點仍在內(nèi)存中，可重新插入到 DOM 樹其他位置；若無需復(fù)用，可賦值 null 釋放內(nèi)存（delElem = null）。
到此這篇關(guān)于JavaScript DOM 核心操作：從內(nèi)容到節(jié)點的實戰(zhàn)指南的文章就介紹到這了,更多相關(guān)js dom節(jié)點操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- JavaScript DOM節(jié)點操作方式全面講解
- JavaScript HTML DOM 元素 (節(jié)點)新增，編輯，刪除操作實例分析
- JavaScript HTML DOM元素 節(jié)點操作匯總
- JS實現(xiàn)DOM節(jié)點插入操作之子節(jié)點與兄弟節(jié)點插入操作示例
- JS常見DOM節(jié)點操作示例【創(chuàng)建 ，插入，刪除，復(fù)制，查找】
- JS實現(xiàn)DOM刪除節(jié)點操作示例
- JS實現(xiàn)的DOM插入節(jié)點操作示例
- JavaScript DOM節(jié)點操作方法總結(jié)
- js和jquery對dom節(jié)點的操作(創(chuàng)建/追加)
相關(guān)文章
用JavaScript實現(xiàn)PHP的urlencode與urldecode函數(shù)
這篇文章主要介紹了用JavaScript實現(xiàn)PHP的urlencode與urldecode函數(shù),很多情況下我們用了出來php urlencode出來的網(wǎng)址，需要的朋友可以參考下2015-08-08
這篇文章主要介紹了小程序開發(fā)基礎(chǔ)之view視圖容器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
JS實現(xiàn)的文字間歇循環(huán)滾動效果完整示例
這篇文章主要介紹了JS實現(xiàn)的文字間歇循環(huán)滾動效果,涉及javascript結(jié)合時間函數(shù)定時觸發(fā)實現(xiàn)頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2018-02-02
BootstrapVue選項卡標題增加關(guān)閉按鈕的方法
這篇文章主要為大家詳細介紹了BootstrapVue選項卡標題增加關(guān)閉按鈕的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
編程語言中，函數(shù)Func(Type a,……)直接或間接調(diào)用函數(shù)本身，則該函數(shù)稱為遞歸函數(shù)。遞歸函數(shù)不能定義為內(nèi)聯(lián)函數(shù)。這篇文章主要介紹了JS中遞歸函數(shù)的相關(guān)資料,需要的朋友可以參考下2016-06-06
記錄滾動條位置（使用userdate）...2007-01-01
這篇文章主要幫助大家深入理解js瀑布流布局，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
父元素與子iframe相互獲取變量和元素對象的具體實現(xiàn)
父元素與子iframe相互獲取變量和元素對象的方法有很多,本文提供了一些不錯的示例另收集網(wǎng)上的一些，可以參考下2013-10-10
highlight.js是一款輕量級的Web代碼語法高亮庫。下面通過實例代碼給大家分享JS庫之Highlight.js的用法詳解，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2017-09-09
JavaScript?Canvas實現(xiàn)圖片局部放大鏡效果
這篇文章主要為大家詳細介紹了如何使用JavaScript?Canvas實現(xiàn)圖片局部放大鏡效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03