The Document Object Model (DOM) is an agreed-upon set of terms that describes the various pieces of a web page. Using this set of agreed-upon terms, you can identify a specific element of a web page and perform some action on it.
The DOM contains about 12 nodes. A node is basically a name for a piece of a web page. Three types of nodes are the most important: elements, attributes, and text.
For example, an unordered list (ul) might be an element node. If the id of the ul is "sidelist", the id="sidelist" would be an attribute node. The text of the list item (li) would be the text node.
You can identify DOM elements using Firebug. After using the HTML tab in Firebug to locate the specific style, right-click the style and select Inspect in DOM Panel. The DOM panel will open up and show the element name.
However, beyond trying to identify the right node in the DOM, there are two properties of the Document object that make it easier to identify a specific element in the DOM:
Getting an Element by ID
Many elements on a web page are styled with unique IDs. When this is the case, it makes it really easy to reach these specific elements.
The Document object has a property that allows you get an element with a specific ID:
To grab this element, you create a variable and assign it to the unique ID on your page. In the following example, we're getting the
#sidelist section of the page.
You can then start manipulating the element using methods. The variable gives you a leverage point to interact with the element.
Getting All Elements by Tag Name
Sometimes an element doesn't have a unique ID. The element may be an anchor link (a) or a list item (li). You can use the
document.getElementsByTagName("a"); document property to get all elements with that tag name.
li with whatever element you want to retrieve (such as
You use this method similar to how you use
You can then identify a unique position using the following:
And so on, with each position corresponding with the site element in the array.
You can apply various methods to the variable to display information about that element in your console.
childNodes.length will all return specific information about the element.
In this example,
contentSubhead is an element on the page.
When you run these console.log messages in Firebug, the console will display this information.
Restricting Information by Specific Elements
Let's say you want to identify a specific list on your page. You don't have to try to identify it from the page as a whole. If you were to use the
getElementsByTagName("li") property, you would retrieve all the
li elements for the entire page.
You can be more restrictive about the elements that you interact with.
You can identify a unique element on the page and then drill in from there to go to the specific list you want.
For example, let's say you have an element with an ID of "contentSubhead" and you want to interact with one of its list items.
First, create a variable that identifies the unique element. Then create a new variable that refers to the previous variable and applies the
.getElementsByTagName method to it:
getElementsByTagName property will show all the list items beginning at the unique element you identified.
In this way, you can restrict your interactions with the DOM to increasingly more specific elements.