Slide 14.13: HTML DOM accessing nodes

HTML DOM Accessing Nodes

Accessing Nodes
DOM is able to access every node in an HTML document in three ways:

By using the getElementById method
By using the getElementsByTagName method
By navigating the node tree, using the node relationships

The getElementById Method
The getElementById method returns the element with the specified ID.

The script shows how to locate a <p> element in the document by using the getElementById method. The method getAttribute of the interface Element, which represents an element in an HTML or XML document, is used to get the value of an attribute in an object.

The getElementsByTagName Method

getElementsByTagName returns all elements with a specified tag name. The method returns a NodeList, which represents an ordered collection of nodes. The length property returns the number of items in a NodeList.

Demonstration
The following demonstration shows how the script of HTML and JavaScript is displayed on the Web.


<html> <head> <script type="text/javascript"> function getElements( ) { var x = document.getElementsByTagName("input"); alert(x.length); } </script> </head> <body> <input type="text" size="20" /><br /> <input type="text" size="20" /><br /> <input type="text" size="20" /><br /><br /> <input type="button" onclick="getElements( )" value="How many input elements?" /> </body> </html>