JavaScript動(dòng)態(tài)獲取和修改DOM元素內(nèi)容的完整指南

更新時(shí)間：2025年06月23日 09:06:02 作者：AllenBright

在現(xiàn)代Web開發(fā)中,動(dòng)態(tài)獲取和修改DOM元素內(nèi)容是構(gòu)建交互式用戶界面的核心技能,無論是更新實(shí)時(shí)數(shù)據(jù)、創(chuàng)建動(dòng)態(tài)內(nèi)容還是響應(yīng)用戶交互,都離不開對DOM內(nèi)容的精確控制,本文將全面介紹JavaScript中操作DOM內(nèi)容的各種方法,需要的朋友可以參考下

1. DOM內(nèi)容操作基礎(chǔ)

1.1 innerHTML：強(qiáng)大的內(nèi)容操作屬性

innerHTML是最常用的DOM內(nèi)容操作屬性之一，它可以獲取或設(shè)置元素的HTML內(nèi)容：

const element = document.getElementById('myElement');

// 獲取HTML內(nèi)容
const content = element.innerHTML;
console.log(content); // 輸出元素內(nèi)的所有HTML字符串

// 設(shè)置HTML內(nèi)容
element.innerHTML = '<strong>新內(nèi)容</strong> <em>包含HTML標(biāo)簽</em>';

// 追加內(nèi)容
element.innerHTML += ' 追加的內(nèi)容';

特點(diǎn)：

可以解析HTML標(biāo)簽
性能較高（瀏覽器優(yōu)化良好）
會(huì)觸發(fā)重繪（repaint）
存在XSS安全風(fēng)險(xiǎn)（需對用戶輸入進(jìn)行轉(zhuǎn)義）

1.2 textContent：純文本操作

當(dāng)不需要HTML解析時(shí)，textContent是更安全的選擇：

// 獲取純文本內(nèi)容（忽略所有HTML標(biāo)簽）
const text = element.textContent;

// 設(shè)置純文本內(nèi)容（HTML標(biāo)簽會(huì)被轉(zhuǎn)義顯示）
element.textContent = '<strong>這段代碼會(huì)原樣顯示</strong>';

優(yōu)勢：

自動(dòng)轉(zhuǎn)義HTML標(biāo)簽，防止XSS攻擊
性能略優(yōu)于innerHTML（不需要解析HTML）
獲取時(shí)包含所有子元素的文本（包括隱藏元素）

1.3 innerText：樣式感知的文本獲取

innerText與textContent類似，但有重要區(qū)別：

const text = element.innerText;

特點(diǎn)：

只返回"可見"文本（受CSS樣式影響）
不返回<script>和<style>元素內(nèi)容
會(huì)觸發(fā)重排（reflow）以計(jì)算布局
不是標(biāo)準(zhǔn)屬性（但被所有現(xiàn)代瀏覽器支持）

對比表：

屬性	獲取內(nèi)容	解析HTML	性能	注意
innerHTML	包含HTML標(biāo)簽	是	高	XSS風(fēng)險(xiǎn)
textContent	純文本	否	高	標(biāo)準(zhǔn)屬性
innerText	可見文本	否	低	非標(biāo)準(zhǔn)

2. 表單元素內(nèi)容操作

表單元素（input, textarea, select等）有特殊的屬性來操作內(nèi)容：

2.1 value屬性

const input = document.querySelector('input[type="text"]');

// 獲取值
const inputValue = input.value;

// 設(shè)置值
input.value = '新的輸入值';

2.2 特殊表單元素

textarea：

const textarea = document.querySelector('textarea');
textarea.value = '多行文本內(nèi)容';

select：

const select = document.querySelector('select');

// 獲取選中值
const selectedValue = select.value;

// 設(shè)置選中值
select.value = 'option2';

// 獲取選中項(xiàng)
const selectedOption = select.options[select.selectedIndex];

checkbox/radio：

const checkbox = document.querySelector('input[type="checkbox"]');

// 獲取選中狀態(tài)
const isChecked = checkbox.checked;

// 設(shè)置選中狀態(tài)
checkbox.checked = true;

3. 高級內(nèi)容操作技巧

3.1 使用DocumentFragment高效批量操作

const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `項(xiàng)目 ${i}`;
  fragment.appendChild(li);
}

document.getElementById('list').appendChild(fragment);

優(yōu)勢：

減少DOM操作次數(shù)
避免多次重排和重繪
提高性能（特別對大量元素）

3.2 使用模板字符串動(dòng)態(tài)生成內(nèi)容

const user = { name: '張三', age: 30 };

element.innerHTML = `
  <div class="user-card">
    <h2>${user.name}</h2>
    <p>年齡: ${user.age}</p>
    <p>注冊時(shí)間: ${new Date().toLocaleDateString()}</p>
  </div>
`;

