Return all child nodes from an HTML document

chemlight

Alright. I'm a php developer, working with JAVA. I've had some luck so far, to the point of being able to remove child nodes in my HTML page. What I need now is a way to return all child node's ids.

Example of my HTML

Expand|Select|Wrap|Line Numbers

 <div id="parent">

<span id="child1"></span>

<span id="child2"></span>

</div>

I've tried this:

Expand|Select|Wrap|Line Numbers

 document.getElementById('divError').innerHTML = '1';

$children = document.getElementById('parent').getChildNodes();

document.getElementById('divError').innerHTML = 'This Works';

without the $children = etc, divError is 'This Works', but when I try to return the child nodes, I only get 1. So, I don't know why, but my javascript is hanging up on that.

Again, what I need is the id of each child node returned.

Any help would be greatly appreciated.

chemlight

Well, I think I am getting somewhere...

I was able to get a return value using:

var x=document.getElementById('parent').childNodes;

When I print the variable, I get:

[object Node List]

I'm trying to figure out how to print the actual node list, and so right now I'm not sure whether or not it is returning the information I need.

Thanks again to anyone who can help.

chemlight

And again, I find myself trying to access an object, without knowing how.

I was able to get the length of the array, and I thought from there it would be easy. However when I tried to return an element of the array (whose length is 5) using:

document.getElementById('divError').innerHTML = x[x.length-1];

the result was:

[object Text]

So, I can iterate through the array easily enough, but I still need to know how to return the value from an object.

rnd me

document.getElementsByTagName("*") will find all the real tags, which is probably what you want.

there is no default property for every node.

you can use the default operator (||) to fetch something from each type of tag:

a basic "node report" type iteration dump:

Expand|Select|Wrap|Line Numbers

  
var tags = document.body.getElementsByTagName("*"), buff=[];

for(var i=0, mx=tags.length; i<mx;i++){

     var it = tags[i];

     buff[i] =  it.nodeName+" : "+ (it.text || it.value || it.textContent || it.innerText);

}
 
alert(buff.join("\n"));

chemlight

Thank you! I modified it to work with what I need, and I think I understand everything thats going on.

Here is what I used to return the id of the element:

Expand|Select|Wrap|Line Numbers

     var tags = document.body.getElementsByTagName("*"), buff=[];

    for(var i=0, mx=tags.length; i<mx;i++){

         var it = tags[i];

         buff[i] =  it.nodeName+" : "+ (it.id);

    }
 
    alert(buff.join("\n"));

it returned all the id's for the elements. Thank you again!

Return all child nodes from an HTML document

re: Return all child nodes from an HTML document

re: Return all child nodes from an HTML document

re: Return all child nodes from an HTML document

re: Return all child nodes from an HTML document

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about