JQuery获取html元素文本内容的text方法与html方法
程序员文章站
2022-06-07 08:41:26
...
备忘一下,在前端开发的时候使用JQuery很常用的是获取某元素内部的值。JQuery为这个操作提供了便捷的方法,html()和text()。
两个方法的差别JQuery文档都有。之前我一直认为获取单一元素内部的文本,两个方法作用是一样的。比如获取<p>哈哈哈哈</p>内部的文本,调用两个方法没有什么区别。
假如获取<p>哈哈哈哈<span>嘿嘿嘿</span></p>时,两个方法才能体现出区别,但是似乎一直没想到什么场景会用到text()方法来获取。
今天忽然发现一个问题,也发觉了text()方法的作用。假如元素内容为<p> </p>,使用html()方法获取得到的值是原封不动的 ,而使用text()方法则会获得一个空格。这才让我发现了text()的作用。jquery代码中html()方法调用的是innerHTML方法,而text()方法则是递归遍历子节点获取nodeType为3或4节点的nodeValue。所以才造成了两个方法取值上的区别。
xml的dom都快忘光了。哎。
还有就是,也知道了text()方法应用在多元素嵌套中的作用。例如在一个<div>哈哈哈<span>嘿嘿</span></div>。我想,可能很多控制显示样式的标签可以过滤掉,这样text方法应该可以派上用场。
两个方法的差别JQuery文档都有。之前我一直认为获取单一元素内部的文本,两个方法作用是一样的。比如获取<p>哈哈哈哈</p>内部的文本,调用两个方法没有什么区别。
假如获取<p>哈哈哈哈<span>嘿嘿嘿</span></p>时,两个方法才能体现出区别,但是似乎一直没想到什么场景会用到text()方法来获取。
今天忽然发现一个问题,也发觉了text()方法的作用。假如元素内容为<p> </p>,使用html()方法获取得到的值是原封不动的 ,而使用text()方法则会获得一个空格。这才让我发现了text()的作用。jquery代码中html()方法调用的是innerHTML方法,而text()方法则是递归遍历子节点获取nodeType为3或4节点的nodeValue。所以才造成了两个方法取值上的区别。
xml的dom都快忘光了。哎。
还有就是,也知道了text()方法应用在多元素嵌套中的作用。例如在一个<div>哈哈哈<span>嘿嘿</span></div>。我想,可能很多控制显示样式的标签可以过滤掉,这样text方法应该可以派上用场。