【js获取innerText，innerHTML，属性值，value】在JavaScript开发中，经常需要操作DOM元素的文本内容和属性值。不同的方法可以获取到不同的信息，理解它们的区别有助于更高效地进行前端开发。下面是对`innerText`、`innerHTML`、属性值和`value`的总结与对比。
一、基本概念总结
- innerText：获取或设置元素内的纯文本内容，会自动处理HTML标签，并去除空白字符。
- innerHTML：获取或设置元素内的HTML内容，包括所有子节点的HTML结构。
- 属性值：通过`getAttribute()`或直接访问属性（如`element.id`）来获取元素的属性值。
- value：通常用于表单元素（如`input`、`textarea`、`select`），表示用户输入的值。
二、对比表格
| 方法名 | 描述 | 是否包含HTML标签 | 是否支持动态修改 | 示例用法 |
| `innerText` | 获取或设置纯文本内容 | ❌ 不包含 | ✅ 支持 | `element.innerText = 'Hello';` |
| `innerHTML` | 获取或设置HTML内容 | ✅ 包含 | ✅ 支持 | `element.innerHTML = 'Hello';` |
| `getAttribute()` | 获取元素的属性值 | ❌ 不包含 | ✅ 支持 | `element.getAttribute('id')` |
| `element.id` | 直接访问属性 | ❌ 不包含 | ✅ 支持 | `element.id` |
| `value` | 获取表单元素的值 | ❌ 不包含 | ✅ 支持 | `element.value` |
三、使用场景建议
- 当只需要获取或设置文本内容时，使用`innerText`最为简洁。
- 若需要保留HTML结构并动态更新内容，应使用`innerHTML`。
- 对于获取非标准属性（如自定义属性），推荐使用`getAttribute()`方法。
- 表单元素的值操作，如输入框、下拉框等，应优先使用`value`属性。
四、注意事项
- `innerText`在某些浏览器中可能不完全兼容，特别是在处理中文或复杂排版时。
- 使用`innerHTML`时需注意XSS漏洞风险，避免直接插入用户输入的内容。
- `value`只适用于``、`