JavaScript DOM 原生部分(二):元素内容修改

文章目录

[一.修改纯文本内容( textContent / innerText )](#一.修改纯文本内容( textContent / innerText ))
- 1.textContent(推荐)
- 2.innerText
[二.修改 HTML 内容( innerHTML )](#二.修改 HTML 内容( innerHTML ))
[三.修改表单元素的值( value )](#三.修改表单元素的值( value ))
[四.替换元素本身( outerHTML )](#四.替换元素本身( outerHTML ))
关键注意事项
总结

在 JavaScript 中,修改 DOM 元素的内容是常见操作,主要分为 修改文本内容 、 修改 HTML 内容 和 修改表单元素的值 三类,以下是详细的实现方式:

一.修改纯文本内容( textContent / innerText )

这两个属性用于操作元素的文本内容,区别在于处理空白和隐藏元素的方式不同.

1.textContent(推荐)

作用 : 获取/设置元素的所有文本内容(包括子元素的文本,忽略 HTML 标签,保留空格和换行).
特点: 性能更好,支持所有现代浏览器,会将 HTML 标签作为普通文本处理(避免 XSS 攻击).

javascript 复制代码

// HTML: <div id="box">Hello <span>World</span></div>
const box = document.getElementById('box');

// 获取文本内容: "Hello World"
console.log(box.textContent);

// 设置文本内容(覆盖原有内容)
box.textContent = '你好,JavaScript';
// 结果: <div id="box">你好,JavaScript</div>

// 也可追加文本(拼接原有内容)
box.textContent += '！';
// 结果: <div id="box">你好,JavaScript！</div>

2.innerText

作用 : 获取 / 设置元素的可见文本内容(受 CSS 样式影响,如隐藏元素的文本不会被获取,且会合并空白).
特点 : 兼容性好,但性能略低于 textContent.

javascript 复制代码

// HTML: <div id="box">Hello   <span style="display:  none;">隐藏文本</span> World</div>
const box = document.getElementById('box');

// 获取可见文本: "Hello World"(忽略隐藏文本和多余空格)
console.log(box.innerText);

// 设置文本内容
box.innerText = 'Hello DOM';
// 结果: <div id="box">Hello DOM</div>

二.修改 HTML 内容( innerHTML )

作用 : 获取/设置元素的HTML 内容(包括标签),可直接插入 HTML 结构.
注意 : 使用 innerHTML 时需注意XSS 攻击风险(避免插入用户输入的未过滤内容).

javascript 复制代码

// HTML: <div id="box">初始内容</div>
const box = document.getElementById('box');

// 获取 HTML 内容: "初始内容"
console.log(box.innerHTML);

// 设置 HTML 内容(覆盖原有内容)
box.innerHTML = '<h3>标题</h3><p>这是一段带标签的内容</p>';
// 结果: <div id="box"><h3>标题</h3><p>这是一段带标签的内容</p></div>

// 追加 HTML 内容(拼接原有内容)
box.innerHTML += '<span>追加的内容</span>';

三.修改表单元素的值( value )

对于 <input>、<textarea>、<select> 等表单元素,使用 value 属性修改其值.

javascript 复制代码

// 1. 单行输入框
// HTML: <input type="text" id="username" value="初始值">
const username = document.getElementById('username');
username.value = '张三'; // 设置值为"张三"

// 2. 密码框
// HTML: <input type="password" id="pwd">
const pwd = document.getElementById('pwd');
pwd.value = '123456';

// 3. 文本域
// HTML: <textarea id="content">初始文本</textarea>
const content = document.getElementById('content');
content.value = '这是文本域的新内容';

// 4. 下拉选择框
// HTML:
// <select id="city">
//   <option value="beijing">北京</option>
//   <option value="shanghai">上海</option>
// </select>
const city = document.getElementById('city');
city.value = 'shanghai'; // 选中"上海"选项

四.替换元素本身( outerHTML )

作用: 获取/设置元素及其所有内容的 HTML 结构(包括元素自身标签).
注意: 设置后原元素会被新的 HTML 结构替换.

javascript 复制代码

// HTML: <div id="box">旧内容</div>
const box = document.getElementById('box');

// 获取 outerHTML: "<div id="box">旧内容</div>"
console.log(box.outerHTML);

// 替换元素本身
box.outerHTML = '<p id="newBox">新的p元素</p>';
// 结果: <p id="newBox">新的p元素</p>(原div被替换)

关键注意事项

XSS 安全问题
- 若内容包含用户输入,优先使用 textContent/text() (会转义 HTML 标签),避免使用 innerHTML/html() 导致 XSS 攻击.
- 示例: 用户输入 <script>alert('攻击')</script>,textContent 会将其作为普通文本显示,而 innerHTML 会执行脚本.
性能考量
- 频繁修改 innerHTML 会导致浏览器反复解析 DOM,性能较低(可先拼接字符串再一次性设置).
- 对于大量文本修改,textContent 比 innerText 更快.

元素存在性检查

修改内容前建议检查元素是否存在,避免报错:

javascript 复制代码

const box = document.getElementById('box');
if (box) {
  // 检查元素是否存在
  box.textContent = '新内容';
}

表单元素的特殊情况
- 对于 <input type="file">,value 属性只读,无法通过 JavaScript 修改(出于安全考虑).

总结

场景	推荐方法
修改纯文本内容	`textContent`
修改带标签的 HTML 内容	`innerHTML`( 谨慎使用 )
修改表单元素值	`value`