DEV Community
·
内容操作
💡
原文英文，约300词，阅读约需2分钟。
📝
内容提要
本文介绍了JavaScript中常用的DOM元素操作方法，包括获取和设置文本、HTML内容、属性值，以及添加、插入、替换和克隆子元素等功能。
🎯
关键要点
- textContent: 获取或设置元素的文本内容，不包括任何HTML标签。
- innerText: 类似于textContent，但考虑了元素的样式。
- innerHTML: 获取或设置元素的HTML内容（包括标签）。
- outerHTML: 获取或设置元素的HTML内容，包括元素本身。
- value: 获取或设置表单元素的值。
- setAttribute(): 设置元素特定属性的值。
- getAttribute(): 获取指定属性的值。
- removeAttribute(): 从元素中移除属性。
- appendChild(): 将新子元素附加到父元素。
- insertBefore(): 在现有子节点之前插入新节点。
- replaceChild(): 用新元素替换现有子元素。
- cloneNode(): 创建元素的副本（可以是深拷贝或浅拷贝）。
❓
延伸问答
如何获取或设置元素的文本内容？
可以使用textContent属性来获取或设置元素的文本内容，不包括任何HTML标签。
innerHTML和outerHTML有什么区别？
innerHTML用于获取或设置元素的HTML内容（包括标签），而outerHTML则包括元素本身的HTML内容。
如何在JavaScript中添加新的子元素？
可以使用appendChild()方法将新子元素附加到父元素。
如何获取和设置表单元素的值？
可以使用value属性来获取或设置表单元素的值。
如何替换现有的子元素？
使用replaceChild()方法可以用新元素替换现有的子元素。
cloneNode()方法的作用是什么？
cloneNode()方法用于创建元素的副本，可以选择深拷贝或浅拷贝。
🏷️
标签
➡️
