Getting all the child elements of a parent div

Question

I'm trying to get the IDs and Classes of all children elements in a parent DIV.

I've tried the following:

The HTML

 var children = [].slice.call(document.getElementById('container').getElementsByTagName('*'), 0); document.getElementById('output').innerHTML = children.join('\\</br>'); 

 <div id="container"> <div id="A"></div> <div id="B"></div> <div id="C"></div> <div class="D"></div> </div> <div id="output"></div> 

But the output is:

[object HTMLDivElement]
[object HTMLDivElement]
[object HTMLDivElement]
[object HTMLDivElement]

Any ideas of what I am doing wrong here please?

JSFiddle

Answer 1

I think that you would want this...

 var children = [].slice.call(document.getElementById('container').getElementsByTagName('*'),0); var elemnts = new Array(children.length); var arrayLength = children.length; for (var i = 0; i < arrayLength; i++) { var name = children[i].getAttribute("id")||children[i].getAttribute("class"); elemnts[i]=name; } document.getElementById('output').innerHTML = elemnts.join('\\</br>'); 

 <div id = "container"> <div id = "A"></div> <div id = "B"></div> <div id = "C"></div> <div class = "D"></div> </div> <div id = "output"></div> 

Answer 2

Here is a way to achieve this using minimal changes to your code. Mainly, you are missing some sort of a method to extract ids/classes from your results. For example, here is how to do it using Array.prototype.map() :

 // build children var children = [].slice.call(document.getElementById('container').getElementsByTagName('*'),0); // build ids and classes var idsAndClasses = children.map(function(child) { return JSON.stringify({ id: child.id, classes: child.classList }); }); // output ids and classes document.getElementById('output').innerHTML = idsAndClasses.join('\\</br>'); 

 <div id = "container"> <div id = "A"></div> <div id = "B"></div> <div id = "C"></div> <div class = "D"></div> </div> <div id = "output"></div> 

OUTPUT:

{"id":"A","classes":{}}
{"id":"B","classes":{}}
{"id":"C","classes":{}}
{"id":"","classes":{"0":"D"}}

Answer 3

A good ressource is MDN ParentNode.children .

No need to hack array function like [].slice.call or other things, only simple JS and DOM access.
Easy and simple.

When you have an HTMLElement you can access directly to the properties or attributes you want by:
- myElement.id to get the id
- myElement.className to get the all the classes

And this is exactly what you have wen you call children , an HTMLCollection !

 var output = document.getElementById('output') var father = document.getElementById("container"); var sons = father.children; var len = sons.length; var i = 0; for(i ; i < len ; i++){ var child = sons[i]; // we access directly to the attributes // +---------------------- // vv output.innerHTML += '<div>' + child.id + ' : ' + child.className + '</div>'; // do what you want / need with them. var toShow = child.id + '' + child.className; output.innerHTML += '<div>' + toShow + '</div>' output.innerHTML += '<div>---</div>' } 

 <div id="container"> <div id="A"></div> <div id="B"></div> <div id="C"></div> <div class="D"></div> </div> <div id="output"></div> 

Answer 4

Set up our HTML:

<div id="container">
    <div id="A"></div>
    <div id="B"></div>
    <div id="C"></div>
    <div class="D"></div>
</div>
<div id="output"></div>

Target our children:

var children = document.getElementById('container').getElementsByTagName('*');

Then loop over each child element and output to the page:

[].forEach.call(children, function (child) {
        if(child.id){
            document.write(child.id + "<br>");
        } else if(child.className) {
            document.write(child.className + "<br>");
        } else {
            document.write("this element has no class or id <br>");
        }
    });

Answer 5

Thank you all for your comments. Based on your examples and suggestions, I produced the following. it works except for the classnames.

var children = document.getElementById('container').getElementsByTagName('*');

var arr =[];
for (i = 0; i < children.length-1; i++){
    if(children[i].id){
        arr.push(children[i].getAttribute("id"));
    } else if (children[i].className){
        arr.push(children[i].getAttribute("class"));
    }
}

  document.getElementById('output').innerHTML = arr;