innerText和innerHTML之间的区别
innerHTML ， innerText和childNodes[].value之间的区别是什么？
与innerText不同的是，innerHTML允许您使用HTML富文本，并且不会自动编码和解码文本。 换句话说，innerText以纯文本的forms检索和设置标签的内容，而innerHTML以HTML格式检索和设置相同的内容。
以下示例引用了以下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是由微软引入的，并且一段时间不被Firefox支持。 2016年8月，innerText被WHATWG采用，并在v45版本中joinFirefox。 -
innerText给你一个样式感知的文本表示，试图匹配浏览器呈现的内容，这意味着：-
innerText应用text-transform和white-space规则 -
innerText修剪线条之间的空白区域，并在项目之间添加换行符 -
innerText不会返回不可见项目的文字
-
-
innerText将返回从不像<style />和`呈现的元素的textContent -
Node元素的属性
node.textContent
获取或设置节点及其后代的文本内容。
x.textContent // => " // => Warning: This element contains code and strong language. // => "
虽然这是一个W3C标准 ，但它不被IE <9支持。
- 不知道样式，因此会返回CSS隐藏的内容
- 不触发回stream（因此更高性能）
-
Node元素的属性
node.value
这个取决于你定位的元素。 对于上面的示例， x返回一个HTMLDivElement对象，该对象没有定义value属性。
x.value // => null
例如，input标签（ <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>
从文档 ：
注意：对于某些inputtypes，返回的值可能与用户input的值不匹配。 例如，如果用户input非数字值，则返回的值可能是一个空string。
示例脚本
下面是一个显示上面提供的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>
InnerText属性对内容进行html编码，将<p>为<p> 等等。如果你想插入HTML标签，你需要使用InnerHTML
var element = document.getElementById("main"); var values = element.childNodes[1].innerText; alert('the value is:' + values);
例如，要进一步细化并检索值Alec，请使用另一个.childNodes [1]
var element = document.getElementById("main"); var values = element.childNodes[1].childNodes[1].innerText; alert('the value is:' + values);
InnerText只会以纯文本的forms返回换行符上每个元素的页面文本值，而innerHTML将返回body标签内所有内容的HTML内容，而childNodes将返回一个名为形成
就MutationObservers而言，设置innerHTML会由于浏览器删除节点，然后添加一个值为innerHTML的新节点而生成childList变体。
如果设置innerText，则会生成characterData变体。
