Question

我是javascript的新手。对于给定的ID＆＃39;我想找到它所有的一级孩子＆＃39; id＆＃39;值。考虑下面的代码片段。

＆＃13;

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

＆＃13;

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

＆＃13;

这里，A的孩子是B，C，D B的孩子是E，F

我尝试使用childNodes和children调用，但没有工作，而且nodeType未定义

有人可以帮助解决这个问题，只使用javascript代码（没有jQuery）

谢谢， -SRI

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

Answer 2

如果你想要“id”只是

for (var i=0; i < node.children.length;i++) {
  var child=node.children[i]
  console.log(child.id)
}

也不要使用for in循环......除非你知道你在做什么，因为有了这个循环，你也会得到像children数组的“length”这样的属性。 for循环使用hasOwnProperty （google for it）

此外，学习和调试Javascript和Dom的最佳方法是使用DevTools。我最喜欢Chrome提供的那个......

javascript - 获取带有＆＃39; id＆＃39;的第一级子项属性

2 个答案: