Question

我正在尝试获取元素子元素的属性……类似这样：

<div id="mydivs">
  <div name="mydiv1" name="format1">

  </div>
  <div name="mydiv2" format="format2">

  </div>
</div>


var parent = document.getElementById('mydivs');

var children = parent.childNodes;

for (let child of children) {
  console.log(child)
  console.log(child.attributes)
}

child.atrribute返回undefined

JsFiddle：https://jsfiddle.net/8tdac5fn/

编辑：另一种选择是使用children代替childNodes

var parent = document.getElementById('mydivs');
var children = parent.children;

Answer 1

parent.childNodes将包含文本节点，这就是为什么获取undefined的原因，因此您可以首先检查nodeType是否为1，即Node.ELEMENT_NODE。

然后，您可以在数组中使用扩展语法来创建属性节点的数组，以便可以使用forEach循环。

var parent = document.getElementById('mydivs');
var children = parent.childNodes;

for (let child of children) {
  if (child.nodeType === 1) {
    [...child.attributes].forEach(({name,value}) => {
      console.log(`${name} - ${value}`);
    })
  }
}

<div id="mydivs">
  <div name="mydiv1" name="format1"></div>
  <div name="mydiv2" format="format2"></div>
</div>

使用JavaScript获取childNode属性

1 个答案: