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

时间:2016-03-08 00:17:02

标签: javascript

我是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);
                    
&#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;
&#13;
&#13;

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

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

有人可以帮助解决这个问题,只使用javascript代码(没有jQuery)

谢谢, -SRI

2 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:0)

如果你想要“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提供的那个......