21.4. Traversing a Document's Nodes

Using the JavaScript bindings, it is fairly trivial to navigate through a document's nodes, as demonstrated in the examples that follow.

Example: Navigating and Reporting a Document's Object Model

This example navigates through a document's nodes and returns the document's DOM.

Source

This example uses the document example from earlier in the chapter with scripting necessary to navigate the DOM:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>DOM Walk and Display</title>
<style type="text/css"> div.div1 { background-color: #999999; } div.div2 { background-color: #BBBBBB; } table, table * { border: thin solid black; } table { border-collapse: collapse; } td { padding: 5px; } </style> <script type="text/JavaScript"> var s = new String(); // Add node's children to the listing (String s) function showChildren(node,lvl) { // Only track elements (1), text (3), and the document (9) if ( node.nodeType == 1 || node.nodeType == 3 || node.nodeType == 9 ) { // Add dashes to represent node level for (var x = 0; x < lvl; x++) { s = s + "--"; } // Report first 20 chars for text nodes if ( node.nodeType == 3 ) { mynodeType = node.nodeValue; if (mynodeType.length > 20) { mynodeType = mynodeType.slice(0,16) + "..."; } } else { // Report "Element/Tag" for elements mynodeType = "Element/Tag"; } s = s + "+ " + node.nodeName + " (" + mynodeType + ")\n"; // If the node has children, ...

Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.