javascript - 獲取'id'屬性的第一級子項目

我是JavaScript新手。對於一個給定的'id'，我想查找它的一級兒童'id'值。考慮下面的代碼片段。javascript - 獲取'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的孩子是B，C，d 和B的孩子是E，F

我試圖同時使用的childNodes和孩子通話，並沒有工作，加上節點類型是不確定的

是否有人可以幫助解決這個問題，只用javascript代碼（無jQuery的）

謝謝， -SRI

來源

2016-03-08 srinivas yelamanchili

document.querySelectorAll（'＃id> div [id]'） –

你完全誤解了'for ... in'。這不像'爲... ...'。請參閱[爲什麼使用「for ... in」與數組迭代如此糟糕的主意？]（http://stackoverflow.com/q/500504/1529630） – Oriol

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

來源

2016-03-08 00:23:58 Hamms

「*我強烈建議你，而不是使用更傳統的循環*」。是的，一點沒錯。也可以使用'[] .forEach.call（inpId.childNodes，...）''。 – RobG

You _could _，but it's a bit of hack – Hamms

不是，數組方法（如[* forEach *]（http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype .foreach））是通用的，因此它們旨在用於其他類型的對象。將主機對象傳遞給* this *這樣的內置函數是有點冒險的，但只有IE 8和較低的關心以及對於它們來說，* forEach *無論如何都需要一個polyfill，因此避免了問題。 ;-) – RobG

如果你想在「ID」只是

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

也不該在循環使用...除非你知道你在做什麼，因爲有了這個循環，你還可以得到屬性，比如兒童數組的「長度」。在循環將用hasOwnProperty （谷歌它）

而且，學習最好的方法和調試JavaScript和DOM是使用DevTools。我喜歡Chrome的優惠，最...

來源

2016-03-08 00:26:44 Hutzlibu

javascript - 獲取'id'屬性的第一級子項目

回答

相關問題