JavaScript: DOM - accessing the objects of a web page
This page introduces you to the concept of the Document Object Model (DOM).
First a short explanation of the concept of the World Wide Web Consortium (W3C) XML HTML Document Object Model (DOM).
Let us consider a web document as consisting of nodes in a family tree hierarchy: parent nodes, child nodes, where nodes at the same level in the hierarchy with the same parents are siblings. View a simple example of the tree.
Then each node in this tree represents a different type of content or a different structural element. Manipulating the DOM allows us to dynamically change and update the content, structure and style of web documents.
Note: Access to the DOM can only occur after the page has fully loaded. The DOM tree is not fully constructed until the page has been completely downloaded to the client browser.
JavaScript has access to the DOM.
It is possible to reference and gain access to a node or element directly with the 'document.getElementById()' method. This is assuming we have already given that element a unique id within the document's structure.
It is possible to navigate and traverse the tree structure using the set of DOM properties and methods: the node object interface.
The browser also provides us access to a number of collections, or set of nodes. These are stored as arrays and can be accessed using dot and array notation. As the values are stored as arrays it is possible to loop through the values. Combine this with the 'document.getElementById()' method to target specific sets of nodes.
For more information see the World Wide Web Consortium Level 1 DOM
http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html
See also the World Wide Web Consortium Level 2 DOM
http://www.w3.org/TR/DOM-Level-2-Core/core.html
Both the Level 1 DOM and Level 2 DOM are now, in 2008, well-supported by the latest browsers.
JavaScript code snippets listed by task and organised in a tutorial style each building on the previous example. New topics are introduced when required.
1. |
Reference and gain access to a node or element directly with the 'document.getElementById()' method. Combine with the Style object property 'fontSize' and relative units 'em' to increase the size of the text in the named element ID. |
2. |
Navigating the document tree structure by accessing the html root element. Access the html root element with 'document.documentElement' and use the 'lastChild', 'firstChild' and 'nextSibling' DOM properties to then navigate down and traverse across the document tree structure.
Combine with the 'nodevalue' property to gain access to the text content of a web document. |
3. |
Navigating the document tree structure using 'document.getElementById()' method. Target a specific node in the document first and navigate the document tree structure from that point using the 'childNodes' property: an array value list of the child nodes of a node.
Combine with the 'nodevalue' property to gain access to the text content of a web document. |
4. |
Navigating the document tree structure incorporating a 'for loop'. Use 'document.getElementById()' to target a specific node in the document and navigate the document tree structure from that point using the 'childNodes' property: an array value list of the child nodes of a node.
Access the 'childNodes' array values by utilising a 'for loop' and combine with the 'nodevalue' property to gain access to the text content of a web document. |
5. |
Add text to the web page from a form field. Target a specific node in the document using document.getElementById()' and add text to the web page from a form field. Use of createElement(), createTextNode() and appendChild() DOM methods. |
6. |
Reference and gain access to a node or element in a form with dot and array notation. For example with 'document.forms[0].elements[1]' to highlight the second control or field within a form. |
7. |
Reference and gain access to form field values with dot and array notation. Use an array to store form fields' values and a 'for loop' to access the values. Declaring an new array of undetermined size to store the values using 'new Array()'. Write the form field values to alert() dialog boxes.
Learn how to store the data from forms in cookies using JavaScript in JavaScript: Cookies. Add server-side functionality to forms using PHP in PHP: Intro. |
8. |
Reference and gain access to login form field values with dot and array notation. Read user name, hidden and password fields from a login form. Proof that password is not encrypted when in the password field of the form. |
9. |
Build on the above and learn about JavaScript and Strings. View code examples on JavaScript: Strings page. |
| Suggest a code snippet to add to this category. | |
Back to top.
Copyright © 2006-2012 justfigures.co.uk
