Question

如果在执行代码时，document.querySelector在视口中可用textDocument，那么JS是否有可能仅使用给定的textDocument选择document.querySelectorAll('tagName').forEach( (e)=>{ if (e.textContent.includes('Delete')) { e.click(); } });的第一个元素？

我正在寻找一种没有以下代码的方式，因为它通过textContent显示所有相关的tagNames和过滤器，但我想选择他们按文字内容，而不是过滤。

NETBEAN_HOME\etc\netbeans.conf

Answer 1

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

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

Answer 2

没有CSS selector targeting on textContent。

此外，由于您的代码目前已编写，因此很容易获取第一个元素textContent includes此字符串，它始终为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 -->

document.querySelector通过textContent

2 个答案: