首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript获取和修改DOM内容

JavaScript动态获取和修改DOM元素内容的完整指南

2025-06-23 09:06:02 作者：AllenBright

在现代Web开发中,动态获取和修改DOM元素内容是构建交互式用户界面的核心技能,无论是更新实时数据、创建动态内容还是响应用户交互,都离不开对DOM内容的精确控制,本文将全面介绍JavaScript中操作DOM内容的各种方法,需要的朋友可以参考下

1. DOM内容操作基础

1.1 innerHTML：强大的内容操作属性

innerHTML是最常用的DOM内容操作属性之一，它可以获取或设置元素的HTML内容：

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

// 获取HTML内容
const content = element.innerHTML;
console.log(content); // 输出元素内的所有HTML字符串

// 设置HTML内容
element.innerHTML = '<strong>新内容</strong> <em>包含HTML标签</em>';

// 追加内容
element.innerHTML += ' 追加的内容';

特点：

可以解析HTML标签
性能较高（浏览器优化良好）
会触发重绘（repaint）
存在XSS安全风险（需对用户输入进行转义）

1.2 textContent：纯文本操作

当不需要HTML解析时，textContent是更安全的选择：

// 获取纯文本内容（忽略所有HTML标签）
const text = element.textContent;

// 设置纯文本内容（HTML标签会被转义显示）
element.textContent = '<strong>这段代码会原样显示</strong>';

优势：

自动转义HTML标签，防止XSS攻击
性能略优于innerHTML（不需要解析HTML）
获取时包含所有子元素的文本（包括隐藏元素）

1.3 innerText：样式感知的文本获取

innerText与textContent类似，但有重要区别：

const text = element.innerText;

特点：

只返回"可见"文本（受CSS样式影响）
不返回<script>和<style>元素内容
会触发重排（reflow）以计算布局
不是标准属性（但被所有现代浏览器支持）

对比表：

属性	获取内容	解析HTML	性能	注意
innerHTML	包含HTML标签	是	高	XSS风险
textContent	纯文本	否	高	标准属性
innerText	可见文本	否	低	非标准

2. 表单元素内容操作

表单元素（input, textarea, select等）有特殊的属性来操作内容：

2.1 value属性

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

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

// 设置值
input.value = '新的输入值';

2.2 特殊表单元素

textarea：

const textarea = document.querySelector('textarea');
textarea.value = '多行文本内容';

select：

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

// 获取选中值
const selectedValue = select.value;

// 设置选中值
select.value = 'option2';

// 获取选中项
const selectedOption = select.options[select.selectedIndex];

checkbox/radio：

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

// 获取选中状态
const isChecked = checkbox.checked;

// 设置选中状态
checkbox.checked = true;

3. 高级内容操作技巧

3.1 使用DocumentFragment高效批量操作

const fragment = document.createDocumentFragment();

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

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

优势：

减少DOM操作次数
避免多次重排和重绘
提高性能（特别对大量元素）

3.2 使用模板字符串动态生成内容

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

element.innerHTML = `
  <div class="user-card">
    <h2>${user.name}</h2>
    <p>年龄: ${user.age}</p>
    <p>注册时间: ${new Date().toLocaleDateString()}</p>
  </div>
`;

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

element.insertAdjacentHTML('beforebegin', '<p>在元素前插入</p>');
element.insertAdjacentHTML('afterbegin', '<p>在元素内开头插入</p>');
element.insertAdjacentHTML('beforeend', '<p>在元素内末尾插入</p>');
element.insertAdjacentHTML('afterend', '<p>在元素后插入</p>');

位置参数：

beforebegin：元素自身之前
afterbegin：元素内部第一个子节点之前
beforeend：元素内部最后一个子节点之后
afterend：元素自身之后

4. 内容操作性能优化

4.1 减少DOM操作次数

不佳实践：

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

优化方案：

// 单次操作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 使用事件委托减少内容更新

// 而不是为每个元素添加监听器
document.getElementById('list').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    e.target.textContent = '已点击';
  }
});

4.3 使用requestAnimationFrame优化动画内容更新

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

requestAnimationFrame(updateContent);

5. 安全注意事项

5.1 防范XSS攻击

危险做法：

element.innerHTML = userProvidedContent; // 可能包含恶意脚本

安全做法：

// 使用textContent
element.textContent = userProvidedContent;

// 或转义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 使用现代API增强安全性

DOMPurify库：

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

Trusted Types API（现代浏览器）：

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

6. 现代框架中的内容操作

6.1 React中的内容操作

function MyComponent() {
  const [content, setContent] = useState('初始内容');

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

6.2 Vue中的内容操作

<template>
  <div v-html="sanitizedContent"></div>
  <button @click="content = '新内容'">更新</button>
</template>

<script>
export default {
  data() {
    return {
      content: '初始内容'
    }
  },
  computed: {
    sanitizedContent() {
      // 在这里实现净化逻辑
      return this.content;
    }
  }
}
</script>

7. 总结与最佳实践

DOM内容操作是前端开发的基础技能，正确使用这些技术可以创建动态、交互式的Web应用。以下是关键要点总结：

选择正确的属性：

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

性能优化原则：

减少DOM操作次数
批量更新内容
使用文档片段
合理使用事件委托

安全第一：

永远不要直接插入未净化的用户输入
优先使用textContent而非innerHTML
考虑使用DOMPurify等净化库

现代开发：

框架提供了更安全的内容操作方式
利用虚拟DOM减少直接操作
遵循框架的最佳实践

随着Web平台的不断发展，DOM操作API也在持续演进。掌握这些基础技术将帮助您构建更高效、更安全的Web应用程序。

以上就是JavaScript动态获取和修改DOM元素内容的完整指南的详细内容，更多关于JavaScript获取和修改DOM内容的资料请关注脚本之家其它相关文章！