在前端开发中,我们经常会使用getElementsByTagName()
方法来获取文档中指定标签名的所有元素,然而你可能不知道它还有一个等效的方法document.getElementsByTagName("*")
,它可以获取所有的文本节点。这些文本节点包含了HTML标记中的所有文本和注释。
textNodes是什么?
在DOM树中,文本节点是元素节点的一个子节点,它存储着文本字符串。例如,在以下HTML代码中:
----- -------- ---------- ------
<p>
元素节点将会有一个子节点——文本节点,其中包含了“Hello World!”这个字符串。
使用textNodes
从整个文档中获取所有的文本节点非常容易,只需使用document.getElementsByTagName("*")
方法,并遍历返回的NodeList即可。如下所示:
----- ------------ - ----------------------------------- --- ---- - - -- - - -------------------- ---- - ----- ----------- - ---------------- -- --------------------- --- --------------- - ------------------------------------- - -
在上面的代码中,我们首先使用getElementsByTagName("*")
获取了所有的元素节点和文本节点,然后通过遍历NodeList,筛选出所有文本节点并打印出它们的内容。
另外,如果你只需要获取特定元素节点下的文本节点,可以使用element.getElementsByTagName("*")
方法,其中element
是一个元素节点。例如,以下代码将会获取<div>
元素节点下的所有文本节点:
----- ---------- - ------------------------------ ----- --------- - ------------------------------------- --- ---- - - -- - - ----------------- ---- - ----- ----------- - ------------- -- --------------------- --- --------------- - ------------------------------------- - -
指导意义
了解getElementsByTagName("*")
等效为textNodes这个特性有助于我们更好地理解DOM树结构和节点类型,同时也能够提高我们的代码效率。在实际开发中,如果需要对文本节点进行操作或者统计页面中文本内容的数量,就可以使用上述方法。
总之,深入了解JavaScript和DOM API是成为优秀前端工程师必须要掌握的技能之一。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/12846