JavaScript: Document Object Model
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.
For example, you might use the DOM to write JavaScript that grabs the title and changes it, or that interacts with a specific list item, or with a link or section. With an agreed-way of describing each element on a page, it makes it possible to reach into specific parts of the web page to interact with 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.
The basic strategy is to identify a unique node so that you can write JavaScript to interact with that specific 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: getElementById and getElementsByTagName.
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:
document.getElementById("sidelist");
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.
var myListElement = document.getElementById("sidelist");
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.
document.getElementsByTagName("li");
(Substitute the li with whatever element you want to retrieve (such as p or a).)
You use this method similar to how you use getElementById:
myListItems = document.getElementsByTagName("li");
JavaScript will return all elements with this tag name as an array. If your web page has 12 list items, the result will be an array with 12 positions.
You can then identify a unique position using the following:
myListItems[0]myListItems[1]myListItems[2]myListItems[3]
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. nodeType, innerHTML, and childNodes.length will all return specific information about the element.
In this example, contentSubhead is an element on the page.
console.log(contentSubhead.nodeType);
console.log(contentSubhead.innerHTML);
console.log(contentSubhead.childNodes.length);
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:
//Declare a variable and assign it to a unique page ID
var contentSubhead = document.getElementById("contentSubhead");
//create a new variable and run a method on it
>var limitedItem = contentSubhead.getElementsByTagName("li");
The 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.
About Tom Johnson
I'm an API technical writer based in the Seattle area. On this blog, I write about topics related to technical writing and communication — such as software documentation, API documentation, AI, information architecture, content strategy, writing processes, plain language, tech comm careers, and more. Check out my API documentation course if you're looking for more info about documenting APIs. Or see my posts on AI and AI course section for more on the latest in AI and tech comm.
If you're a technical writer and want to keep on top of the latest trends in the tech comm, be sure to subscribe to email updates below. You can also learn more about me or contact me. Finally, note that the opinions I express on my blog are my own points of view, not that of my employer.