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

By Xah Lee. Date: . Last updated: .

Get Current Script Element

document .currentScript → return the current script element.

[see DOM: Get Current Script Tag]

Get Element by Matching the Value of the “id” Attribute

document. getElementById(id_string)

Return a non-live element object. Returns null if not found.

const x = document. getElementById("xyz");
x.style.color="green";

Note: element id must be unique per HTML file.

Get Elements by Tag Name

document. getElementsByTagName(tag_name)

Return a live HTMLCollection.

The tag_name is "div", "span", "p", etc.

const x = document. getElementsByTagName("p");
for (let e of x) { e.style.color = "green"; }

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” and “bb”.

const x = document. getElementsByClassName("js");
for (let e of x) { e.style.color = "green"; }

Note: a HTML element can belong to more than one class. 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(val)

Return a live NodeList, of all elements that have the name=val attribute and 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 all elements with name="xyz" green.

const x = document. getElementsByName("xyz");
for (let e of x) { e.style.color="green"; }

Get Elements by CSS Selector Syntax

document.querySelector(css_selector)

Return a non-live 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 comma.

document.querySelectorAll(css_selector)

Return a non-live NodeList, 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 comma.

const x = document. querySelectorAll ("p");
for (let e of x) { v.style.color="green"; }

The syntax for the argument is the same as CSS selector syntax. For example:

[see CSS Selector Syntax]

How to Loop Thru Result

Since ES2015, both HTMLCollection and NodeList are iterable objects.

Use for-of loop.

for (let v of get_ele_result) { … }

Example:

const x = document. querySelectorAll ("div");
for (let v of x) { console.log ( "Value: ", v); }

[see JS: for-of Loop]

Alternatively, convert it to array, then use forEach method:

Array.from ( get_ele_result ).forEach( function )

[see JS: Array.from]

[see JS: Array.prototype.forEach]

or call the forEach method on it like this:

Array.prototype.forEach.call(get_ele_result, function)

[see JS: Function Call, Apply, Bind]

What's Live Object

DOM: What Does Live Object Mean?

HTMLCollection vs NodeList

DOM: NodeList vs HTMLCollection

DOM How-To


Web Scripting Overview


HTML Input


Web Scripting Examples


Web Scripting Misc


jQuery


node.js

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials