spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / professional / chap6/ 2 To page 1To page 2To page 3To page 4To page 5To page 6current pageTo page 8To page 9
[previous] [next]

The Web Professional's Handbook: Document Object Models

Subject Matter Expert - Managed Services (PA)
Next Step Systems
US-PA-Wayne

Justtechjobs.com Post A Job | Post A Resume
Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs


Walking Through the DOM Tree

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

Accessing an 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.

document.getElementsByTagName('*') returns an array containing all elements in the document.

Not supported by IE 5 and 5.5 on Windows.

 


home / programming / professional / chap6/ 2 To page 1To page 2To page 3To page 4To page 5To page 6current pageTo page 8To page 9
[previous] [next]

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint

Created: March 11, 2003
Revised: March 28, 2003

URL: http://webreference.com/programming/professional/chap6/2