根据文本内容查找 html 元素答案

【问题标题】：Finding an html element based on text content根据文本内容查找 html 元素
【发布时间】：2012-01-25 20:43:19
【问题描述】：

我有一个像

这样的 html 代码

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

我想通过具有文本“TV”的 documentObject 找到这个 span，例如 getElementById 等...类似于 getElementByText。我知道通过 XPath/JQuery/Regex 是可能的。

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

但是这些对我没有帮助，因为我只需要通过 DOM 模型来获取它。

【问题讨论】：

标签： html dom

【解决方案1】：

假设文档的格式足够好，可以解析为适当的 DOM 对象树，您可以在不使用外部库的情况下遍历整个结构。根据结构，您可能必须检查每个节点才能找到所有匹配项，这可能会很慢。如果您可以访问任何类型的 ID，则可以缩小搜索范围并提高性能。

您需要的关键属性是每个 DOM 节点上的 childNodes 集合。从 BODY（或其他容器）开始，您可以递归遍历所有子节点。

This site 非常基础，但展示了访问 DOM 元素的无依赖关系的方法。请参阅“导航到特定元素的工具”部分。

我注意到您提到正则表达式是一种查找元素的方法。正则表达式在解析整个文档时效果不佳，但它们在评估单个节点的文本内容时非常有用（例如部分匹配、模式匹配、不区分大小写等）。正则表达式是 JavaScript 语言本身的一部分，并且一直如此十多年了。

【讨论】：

【解决方案2】：

我唯一能想到的是这样的：

function getElementByTextContent(text)
{
    var spanList = document.getElementsByTagName("span");
    for (var i = 0, len = spanList.length; i < len; i++)
    {
        if(spanList[i].textContent === text) // use .innerHTML if you need IE compatibility
        return spanList[i]
    }
}

当然它假设您只搜索<span> 元素，但这可能对您有用。这里还有一个演示：

http://jsfiddle.net/uATdG/

【讨论】：