Document Object Model

The Document Object Model (DOM for short) is the means by which JavaScript interacts with the HTML and CSS in the web page. The DOM forms a separate layer between JavaScript and the web page. It is loaded with the complete structure of the web page when the web page first loads. Any changes made to the DOM will be reflected in the appearance of the web page. Note that it is also possible to update the web page without going via the DOM in which case the DOM will no longer allow those parts of the web page to be changed from JavaScript.

In this series we will begin by looking at different ways that we can read from the web page into JavaScript and then follow that with the calls needed to update the web page content.

There are several different terminologies used in connection with the DOM. A container in the HTML consists of an opening HTML tag and its matching closing tag (effectively added by the browser if it isn't physically present in the source). This HTML container creates a corresponding element in the DOM which JavaScript can then process as a node. The text in between the elements is also accessed as text nodes.

  1. Get An id Node - Access an HTML container having a specified id attached to it. There will be only one because ids must be unique within a web page.
  2. Nodes for Tag Name - Retrieve a nodelist of all instances of a particular tag within the web page - eg. all paragraphs.
  3. Nodes for Name - Retrieve a nodelist of all the elements with the same name - eg. all the buttons in a particular radio button group.
  4. Nodes for Class - Retrieve a nodelist of all the elements that reference a particular class.
  5. querySelectorAll - A new way to extract static nodelists.
  6. Next Node - Get the next node following the current one.
  7. Previous Node - Get the node that precedes the current one.
  8. Parent Node - Get the node corresponding to the container element that the current node is directly within.
  9. One id Inside Another - By using parentNode calls we can easily determine if the element with one id is contained within an element with a second id.
  10. Child Nodes - Get a nodelist of all the elements and text contained directly within the current node.
  11. Counting Direct Child Elements - Count how many elements are directly contained inside another ignoring any text nodes.
  12. firstChild and lastChild - A way to directly reference two specific nodes within the current node.
  13. nodeName, nodeType and nodeValue - Direct access to three properties of the current node.
  14. Walk the DOM - How to combine next and child calls in a recursive function to retrieve every single node within the web page.
  15. Get Attributes - How to access the attributes attached to the tag the current node points to.
  16. Get Styles - How to get the styles that have been set via CSS for the current node (not those set via browser default).
  17. Set Attributes - The simplest update is to change the value in an attribute.
  18. Pre-loading Images - Changing the src attribute on an image tag will change the image being displayed. Here's how to avoid a delay while it downloads.
  19. Set Styles - How to change the existing styles attached to the element as well as to add new ones.
  20. Adding and Removing Classes - How to add or delete a class from an element without affecting any other classes on the same element.
  21. cssText - Providing access to all of an element's styles in one property.
  22. innerHTML - A simple way of directly updating the content of the web page, bypassing the DOM.
  23. Remove Node - How to remove something from the DOM.
  24. Create Element - To add content via the DOM we need to construct all the nodes separately.
  25. Create Text Node - The nodes containing text also need to be created before adding them to the DOM.
  26. Combine Nodes - We can combine nodes together before adding them to the web page - eg. placing a text node inside a paragraph node.
  27. Document Fragment - This virtual element allows us to add sibling nodes into the page at the same time.
  28. Add Child Node - One way to add into the page is as the last child within a specified node already in the page.
  29. Add Before Current - The alternative when you don't want it to come last is to add it before an existing node in the page.
  30. Replace Node - Instead of deleting a node and then adding another in its place we can simply replace the node instead.
  31. Simplify Creates - As constructing the new content involves a number of repetitive tashs, we can simplify the processing by combining some of the DOM processing into a function.
  32. Add JavaScript From JavaScript - We can use DOM calls to add the script tags into our page to run additional JavaScript not directly referenced from the HTML.
  33. insertAfter - JavaScript provides appendChild and insertBefore. We can combine them with nextSibling to produce our own insertAfter function.

    34. This site is © copyright Stephen Chapman - Felgall Pty Ltd 2011-2012.

    You are welcome to use any the example JavaScript from this site in the scripts for your site or any that you develop for others but may not use the longer example scripts that contain a copyright notice in any other way without permission.