JavaScript: Get Elements by ID, Tag, Name, Class, CSS Selector

By Xah Lee. Date: . Last updated: .

This page shows you how to get elements in JavaScript.

Get Element by Matching the Value of the 「id」 Attribute

document.getElementById(id_string) → Return a element object. Returns null if not found.

var elem = document.getElementById("xyz");

elem.style.color="red"; // change color to red

Note: element id must be unique per HTML file. (embeded iframe counts as different HTML file.)

Get Elements by Tag Name

document.getElementsByTagName(tag_name) → Return a live HTMLCollection. The tag_name is "div", "span", "p", etc.

// example of document.getElementsByTagName()

var myList = document.getElementsByTagName("p"); // get all p elements

myList.length; // show number of items

myList[0].style.color = "red"; // make the first one red

Get Elements by Matching the Value of the 「class」 Attribute

document.getElementsByClassName("class_values") → Return a live HTMLCollection. The class_values can be multiple classes separated by space. For example: "aa bb", and it'll get elements, where each element is in both class “aa” & “bb”.

// get element of class abc

var myList = document.getElementsByClassName("abc");

myList[0].style.color = "red"; // make the first one red

Note: a HTML element can belong to more than one class. 〔➤see HTML: Multiple Class Attribute Values〕 Here's a example:

<p class="aa">1</p>

<p class="bb">2</p>

<p class="bb aa">3</p>

<p class="bb cc aa">4</p>

<script>document.getElementsByClassName("aa bb");</script>

<!-- it'll get 3 and 4. -->

Get Elements by Matching the Value of the 「name」 Attribute

document.getElementsByName("name_value") → Return a live HTMLCollection, of all elements that have the name="name_value" attribute & value pair.

Here's a sample HTML:

<p name="abc">1</p>
<div class="zz" name="xyz">2</div>
<div class="zz" name="xyz">3</div>

<form>
<input name="xyz" type="text" size="20">
</form>

Here's JavaScript code that makes the first element with name="xyz" red.

// get element by value of the “name” attribute

var xyz = document.getElementsByName("xyz");

xyz[0].style.color="red"; // make the first one red

Get Elements using CSS Selector Syntax

document.querySelector(css_selector) → Return a non-live HTMLCollection, of the first element that match the CSS selector css_selector. The css_selector is a string of CSS syntax, and can be several selectors separated by a comma.

document.querySelectorAll(css_selector) → Return a non-live HTMLCollection, of elements that match the CSS selector css_selector. The css_selector is a string of CSS syntax, and can be several selectors separated by a comma.

var xx = document.querySelectorAll("span.a, span.c");

for (var i = 0; i < xx.length; i++) {
    xx[i].style.color="red";
}

The syntax for the argument is the same as CSS selector syntax. For example: div, div p, #id97726, div.someclass, etc. 〔➤see CSS Selector Syntax

What's Live Object?

Live object means, any change to the result will change the element in the page, and any change on the page will also change your result.

For detail, see JavaScript: What Does Live Object Mean?

What's HTMLCollection, NodeList?

The methods {getElementsByTagName, getElementsByClassName, …} return a NodeList or HTMLCollection object, depending on browser.

NodeList/HTMLCollection is a Array-Like Object. You cannot use JavaScript Array Methods on them in the normal way, but you can use Array Methods on them directly by:

Array.prototype.array_method_name.call(array_like_obj, args)

For detail, see:

Basic DOM Methods topics

  1. JavaScript: Basic DOM Methods
  2. JavaScript: Get Elements by ID, Tag, Name, Class, CSS Selector
  3. JavaScript: Get Element's Attribute Value
  4. JavaScript: Set Element's Attribute Value
  5. JavaScript: List/Add/Remove Class Attribute
  6. JavaScript: Node Type, Node Name, Node Value
  7. JavaScript: Navigate DOM Tree
  8. JavaScript: Add / Remove Event Handler
Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.