Jump to content

Walking The Dom Tree? Childnodes Etc?


davej
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Edited by eTianbun
  • Like 1
Link to comment
Share on other sites

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/
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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. Edited by davej
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...