如何在JavaScript中获取具有特定属性的所有子元素

Question

我有一个从这个表达式中检索到的对象:

const element = document.querySelector("...my selector...");

我需要获得具有某些属性的所有子元素,我知道获得所有孩子的唯一方法是:

const children = Array.from(element.childNodes);

但现在每个childin children都不是一个元素,而是一个节点,因此,我无法使用getAttribute('')它们;

我如何"投" Node到一个Element？,或者有更好的方法吗？

Answer 1

如何将节点"转换"为元素？

你不能.

元素是节点的子集.

如果它已经不是元素,那么你就不能把它变成一个元素.

考虑:

<div>Hello, <strong>World</strong></div>

你有两个子节点.文本节点"Hello, "和强元素节点.

将其"Hello, "视为一种元素是没有意义的.

考虑使用children而不是childNodes.它只获取元素子元素.

我需要获得具有某些属性的所有子元素

在这种情况下,你可能最好只使用一个选择器,它首先得到你.除了现有的选择器之外,您还需要一个子组合器和一个属性选择器.然后你需要用来All获得多个结果:

document.querySelectorAll("...my selector... > [someAttribute]"

Answer 2

您说您想选择具有特定属性的所有子项。因此，使用属性选择器通过 querySelectorAll 选择它们。

var elems = document.querySelectorAll("#theParentSelector > [theChildsAttribute]")
console.log(elems.length)
Array.from(elems).forEach( function (el) {
   console.log(el.getAttribute("theChildsAttribute"))
});

<div id="theParentSelector">
  <div theChildsAttribute="1">Foo 1</div>
  <div>Bar</div>
  <div theChildsAttribute="2">Foo 2</div>
  <div theChildsAttribute="3">Foo 3</div>
</div>