有没有办法测试对附加元素的 css-selector 查询？答案

【问题标题】：Is there a way to test a css-selector query to an unappended element?有没有办法测试对附加元素的 css-selector 查询？
【发布时间】：2020-09-08 07:31:18
【问题描述】：

我有这个代码：

Element.prototype.queryTest = function(strQuery) {
 var _r;
 if (this.parentElement == null) {
  _r = Array.prototype.slice.call(document.querySelectorAll(strQuery)).indexOf(this);
 } else {
  _r = Array.prototype.slice.call(this.parentElement.querySelectorAll(strQuery)).indexOf(this);
 }
 return !!(_r+1);
}

我正在寻找某种方法来测试对未附加元素的查询。

我想更改第一个代码以使其正常工作：

var t = document.createElement("span");
t.classList.add("asdfg");
console.log(t.queryTest("span.adsfg"));

如果有一种方法可以检测元素是否未附加，我可以创建一个新的临时未附加元素并将目标元素附加到临时元素以测试 css-selector 查询。有没有办法检测元素是否没有附加喷射？即使在释放临时父元素之后，目标元素是否仍可访问？我已经在 Chrome 上测试过，它可以访问，但我不知道 Firefox 是否是这种情况。

我知道我可以使用 document.querySelectorAll("*") 来获取节点列表，但是... 将这个 NodeList 转换为数组的过程对 CPU 的要求不是很高吗？这就是为什么我不喜欢使用这种方式。

提前致谢。

【问题讨论】：

标签： javascript dom css-selectors selectors-api

【解决方案1】：

已经有一个原生的Element.prototype.matches 方法可以做到这一点：

const el = document.createElement('span');
el.classList.add('test');
console.log(el.matches('span.test'));

注意要检查一个节点是否连接，有Node.prototype.isConnected getter。

【讨论】：

我不知道。非常感谢。

【解决方案2】：

我做到了。

Element.prototype.querySelectorTest = function(strQuery) {
 var _r;
 if (this.parentElement != null) {
  _r = Array.prototype.indexOf.call(this.parentElement.querySelectorAll(strQuery),this);
 } else if (this == document.documentElement) {
  _r = ((document.querySelector(strQuery) == this)-1);
 } else {
  _r = ((this == document.createElement("i").appendChild(this).parentElement.querySelector(strQuery))-1);
 }
 return !!(_r+1);
}

我改变了它检查节点列表的方式。我将函数重命名为更合适的名称。

如果目标元素是根元素，则无需进行 querySelectorAll。如果您将未附加的元素附加到临时元素以测试子元素，则不会丢失引用（如果有一个变量值）。

这不是我的母语，所以请考虑一下。

【讨论】：