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

, , …,

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 myObj = document.getElementById("xyz");

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

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

Get Elements by Tag Name

document.getElementsByTagName(tag name) → Return a live HTMLCollection. The tag name are {"div", "span", "p", …}.

// 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. 〔☛ HTML: Specify More Than One Class Attribute for HTML Element〕 Here's a example getting elements that each belongs to multiple classes.

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

play with it in browser dev tool here: JavaScript Test getElementsByClassName on Multiple Classes

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">you</p>
<div class="zz" name="xyz">me</div>
<div class="zz" name="xyz">her</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.querySelectorAll(css selector) → Return a non-live HTMLCollection, of elements that matches the css selector css selector. The css selector is a string, 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. 〔☛ CSS Selector Syntax

If the argument refers to pseudo-selectors (⁖ a:hover), it returns empty.

Return Value of getElements Methods

The methods {getElementsByTagName, getElementsByClassName, …} return a HTMLCollection object. HTMLCollection is a array-like object, but is not a JavaScript array object. 〔☛ What's Object in JavaScript?〕You cannot use JavaScript Array Methods on them. Use “for loop” instead. For detail, see: JavaScript: Array vs NodeList vs HTMLCollection.

blog comments powered by Disqus