Walking The Dom Tree? Childnodes Etc?

[davej]

I have used getElementById() with .value and .innerHTML and document.write() but what is this ChildNode stuff used for? What is 'walking the DOM tree' and when do you need to do that? Thanks. http://www.w3schools...dom_obj_all.asp

[justsomeguy]

Every element in a web page is represented by a node in the DOM. The document node is the base node for the page, and every other node is a descendant of the document node. The html node is a direct child of the document node, and the head and body nodes are direct children of the html node. A div inside the body would be a child node of the body node. The childNodes property of an element is an array that lists all of the direct children of the node, in the order that they appear in. Nodes can also have parents, siblings, etc. The "DOM tree" is the structure of all nodes on the page, with the root of the tree being the document node. "Walking the DOM tree" refers to using things like childNodes, firstChild, lastChild, nextSibling, etc to traverse down the tree starting at the document node. The document node is also a child of the window object (window isn't really a node, it represents the actual browser window instead of the content inside of it). In keeping with the tree metaphor, a node without children is referred to as a leaf node. In contrast with biological trees, when you draw a tree structure like this the root node is usually drawn at the top, and the children extend below it. A tree only has one root node, in this case it's the document node.

[davej]

Ok thanks, I sort of get the basic idea, but when would you really need to do this? And/or what would be the most common situation when you would do this? Thanks again.

[eTianbun]

U may have a

<div>

element, with

id='con'

, with two elements (children):

<h1> and <p>

. Instead of given those two tags(children) deferent ID's and using:

document.getElementById

to access each of them and change their content, you can do:

div=document.getElentById('con'); //access parent of the two tagsdiv.childNodes[0].innerHTML="Heading" access 1st child of div tag and change it content.div.childNodes[1].innerHTML='paragraph' //access 2nd child and change it content 

there are beta way of using it, but this is just an example.

[thescientist]

Ok thanks, I sort of get the basic idea, but when would you really need to do this? And/or what would be the most common situation when you would do this? Thanks again.

have you looked into something like the jquery library? this is just a start to where "walking the DOM" methods would be handy.http://api.jquery.com/category/traversing/

[Ingolme]

Those javascirpt methods are there in order to allow you to access any nodes, whether or not they're identified by classes or IDs.

[boen_robot]

there are beta way of using it, but this is just an example.

What are alpha way then?

[justsomeguy]

Stay Alpha, baby! Don't hang around with those betas and gammas!

[eTianbun]

What are alpha way then?

i dont get you! Meaning?

[boen_robot]

i dont get you! Meaning?

Seriously? OK... let me explain... You said "there are beta way of using it". There are at least two errors in this sentence: 1. "beta" is not the same thing as "better" (which I'm assuming is what you were after). If you were trying to sound "gangsta", the word "beta" is the worst choice of word to say in "gangsta" speech. The word "beta" is really the Greek letter β, which in the context of programming is used to symbolize stability status. Normally, you have "alpha" (another Greek letter - α) which means "very unstable", then "beta" which means "more or less stable", then "RC" (short for "Release Candidate") which means "should be stable", and finally "stable".2. "are" implies plural, i.e. there should be ways of using it rather than a single way. Alternatively, you could say "is" instead of "are" and keep the singular.Read my post again with these in mind and you'll see it.

[davej]

div=document.getElementById('con'); //access parent of the two tagsdiv.childNodes[0].innerHTML="Heading" access 1st child of div tag and change it content.div.childNodes[1].innerHTML='paragraph' //access 2nd child and change it content 

Thanks! I will try this.