根据文本内容查找html元素

2023年10月9日 390次阅读

我有一个像html的代码

<div>
   <span>TV</span>
</div>

我希望通过带有文本’TV’的documentObject找到这个范围,比如getElementById等…类似于getElementByText.我知道通过XPath / JQuery / Regex可以实现.

但我需要它才能通过DOM对象模型.因为在我的上下文中只有DOM模型可用.
我看到几个答案：

> Finding an html element ID based on a text displayed
> jquery – find element that only has text and not any other html tag
> how to find element after some text with javascript?

但这些对我没有帮助,因为我只需要通过DOM模型.

最佳答案 假设文档格式良好,足以解析为适当的DOM对象树,您可以在不使用外部库的情况下遍历整个结构.根据结构的不同,您可能需要检查每个节点以查找所有匹配项,这可能会很慢.如果您可以访问任何类型的ID,则可以减少搜索范围并提高性能.

您需要的关键属性是每个DOM节点上的childNodes集合.从BODY(或其他一些容器)开始,您可以递归所有子节点.

This site非常基本,但显示了访问DOM元素的无依赖方法.请参阅“导航到某个元素的工具”一节.

我注意到你提到正则表达式作为查找元素的方法.正则表达式对于解析整个文档很差,但它们在评估单个节点的文本内容时非常有用(例如,部分匹配,模式匹配,不区分大小写等).正则表达式是JavaScript语言本身的一部分,并且已经如此十多年了.

点赞