In DOM, each
object can be referred to as a node. Each HTML tag is a node. A node can
be a parent node or a child node depending on its location in the hierarchy.
For example, consider the HTML statement:
<p>
This is the paragraph text </p>
The above
given statement has two nodes: <p> node and text node (This is the
paragraph text). The text node is inside the <p> element, therefore
text node is child node and <p> is the parent node.
If you know
the exact structure of the DOM tree, you can walk through nodes and reach
the exact node that you want. However, you can jump to a node directly
by using following methods:
·
Document.getElementsByTagName: This method returns the nodes list
that have the matching tag name. For example, if you want to get all the
input elements used in the document, you can write the code as:
|
Var
inputs = document.getElementsByTagName(‘input’)
|
·
Document.getElementsById: The method returns the handle of the
node, whose ID is passed to it. While building complex interfaces mostly
all key elements are given an ID that can be used to access that object
directly through programming. The web browser exposes the virtual object
for each node to JavaScript. You can access the object by passing its
ID to the getElementById() method, as shown in the code.
|
<form
name ="myform" id="subscribe_frm" action="#">
Name:
<input type="text" name="name" id="txt_name">
</form>
//
access the element by id
Var
element1 = document.getElementById(“txt_name”) |
|