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

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

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

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

1.textContent(推荐)

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

// HTML: <div id="box">Hello <span>World</span></div>constbox=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.

// HTML: <div id="box">Hello <span style="display: none;">隐藏文本</span> World</div>constbox=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 攻击风险(避免插入用户输入的未过滤内容).

// HTML: <div id="box">初始内容</div>constbox=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属性修改其值.

// 1. 单行输入框// HTML: <input type="text" id="username" value="初始值">constusername=document.getElementById('username');username.value='张三';// 设置值为"张三"// 2. 密码框// HTML: <input type="password" id="pwd">constpwd=document.getElementById('pwd');pwd.value='123456';// 3. 文本域// HTML: <textarea id="content">初始文本</textarea>constcontent=document.getElementById('content');content.value='这是文本域的新内容';// 4. 下拉选择框// HTML:// <select id="city">// <option value="beijing">北京</option>// <option value="shanghai">上海</option>// </select>constcity=document.getElementById('city');city.value='shanghai';// 选中"上海"选项

四.替换元素本身( outerHTML )

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

// HTML: <div id="box">旧内容</div>constbox=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被替换)

关键注意事项

1. XSS 安全问题

   • 若内容包含用户输入,优先使用textContent/text()(会转义 HTML 标签),避免使用innerHTML/html()导致 XSS 攻击.
   • 示例: 用户输入<script>alert('攻击')</script>,textContent会将其作为普通文本显示,而innerHTML会执行脚本.

2. 性能考量

   • 频繁修改innerHTML会导致浏览器反复解析 DOM,性能较低(可先拼接字符串再一次性设置).
   • 对于大量文本修改,textContent比innerText更快.

3. 元素存在性检查

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

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

4. 表单元素的特殊情况

   • 对于<input type="file">,value属性只读,无法通过 JavaScript 修改(出于安全考虑).

总结

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