---
title: "JavaScript: Document Object Model"
date: 2013-02-03
description: "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..."
canonical_url: https://idratherbewriting.com/document-object-model-javascript/index.html
---

> For AI agents: a documentation index is available at https://idratherbewriting.com/llms.txt. Markdown versions of all pages are available by appending .md to any page URL.

# 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:

```javascript
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.

```javascript
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.

```javascript
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`:

```javascript
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:

```javascript
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.

```javascript
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:

```javascript
//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.