通过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现在瓦尔。 实际上，“ 让是新的变量 ”。

Answer 2

您可以使用简单的for循环遍历document.getElementsByClassName返回的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);