Day21 - innerText、 nodeValue与 textContent的区别

简介: Day21 - innerText、 nodeValue与 textContent的区别

知识讲解


什么是Dom


DOM=DocumentObjectModel,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构


你可以认为就是浏览器会把HTML文档解析为一个对象。


就像一个树一样。比如下面会有和然后其他标签都是这棵树上的数值和树叶。


网络异常,图片无法展示
|


节点种类


节点种类一共分为九类


元素节点   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都是取某一个文本内容。


<div id="app">
    水果
        <!-- 注释 -->
        <p>
            西瓜
            <div style="display: none;">
                瓜子
            </div>
        </p>
    </p>
</div>


nodeValue


nodeValue只能取文本节点的内容。


const app = document.getElementById('app')
console.log(app.nodeValue) // null


其实【水果】这个是div下的一个文本节点。


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


实际上只对CDATA片段,注释comment,Processing Instruction节点或text节点有效。


innerHTML与innerText


这两个api的区别功能是从起始位置到终止位置的内容, 区别在于是否去除Html标签 。


const app = document.getElementById('app')
console.log(app.innerHTML) // null
console.log(app.innerText) // null


textContent


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


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


与innerText的区别


  • 会获取style=“display:none”中的文本


  • 会获取style标签中的文本


  • 不解析html更快捷性能好


面试攻略


这道题其实我也不太会,确实比较惭愧。但是学习了这道题给我的感觉就是了解这些基础api对了解框架源码有很多好处,就比如十二种节点类型。


相关文章
|
JavaScript 安全 前端开发
documen.write 和 innerHTML、innerText 的区别?
documen.write 和 innerHTML、innerText 的区别?
62 0
|
JavaScript 前端开发
ja中document.write和innerHTML、innerText 的区别
ja中document.write和innerHTML、innerText 的区别
45 0
nodeValue 属性
`nodeValue`属性用于获取节点的值。在元素节点中,它返回`undefined`;对于文本节点,它返回文本内容;在属性节点中,它返回属性的值。示例代码获取元素的第一个属性值。
|
5月前
document.write和innerHTML、innerText 的区别?
document.write和innerHTML、innerText 的区别?
nodeValue 属性
`nodeValue`属性用于获取节点的值。在元素节点中,它返回`undefined`;在文本节点中,返回文本内容;在属性节点中,返回属性值。例如,代码用于获取元素的第一个子节点的`nodeValue`。
|
6月前
|
安全
document.write和innerHTML和innerText的区别
document.write和innerHTML和innerText的区别
39 8
|
6月前
|
JavaScript 前端开发
document.write和innerHTML、innerText 的区别
document.write和innerHTML、innerText 的区别
54 5
|
6月前
|
安全
document.write和innerHTML、innerText的区别?
document.write和innerHTML、innerText的区别?
innerHTML和innerText的使用
innerHTML和innerText的使用
43 0
|
6月前
|
JavaScript 前端开发 UED
appendChild()
appendChild() 是 JavaScript 中 DOM 操作的方法之一,它用于将一个元素添加到另一个元素的子节点列表中。这个方法允许我们在文档的末尾或指定元素的后代中插入新的元素。例如,我们可以使用 append
48 2