通过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]

EDIT 我不能使用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用于var。实际上，“ let 是新的 var ”。

Answer 2

您可以使用简单的document.getElementsByClassName循环遍历for返回的HTMLCollection。 然后，使用每个元素的索引，即可轻松访问该元素。 您可以使用元素对象的nodeName或localName属性来获取其标签。

var s = document.getElementsByClassName("Class3");

let arr = [];

for(let i = 0; i <= s.length-1; i++){
 arr.push(s[i].localName)
}
console.log(arr)

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

Answer 3

使用此JavaScript代码

var s = document.querySelectorAll(".Class3");

var arr = [];
s.forEach((e, key) => {
    arr.push(e.nodeName)
})
 console.log(arr);