DOM Getting started with DOM Retrieving existing html elements

Example

One of the most common tasks is retrieving an existing element from the DOM to manipulate. Most commonly these methods are executed on document, because it is the root node, but all these methods work on any HTML element in the tree. They will only return children from the node it is executed on.

Retrieve by id

var element = document.getElementById("logo");

element will contain the (only) element that has its id attribute set to "logo", or contains null if no such element exists. If multiple elements with this id exist, the document is invalid, and anything can happen.

Retrieve by tag name

var elements = document.getElementsByTagName("a");

elements will contain a live HTMLCollection (an array-like object) of all link tags in the document. This collection is in sync with the DOM, so any changes made to the DOM are reflected in this collection. The collection provides random access and has a length.

var element = elements[0];
//Alternative
element = elements.item(0);

element contains the first encountered HTML link element, or null if the index is out of bounds

var length = elements.length;

length is equal to the number of HTML link elements currently in the list. This number can change when the DOM is changed.

Retrieve by class

var elements = document.getElementsByClassName("recipe");

elements will contain a live HTMLCollection (an array-like object) of all elements where their class attribute includes "recipe". This collection is in sync with the DOM, so any changes made to the DOM are reflected in this collection. The collection provides random access and has a length.

var element = elements[0];
//Alternative
element = elements.item(0);

element contains the first encountered HTML element with this class. If there are no such elements, element has the value undefined in the first example and null in the second example.

var length = elements.length;

length is equal to the number of HTML elements that currently have the class "recipe". This number can change when the DOM is changed.

Retrieve by name

var elements = document.getElementsByName("zipcode");

elements will contain a live NodeList (an array-like object) of all elements with their name attribute set to "zipcode". This collection is in sync with the DOM, so any changes made to the DOM are reflected in this collection. The collection provides random access and has a length.

var element = elements[0];
//Alternative
element = elements.item(0);

element contains the first encountered HTML element with this name.

var length = elements.length;

length is equal to the number of HTML elements that currently have "zipcode" as their name attribute. This number can change when the DOM is changed.