javascript - Get first level child items with 'id' attribute

Question

I am new to javascript. For a given 'id' I want to find all it's 1st level child 'id' values. Consider the code snipper below.

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>

Here, the children of A are B,C,D and children of B are E,F

I tried using both childNodes and children calls and didn't work, plus the nodeType is undefined

Can someone please help fix this, using only javascript code (no jQuery)

Thanks, -Sri

You completely misunderstood `for...in`. It's not like `for...of`. See [Why is using “for…in” with array iteration such a bad idea?](http://stackoverflow.com/q/500504/1529630) — Oriol, Mar 08 '16 at 00:41

Hamms · Answer 1 · 2016-03-08T00:32:00.900

1

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

You can use those names to get the values; for example,

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

However! Note that childNodes is actually a NodeList, not an Array, and thus has somewhat unexpected behavior when using for .. in ...

I strongly recommend you instead use a more traditional for loop:

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

edited Mar 08 '16 at 00:32

answered Mar 08 '16 at 00:23

Hamms

5,016
21
28

1

"*I strongly recommend you instead use a more traditional for loop*". Yes, absolutely. Could also use `[].forEach.call(inpId.childNodes, ...)`. – RobG Mar 08 '16 at 00:51
You _could_, but it's a bit of a hack – Hamms Mar 08 '16 at 00:58
1

Not really, Array methods (such as [*forEach*](http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.foreach)) are generic, so they're intended to be used on other types of object. It's a little risky passing a host object to a built–in function as *this*, but only IE 8 and lower care about that and for them, *forEach* needs a polyfill anyway so issue avoided. ;-) – RobG Mar 08 '16 at 01:15

score 0 · Answer 2 · answered Mar 08 '16 at 00:26

If you want the "id" just

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

also don't use the for in loop ... unless you know what your doing, because with this loop you also get propertys like "length" of the children array. for in loop goes with a hasOwnProperty (google for it)

Also, best way to learn and debug Javascript and Dom is to use DevTools. I like the one Chrome offers, the most ...

javascript - Get first level child items with 'id' attribute

2 Answers2