Question

我在一个没有jQuery的环境中。我想找到包含特定文本的标签。 DOM看起来像这样：

<div>
    <div>
        <h2>contain certain text</h2>
    </div>
    <div>
    </div>
</div>

我正在使用XPath来找到这个div。

var linkBox = document.evaluate(
    '//h2[contains(text(),"certain text")]/../..', 
    document, 
    null, 
    XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, 
    null )

工作正常。直到我发现IE在文档中不支持XPath。现在我正在做getElementsByTagname('h2')，然后枚举整个集来检查innterText。

有更好的方法吗？

Answer 1

您关注的IE的最低版本是什么？

您可以使用Array.filter来缩小搜索范围。这是一个例子：

<强> HTML

<div>
    <div>
        <h2>contain certain text</h2>
        <h2>contain certain text</h2>
        <h2>YAY</h2>
        <h2>contain certain text</h2>
    </div>
    <div>
        <h2>contain certain text</h2>
        <h2>contain certain text</h2>
        <h2>contain certain text</h2>
    </div>
</div>

<强>的JavaScript

//turn nodelist into an array
//feel free to use getElementsByTagName or something similar here
var h2 = Array.prototype.slice.call(document.querySelectorAll("h2"));

//Array of matches
var matches = h2.filter(filterElements);

console.log(matches);

//Filter Function
function filterElements(element){
    return element.textContent === "YAY";
}

MDN页面上还有一个polyfill Array.filter。

EXAMPLE

Answer 2

即使您使用的是像XPath这样的库，它也不会产生魔法，而且它可能与您正在做的一样。

我认为你的问题“有更好的方法”是指完成任务的时间。我建议你做一些测试，比较使用你的方法和使用库方法所花费的时间。使用谷歌控制台可以很容易地测试：https://developer.chrome.com/devtools/docs/console#measuring-how-long-something-takes

JavaScript按文字查找元素

2 个答案: