innerHTML、nodeValue与textContent的区别DOM 你可以认为就是浏览器会把HTML文档解析为一

DOM

DOM=DocumentObjectModel，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构你可以认为就是浏览器会把HTML文档解析为一个对象。

就像一个树一样。

2ed3d8b1d1264c10aca15f20e6206e16_tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.awebp

节点种类

节点种类一种分为12类

元素节点 Node.ELEMENT_NODE(1)
属性节点 Node.ATTRIBUTE_NODE(2)
文本节点　　 Node.TEXT_NODE(3)
CDATA节点 Node.CDATA_SECTION_NODE(4)
实体引用名称节点　Node.ENTRY_REFERENCE_NODE(5)
实体名称节点　　 Node.ENTITY_NODE(6)
处理指令节点　　 Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点　 Node.COMMENT_NODE(8)
文档节点　 Node.DOCUMENT_NODE(9)
文档类型节点　　 Node.DOCUMENT_TYPE_NODE(10)
文档片段节点　　 Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点 Node.NOTATION_NODE(12)

节点遍历

树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

三者区别

innerText、 nodeValue与 textContent这三个api都是取某一个文本内容

<body>
    <div id="app">
        水果
        <!-- 注释 -->
        <p>
            西瓜
            <style>
                .red {
                    background: red;
                }
            </style>
            <div style="display:none">
                瓜子
            </div>
        </p>
    </div>
    <script>
        const app = document.querySelector('#app')
        const print = node => `name:${node.nodeName} type:${node.nodeType} value:${node.nodeValue}`
        console.log('nodeValue', print(app))
        console.log('nodeValue', print(app.childNodes[0]))
        console.log('nodeValue', print(app.childNodes[1]))
        console.log('innerText', app.innerText)
        console.log('innerHTML', app.innerHTML)
        console.log('textContent', app.textContent)
    </script>
</body>

nodeValue

nodeValue只能读取文本节点的内容，实际上只对CDATA片段，注释comment，Processing Instruction节点或text节点有效

const app = document.getElementById('app') 
console.log(app.nodeValue) // null
console.log(app.childNodes[0].nodeValue) // 水果 
console.log(app.childNodes[1].nodeValue) // 注释

innerHTML与innerText

这两个api的区别功能是从其实为止到终止为止的内容，区别在于是否去除Html标签

textContent

这是一个比较新的api， ie8以前的浏览器可能会产生不兼容问题

功能是textContent属性设置会返回指定节点的文本内容，以及它的所有后代

与innerText区别

会获取style="display:none"中的文本
会解析style标签中的文本
不解析html更快捷性能好