使用 textContent 的 document.querySelector

Question

使用JS中的document.querySelector是否可以仅通过给定的textDocument选择第一个元素，如果当代码执行时textDocument在视口上可见？

---

我正在寻找一种方法不使用以下代码，因为它会输出所有相关的标签名称并通过textContent进行过滤，但我想通过文本内容进行选择，而不是过滤。

document.querySelectorAll('tagName').forEach( (e)=>{
    if (e.textContent.includes('Delete')) {
        e.click();
    }
});

- user8551674

---

你是想写更短的代码，比如在jQuery中使用$("tagName:contains(Delete)").click()，还是担心自己筛选内容时的性能问题？（我认为即使.querySelectorAll()在幕后直接支持这个功能，它仍然需要迭代指定类型的所有元素。） - nnnnnn

嗯，我只想让JS像我使用“CTRL+F”一样进行搜索，并使用提供的确切“textContent”使用第一个元素，然后对其进行操作……如果已经完成，我完全不关心代码的持久性或性能。 :) - user8551674

Answer 1

目前不存在 CSS选择器定位textContent。

另外，根据您当前编写的代码，很容易抓取第一个textContent 包含此字符串的元素，它将始终是document.documentElement或null。

您应该使查询更加严格。

您可能可以构建一个 XPath查询来达到这个目的，但这会比自己迭代所有节点要慢。

因此，如果性能是一个问题，那么 TreeWalker就是正确的方法。

这里有一个函数，可以通过textContent抓取元素。
它具有不同的可选参数，可以让您告知

• 如果查询应该是严格的（默认为“string === textContent”），
• 从哪个节点开始搜索（默认为document.documentElement）
• 如果您只对没有子元素的元素感兴趣

function getElementByTextContent(str, partial, parentNode, onlyLast) {
  var filter = function(elem) {
    var isLast = onlyLast ? !elem.children.length : true;
    var contains = partial ? elem.textContent.indexOf(str) > -1 :
      elem.textContent === str;
    if (isLast && contains)
      return NodeFilter.FILTER_ACCEPT;
  };
  filter.acceptNode = filter; // for IE
  var treeWalker = document.createTreeWalker(
    parentNode || document.documentElement,
    NodeFilter.SHOW_ELEMENT, {
      acceptNode: filter
    },
    false
  );
  var nodeList = [];
  while (treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
  return nodeList;
}
// only the elements whose textContent is exactly the string
console.log('strict', getElementByTextContent('This should be found'))
// all elements whose textContent contain the string (your code)
console.log('partial', getElementByTextContent('This should', true))
// only the elements whose textContent is exactly the string and which are the last Element of the tree
console.log('strict onlyLast', getElementByTextContent('This should be found', false, null, true))

<p><span>This should be found</span></p>
<span>This should only in partial mode</span><br>
<span>This must not be found</span>
<!-- p should not be found in onlyLast mode -->

- Kaiido

Answer 2

不，没有。document.querySelector只能接受一个描述一个或多个用逗号分隔的CSS选择器的字符串参数。您不能为document.querySelector提供textDocument参数。

您必须以不同的方式检查节点的内容，其中一种方法是您在问题中描述的方式。

- Govind Rai

---

同样的答案。您不能通过文本内容选择它们。您当前的方法是正确的。 :) 我希望它可以更短，但正如@nnnnnn所说，“即使.querySelectorAll()直接支持这一点，它仍然需要在幕后迭代所有元素。” - Govind Rai