javascript - 获取具有 'id' 属性的一级子项

Question

我是 JavaScript 的新手。对于给定的“id”，我想找到它的所有一级子“id”值。 考虑下面的代码片段。

function getFirstLevelChildIds(inpId) {
    var eleOut = document.getElementById('out');
    
    console.log("NODE");
    eleOut.innerHTML += '<br />NODE:'
    for(var node in inpId.childNodes) {
      console.log("node" + node);
      console.log("nodeType" + node.nodeType);
      eleOut.innerHTML += '<br />' + "node -> " + node;
    }

    console.log("CHILD");
    eleOut.innerHTML += '<br />CHILD:'
    for(var child in inpId.children) {
      console.log("child -> " + child);
      var eleOut = document.getElementById('out');
     eleOut.innerHTML += '<br />' + "child -> " + child;
    }

}

var rootID = document.getElementById("A");
getFirstLevelChildIds(rootID);
                    

<div id="A">New York
    <div id="B" >Jersey City
        <div id="E">Toronto</div>
        <div id="F">Boston</div>
    </div>
    <div id="C">Durango
        <div id="G">Atlanta</div>
        <div id="H">Milwaukee</div>
        <div id="I">Miami</div>
    </div>
    <div id="D">Greenville
        <div id="J">Madison</div>
        <div id="K">Washington</div>
    </div>
</div>

<div id="out"></div>

在这里，A的 child 是B,C,D B的 child 是E，F

我尝试同时使用 childNodes 和 children 调用但没有成功，而且 nodeType 未定义

谁能帮忙解决这个问题，只使用 javascript 代码(不使用 jQuery)

谢谢， -斯里

Answer 1

The JavaScript for .. in .. statement iterates over the property names on the given object, not the values of those properties.

您可以使用这些名称来获取值；例如，

for (var i in inpId.childNodes) {
  var node = inpId.childNodes[i];
  console.log("node" + node);
  console.log("nodeType" + node.nodeType);
  eleOut.innerHTML += '<br />' + "node -> " + node;
}

但是!注意 childNodes 实际上是一个 NodeList ，而不是数组，因此在使用 for .. in .. 时会有一些意外的行为。

我强烈建议您改用更传统的 for 循环:

for (var i = 0; i < inpId.childNodes.length; i++) {
  var node = inpId.childNodes[i];
  console.log("node" + node);
  console.log("nodeType" + node.nodeType);
  eleOut.innerHTML += '<br />' + "node -> " + node;
}