Question

我有一个像

这样的HTML代码

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

我想通过带有文字'TV'的documentObject找到这个span，例如getElementById等... getElementByText之类的东西。我知道这可以通过XPath / JQuery / Regex。

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

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

Answer 1

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

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

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

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

Answer 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/

根据文本内容查找html元素

2 个答案: