Day21 - innerHTML、 nodeValue与 textContent之间的区别

[su37josephxia]

• B栈视频
• 掘金文章

[bianzheCN]

用途

Element.innerHTML, 读写元素的 HTML 内容
Text.nodeValue, 读写文本节点内容
Node.textContent, 读写节点的文本内容，连接在一起返回

扩展

其中 Element.innerHTML 是很危险的，因为需要面对恶意脚本的风险

[qytayh]

结论

• innerHTML 标签内的内容(outerHTML带上标签的innerHTML)
• textContent 标签内的文本内容(过滤内部标签，与innerText、outerText内容一致)
• nodeValue 只有当当前节点为纯文本时(nodeName=='#text', nodeType==3, childNodes数组长度为0)，会显示文本内容否则为null

[chunhuigao]

innerHTML 属性设置或获取HTML语法表示的元素的后代

• 设置，设置的值被解析为 HTML
• 获取：获取当前标签的所有内容的字符串形式，html结构也会解析成字符串
  nodeValue 获取或设置当前节点的值
• 文档节点返回null，nodeValue返回该节点的文本内容， attribute 节点返回该属性的属性值

textContent 获取或设置当前节点的文本

• 设置文本
• 获取节点文本

[jiafei-cat]

element.innerHTML设置或获取HTML语法表示的元素的后代, 顾名思义就是返回DOM节点的子HTML代码, 如果是设置的话会解析HTML
node.nodeValue 一般用来获取文本节点的值
node.textContent获取节点及子节点的文本内容，而且不会受css影响会返回隐藏的节点的内容，设置内容不会解析成HTML

<div id="test">
   123
   <span>456</span>
  <span style="display:none;">789</span>
</div>

<script>
const testDOM = document.getElementById('test')
const innerHTMLStr = testDOM.innerHTML
const nodeValueStr = testDOM.childNodes[0].nodeValue
const textContent = testDOM.textContent

console.log(innerHTMLStr)
// '\n   123\n   <span>456</span><span style="display:none;">789</span>\n'

console.log(nodeValueStr)
// '\n   123\n   '

console.log(textContent)
// '\n   123\n   456789\n'
</script>

[zcma11]

1. innerHTML 是得到里面的html代码，赋值时将设置的值作为html解析。
2. nodeValue 是节点的文本，但只有text节点，attribute节点和 comment 节点的 nodeValue 是文本内容。
3. textContent 是元素内部的文本，会获取子元素的文本合并后返回。赋值时则是将元素的内容重置为设置的值，和 innerHTML 不同的地方是会作为文本解析而不是作为html解析。

[wzl624]

• innerHTML是设置或获取某元素内的所有内容包括文本及html标签。
• nodeValue是获取某元素下某个节点的文本内容。
• textContent是获取某元素内部的文本内容，不包括其他html标签。

[aiuluna]

• innerHTML 读取或设置节点起始至结束标签中的HTML内容
• nodeValue 只有在纯文本节点中有值，其他为null。用来读取或设置指定节点的文本内容
• textContent 属性读取或设置节点的文本内容，不依赖于css，会返回所有的包含子节点的文本内容的组合

<p dir="auto" id="abc">innerHTML属性读取或设置节点起始和结束标签中的 HTM L内容；<br>
nodeValue属性读取或设置指定节点的文本内容，适用于文本类型的节点；<br>
textContent属性读取或设置指定节点的文本内容，对于元素节点而言，会返回所包含的所有子节点中的文本内容的组合。</p>

$('#abc').innerHTML
'innerHTML属性读取或设置节点起始和结束标签中的 HTM L内容；<br>\nnodeValue属性读取或设置指定节点的文本内容，适用于文本类型的节点；<br>\ntextContent属性读取或设置指定节点的文本内容，对于元素节点而言，会返回所包含的所有子节点中的文本内容的组合。'

('#abc').childNodes[0].nodeValue
'innerHTML属性读取或设置节点起始和结束标签中的 HTM L内容；'

$('#abc').textContent
'innerHTML属性读取或设置节点起始和结束标签中的 HTM L内容；\nnodeValue属性读取或设置指定节点的文本内容，适用于文本类型的节点；\ntextContent属性读取或设置指定节点的文本内容，对于元素节点而言，会返回所包含的所有子节点中的文本内容的组合。'

[Limeijuan]

• innerHTML 设置或获取元素内部文本+标签
• textContent 设置或获取元素内的文本内容，包含它子节点的文本，相当于把标签都过滤掉了，显示所有包含节点的文本内容。
• nodeValue 设置或获取指定节点的文本内容，它只适用于文本节点和属性节点，对标签节点不适用，返回null；
  https://juejin.cn/post/7055902273519484942

[zhenyuWang]

innerHTML：设置或获取标签内的内容(包括标签和内容)
textContent：设置或获取标签内的文本内容(会忽略内部标签，只获取文本)
nodeValue：只有当当前节点为纯文本时(nodeName=='#text', nodeType==3, childNodes数组长度为0)，可以设置或者获取文本内容，否则会返回null

[863379105]

https://juejin.cn/post/7055672717676118053/

[yanzefeng]

innerHTML: 设置或者获取元素内的文本和标签
textContent: 设置或者返回指定节点的文本内容。
nodeValue 设置或获取指定节点的文本内容，它只适用于文本节点和属性节点，对标签节点不适用，返回null

[674252256]

