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或任何库`

标签： javascripthtmlcss

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

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

输出

希望能帮助到你。

Protip：现在使用constandlet用于 vars。实际上，“ let是新的var ”。