欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JQuery获取html元素文本内容的text方法与html方法

程序员文章站 2022-06-07 08:41:26
...
备忘一下,在前端开发的时候使用JQuery很常用的是获取某元素内部的值。JQuery为这个操作提供了便捷的方法,html()和text()。
两个方法的差别JQuery文档都有。之前我一直认为获取单一元素内部的文本,两个方法作用是一样的。比如获取<p>哈哈哈哈</p>内部的文本,调用两个方法没有什么区别。

假如获取<p>哈哈哈哈<span>嘿嘿嘿</span></p>时,两个方法才能体现出区别,但是似乎一直没想到什么场景会用到text()方法来获取。

今天忽然发现一个问题,也发觉了text()方法的作用。假如元素内容为<p>&nbsp;</p>,使用html()方法获取得到的值是原封不动的&nbsp;,而使用text()方法则会获得一个空格。这才让我发现了text()的作用。jquery代码中html()方法调用的是innerHTML方法,而text()方法则是递归遍历子节点获取nodeType为3或4节点的nodeValue。所以才造成了两个方法取值上的区别。

xml的dom都快忘光了。哎。

还有就是,也知道了text()方法应用在多元素嵌套中的作用。例如在一个<div>哈哈哈<span>嘿嘿</span></div>。我想,可能很多控制显示样式的标签可以过滤掉,这样text方法应该可以派上用场。