是否可以测试对未附加元素的CSS选择器查询？

Question

我有此代码：

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查询。有没有一种方法可以检测是否未附加元素jet？即使释放了临时父元素，目标元素也可以访问吗？我已经在Chrome上对其进行了测试，并且可以访问，但是我不知道Firefox是否会出现这种情况。

我知道我可以使用document.querySelectorAll（“ *”）来获取节点列表，但是...不太耗费CPU权将该NodeList转换为数组的过程吗？这就是为什么我不想使用这种方式的原因。

提前感谢。

Answer 1

我做到了。

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);
}

我更改了检查nodeList的方式。我将该函数重命名为一个更合适的名称。

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

---

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

Answer 2

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

Element.prototype.matches

注意，要检查是否已连接节点，请使用

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

吸气剂。