3.3 使用insertAdjacentHTML精確控制插入位置

element.insertAdjacentHTML('beforebegin', '<p>在元素前插入</p>');
element.insertAdjacentHTML('afterbegin', '<p>在元素內(nèi)開頭插入</p>');
element.insertAdjacentHTML('beforeend', '<p>在元素內(nèi)末尾插入</p>');
element.insertAdjacentHTML('afterend', '<p>在元素后插入</p>');

位置參數(shù)：

beforebegin：元素自身之前
afterbegin：元素內(nèi)部第一個(gè)子節(jié)點(diǎn)之前
beforeend：元素內(nèi)部最后一個(gè)子節(jié)點(diǎn)之后
afterend：元素自身之后

4. 內(nèi)容操作性能優(yōu)化

4.1 減少DOM操作次數(shù)

不佳實(shí)踐：

// 多次操作DOM
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  document.body.appendChild(div);
}

優(yōu)化方案：

// 單次操作DOM
const container = document.createElement('div');
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  container.appendChild(div);
}
document.body.appendChild(container);

4.2 使用事件委托減少內(nèi)容更新

// 而不是為每個(gè)元素添加監(jiān)聽器
document.getElementById('list').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    e.target.textContent = '已點(diǎn)擊';
  }
});

4.3 使用requestAnimationFrame優(yōu)化動(dòng)畫內(nèi)容更新

function updateContent() {
  element.textContent = new Date().toLocaleTimeString();
  requestAnimationFrame(updateContent);
}

requestAnimationFrame(updateContent);

5. 安全注意事項(xiàng)

5.1 防范XSS攻擊

危險(xiǎn)做法：

element.innerHTML = userProvidedContent; // 可能包含惡意腳本

安全做法：

// 使用textContent
element.textContent = userProvidedContent;

// 或轉(zhuǎn)義HTML
function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

element.innerHTML = escapeHtml(userProvidedContent);

5.2 使用現(xiàn)代API增強(qiáng)安全性

DOMPurify庫：

const clean = DOMPurify.sanitize(userProvidedContent);
element.innerHTML = clean;

Trusted Types API（現(xiàn)代瀏覽器）：

if (window.trustedTypes && window.trustedTypes.createPolicy) {
  const escapePolicy = trustedTypes.createPolicy('myEscapePolicy', {
    createHTML: string => string.replace(/</g, '&lt;')
  });
  element.innerHTML = escapePolicy.createHTML(userProvidedContent);
}

6. 現(xiàn)代框架中的內(nèi)容操作

6.1 React中的內(nèi)容操作

function MyComponent() {
  const [content, setContent] = useState('初始內(nèi)容');

  return (
    <div>
      <div dangerouslySetInnerHTML={{__html: sanitizedContent}} />
      <button onClick={() => setContent('新內(nèi)容')}>更新</button>
    </div>
  );
}

6.2 Vue中的內(nèi)容操作

<template>
  <div v-html="sanitizedContent"></div>
  <button @click="content = '新內(nèi)容'">更新</button>
</template>

<script>
export default {
  data() {
    return {
      content: '初始內(nèi)容'
    }
  },
  computed: {
    sanitizedContent() {
      // 在這里實(shí)現(xiàn)凈化邏輯
      return this.content;
    }
  }
}
</script>

7. 總結(jié)與最佳實(shí)踐

DOM內(nèi)容操作是前端開發(fā)的基礎(chǔ)技能，正確使用這些技術(shù)可以創(chuàng)建動(dòng)態(tài)、交互式的Web應(yīng)用。以下是關(guān)鍵要點(diǎn)總結(jié)：

選擇正確的屬性：

需要HTML解析 → innerHTML
純文本操作 → textContent
表單元素 → value/checked等

性能優(yōu)化原則：

減少DOM操作次數(shù)
批量更新內(nèi)容
使用文檔片段
合理使用事件委托

安全第一：

永遠(yuǎn)不要直接插入未凈化的用戶輸入
優(yōu)先使用textContent而非innerHTML
考慮使用DOMPurify等凈化庫

現(xiàn)代開發(fā)：

框架提供了更安全的內(nèi)容操作方式
利用虛擬DOM減少直接操作
遵循框架的最佳實(shí)踐

隨著Web平臺的不斷發(fā)展，DOM操作API也在持續(xù)演進(jìn)。掌握這些基礎(chǔ)技術(shù)將幫助您構(gòu)建更高效、更安全的Web應(yīng)用程序。

以上就是JavaScript動(dòng)態(tài)獲取和修改DOM元素內(nèi)容的完整指南的詳細(xì)內(nèi)容，更多關(guān)于JavaScript獲取和修改DOM內(nèi)容的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片