| home / programming / professional / chap6/ 2 |    [previous] [next] |
|
|
|
The W3C DOM offers several properties, such as parentNode and firstChild, that allow you to access parents, siblings, or children of a node.
Let's take another look at part of the DOM tree of our example page and take the <a> element as our starting point. Its parentNode is the <p> element; its previousSibling is the text node 'The'; its nextSibling is the text node 'offers Web developers access to'. As for child nodes, since the <a> element has only one (the text node '), the properties firstChild, lastChild, and childNodes[0] all three relate to this single node.
You can make the DOM references as complicated as you like:
document.lastChild.childNodes[1].nextSibling.firstChild
is perfectly valid code. Nonetheless this sort of coding will quickly lead to problems. First of all it's not quite clear to which element this line refers, which may become a problem when updating the code. Secondly, the W3C DOM is meant to make changes in the document structure. After a few changes, the line above might refer to an element different from the one you originally meant.
Here are the DOM properties that can be used for navigating the tree. In all examples, x is a reference to the <a> element from the HTML example above.
| Property |
Description |
Example |
| childNodes[] |
Returns an array with all child nodes of the element |
x.childNodes[0] is the text child node "W3C DOM" |
| firstChild |
Accesses the first child of the element, in document order |
x.firstChild is also the text node "W3C DOM" |
| lastChild |
Accesses the last child of the element, in document order |
x.lastChild is once again the text node ">W3C DOM", since x doesn't have any other children |
| nextSibling |
Accesses the next sibling of the element, in document order |
x.nextSibling is the text node " offers…to" |
| previousSibling |
Accesses the previous sibling of the element, in document order |
x.previousSibling is the text node " The" |
| parentNode |
Accesses the parent of the element |
x.parentNode is the <p> element |
The W3C DOM offers two important methods for immediately gaining access to the element you need. The first and most important one is the getElementById() method that we already used in our previous DHTML example.
document.getElementById('w3cdomtest')
This accesses the element with id attribute "w3cdomtest". The position of this element in the DOM tree doesn't matter, so you are absolutely certain to reach the element (so long as it exists), wherever it currently is.
Another useful method is getElementsByTagName(). This returns an array of the elements with the tag name you ask for.
var x = document.getElementsByTagName('em');
After this script statement, x is an array holding all <em> elements in the document. Since there is only one <em> in our example, x[0] is the only available element in this array.
The getElementsByTagName() method can be used on element nodes as well as the document node. For instance:
document.getElementById('w3cdomtest').getElementsByTagName('em')
creates an array of all <em> elements that are descendants of the element with id attribute "w3cdomtest".
| Method |
Description |
| getElementById('w3cdomtest') |
Accesses the element with id attribute "w3cdomtest". |
| getElementsByTagName('em') |
Returns an array containing
all <em> elements that are descendants
of the current document or element node. |
| home / programming / professional / chap6/ 2 | [previous] [next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 11, 2003
Revised: March 28, 2003
URL: http://webreference.com/programming/professional/chap6/2