innerHTML可以设置或者获取标签内的内容，包括标签和内容text content可以设置或者获取标签内的文本内容，会忽略到会忽略掉内部的标签，只获取文本node value。只有当当前的节点为纯文本的时候，它可以获取或者设置当前的文本内容，否则获取的时候会返回null

[jj56313751]

  <p id="prag" title="text">
    一段文本
    <span>一句话</span>
  </p>

    var p = document.getElementById('prag')
    console.log('nodeValue', p.nodeValue) // null
    console.log('childNodes', p.childNodes[0].nodeValue) // \n    一段文本\n 
    console.log('innerHTML', p.innerHTML) // \n    一段文本\n    <span id="sp">一句话</span>\n 
    console.log('innerText', p.innerText) // 一段文本 一句话
    console.log('textContent', p.textContent) // \n    一段文本\n    一句话\n  

结论

• nodeValue 只可获取text类型中的文本
• innerHTML 可获取和设置标签内的所有内容包括文本换行符和标签
• textContent 可获取标签内的所有文本和换行符并且只能设置文本和换行

[QbjGKNick]

innerHTML

设置获取HTML语法表示的元素的后代
https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin
获取时：返回序列化后元素后代组成的HTML或XML字符串；
设置时：
当给定的值被解析为HTML或者XML是，结果就是DocumentFragment对象，代表元素设置新DOM节点;
如果设置的内容是元素，元素的content属性会被替换成创建的新的DocumentFragment;
对于其他所有元素，元素的内容都被替换为新的 DocumentFragment节点.

nodeValue
获取或设置当前节点的值
获取时：对于文本、注释以及CDATA节点，返回该节点的文本内容，对于文档节点，则返回null
设置时：如果设置值为null，则对他赋值没有任何影响。

---

textContent
表示一个节点及其后代的文本内容
获取时：

• DocumentFragment，文档碎片，则返回文档碎片内容
• Element，元素，则返回后代文本内容
• Attr，则返回它的值
• CharacterData，也是返回它的值
• 其它，返回null
  设置时：
  删除所有子节点，替换给定值的文本子节点

[zzzz-bang]

• innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML，可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。
• nodeValue 属性设置或返回指定节点的节点值。nodeValue 属性的替代选择是 textContent 属性。nodeValue只适用于文本节点和属性节点，对标签节点不适用，返回null
• textContent 属性设置或者返回指定节点的文本内容。如果设置了textContent属性，任何子节点都会被移除，然后被指定的字符串的文本节点替换

[partiallove]

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML.DOM中的节点是分好几种类型,

整个文档是一个文档节点(document，唯一）
每个 HTML 元素是元素节点（标签div,h1,p之类）
HTML 元素内的文本是文本节点（插入在p,div, span内的文本）
每个 HTML 属性是属性节点（class,src这种）
注释是注释节点
nodeValue 属性设置或返回指定节点的节点值。

nodeValue 属性的替代选择是 textContent 属性。

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

[rachern]

innerHTML

返回指定标签内部的全部内容，包括标签和文本

nodeValue

返回文本节点中文本，只针对文本节点和属性节点，标签节点则返回 null

textContent

返回指定标签内部的全部文本内容，忽略除文本以外的其他内容

[alienRidingCat]

innerHTML
innerHTML属性可获取或设置指定元素标签内的全部html内容

nodeValue
nodeValue 属性设置或返回指定节点的节点值。
nodeValue只适用于文本节点和属性节点，对标签节点不适用，返回null；

textContent
textContent 属性可返回指定节点的文本内容。如果设置了textContent属性，任何子节点都会被移除，然后被指定的字符串的文本节点替换。

[ruixue0702]

innerHTML ：轻松替换元素的内容
nodeValue：属性返回或设置当前节点的值
textContent：一个节点及其后代的文本内容

[crazyyoung1020]

innerHTML返回或设置元素节点中的所有标签+文本内容
nodeValue返回或设置文本节点中的内容，其他大部分节点都返回null，且不可以设置
textContent返回节点中的所有文本内容，包括换行和跳格等，以及隐藏元素的文本内容，script和style标签内的内容也可以返回。

[alec1815]

innerHTML: 设置或者获取元素内的文本和标签
textContent: 设置或者返回指定节点的文本内容
nodeValue 设置或获取指定节点的文本内容

[superjunjin]

• innerHTML设置节点起始和结束标签中的全部内容(包括标签和文本)。将内容解析为HTML，因此需要更长的时间。
• nodeValue设置指定节点的文本内容(只针对文本节点和属性节点，标签节点则返回 null)。使用纯文本，不解析HTML，并且速度更快。
• textContent设置指定节点内部的全部文本内容。使用纯文本，不解析HTML，并且速度更快。

[792472461]

innerHTM L属性读取或设置节点起始和结束标签中的 HTM L内容；
nodeValue属性读取或设置指定节点的文本内容，适用于文本类型的节点；
textContent属性读取或设置指定节点的文本内容，对于元素节点而言，会返回所包含的所有子节点中的文本内容的组合。

[rhythm022]

一个节点的 innerHTML，它代表的是一个字符串，就是这个节点所包含的HTML字符串。你可以修改一个节点的 innerHTML，然后界面也会发生变化。

一个节点的textContent，它代表的是这个节点内的HTML字符串中的文本部分。而且这个文本部分，它包含了display 为 none的节点里面的文本，以及style标签 / script标签里面的文本。

一个节点的nodeValue的话，不同类型的节点 nodeValue 是不一样的，如果是文本节点，nodeValue 就是代表这个节点的文本值，如果是属性节点，nodeValue 就代表属性的值。