innerText、innerHTML 和 value 之间的区别？

Question

JavaScript 中的 innerHTML 、 innerText 和 value 有什么区别？

原文由 user2819851 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

然而，与 innerText 不同的是， innerHTML 允许您使用 HTML 富文本，并且不会自动编码和解码文本。换句话说， innerText 检索并设置标记的内容为纯文本，而 innerHTML 检索并设置 HTML 格式的内容。

原文由 alejo802 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

下面的示例引用了以下 HTML 片段：

 <div id="test">
   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>

该节点将被以下 JavaScript 引用：

 var x = document.getElementById('test');

element.innerHTML

设置或获取描述元素后代的 HTML 语法

x.innerHTML
// => "
// =>   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
// => "

这是 W3C 的 DOM 解析和序列化规范 的一部分。请注意，它是 Element 对象的属性。

node.innerText

设置或获取对象开始和结束标记之间的文本

x.innerText
// => "Warning: This element contains code and strong language."

• innerText 由 Microsoft 引入，Firefox 有一段时间不支持。 2016 年 8 月， innerText 被 WHATWG 采用， 并在 v45 中添加到 Firefox。
• innerText 为您提供样式感知的文本表示，该文本试图匹配浏览器呈现的内容，这意味着：
  • innerText 适用 text-transform 和 white-space 规则
  • innerText 修剪行与行之间的空白并在项目之间添加换行符
  • innerText 不会返回不可见项目的文本
• innerText 将返回 textContent 对于从未像 <style /> 和`
• Node 元素的属性

node.textContent

获取或设置节点及其后代的文本内容。

 x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

虽然这是 W3C 标准，但 IE < 9 不支持它。

• 不知道样式，因此会返回被 CSS 隐藏的内容
• 不会触发回流（因此性能更高）
• Node 元素的属性

node.value

这取决于您定位的元素。对于上面的示例， x 返回一个 HTMLDivElement 对象，该对象没有定义 value 属性。

 x.value // => null

输入标签（ <input /> ），例如， 定义一个 value 属性，它指的是“控件中的当前值”。

 <input id="example-input" type="text" value="default" />
<script>
  document.getElementById('example-input').value //=> "default"
  // User changes input to "something"
  document.getElementById('example-input').value //=> "something"
</script>

从 文档：

注意：对于某些输入类型，返回值可能与用户输入的值不匹配。例如，如果用户在 <input type="number"> 中输入非数字值，返回的值可能是空字符串。

示例脚本

下面是一个示例，显示了上述 HTML 的输出：

 var properties = ['innerHTML', 'innerText', 'textContent', 'value'];

// Writes to textarea#output and console
function log(obj) {
  console.log(obj);
  var currValue = document.getElementById('output').value;
  document.getElementById('output').value = (currValue ? currValue + '\n' : '') + obj;
}

// Logs property as [propName]value[/propertyName]
function logProperty(obj, property) {
  var value = obj[property];
  log('[' + property + ']'  +  value + '[/' + property + ']');
}

// Main
log('=============== ' + properties.join(' ') + ' ===============');
for (var i = 0; i < properties.length; i++) {
  logProperty(document.getElementById('test'), properties[i]);
}

 <div id="test">
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>

原文由 fny 发布，翻译遵循 CC BY-SA 3.0 许可协议