javascript - 通过 CSS 选择器返回 DOM 元素

Question

假设我有这些 HTML 行:

<div id="ID1" class="Class1 Class3"></div>
<p id="ID2" class="Class2 Class3"></p>

我希望能够在给定 CSS 选择器或 TagName 的情况下返回数组中的 HTML 元素，这就是我目前所拥有的:

const selectors = document.getElementsByClassName("Class3");

let arr = [];
while (selectors) {
  arr.push(selectors);
  selectors = selectors.parentNode;
}

console.log(arr);

<div id="ID1" class="Class1 Class3"></div>
<p id="ID2" class="Class2 Class3"></p>

此代码有效并返回 HTML 元素，但我如何更改代码以使其只返回 HTML 元素(div 和 p)，而不是 HTML 元素以及 CSS 选择器 - 如果可能的话？

所以输出是:[div, p]

编辑 我不能使用 document.querySelector/document.querySelectorAll 或任何库`

Answer 1

也许你想做一个 for of 并克隆元素以移除属性。像这样...

const selectors = document.getElementsByClassName("Class3");
const arr = [];
for (let selector of selectors) {
  const element = selector.cloneNode();
  for (let i = element.attributes.length - 1; i >= 0; i--) {
    element.removeAttribute(element.attributes[i].name);
  }
  arr.push(element);
}
console.log(selectors, arr);

请注意，反向遍历顺序很重要

输出

希望对您有所帮助。

提示:现在对变量使用const 和let。实际上，“let 是新的 var”。