Question

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

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

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

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

但现在child中的每个children都不是element，而是node，因此，我不能对它们使用getAttribute('');

如何将Node“投射”到Element？或者有更好的方法吗？

Answer 1

我如何＆＃34;演员＆＃34;节点到元素？

你不能。

元素是节点的子集。

如果它还没有元素，那么你就无法把它变成一个。

考虑：

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

您有两个子节点。文本节点"Hello, "和强元素节点。

将"Hello, "视为元素是没有意义的。

考虑使用children代替childNodes。它只获取元素子项。

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

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

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

Answer 2

您说您要选择具有特定属性的所有孩子。因此，使用querySelectorAll使用属性选择器选择它们。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用children来访问所有基于HTML的节点：

document.querySelector("...my selector...").children

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

3 个答案: