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

, , …,
Want to master JavaScript in a month? Commit. Buy Xah JavaScript Tutorial. You also get Xah HTML Tutorial and Xah CSS Tutorial.

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