Get HTML Elements with JavaScript

In this article, I will introduce how to get HTML elements with JavaScript.

5ways to get HTML elemtnts

document.getElementById()

Return value: HTMLElement / null

The getElementById() returns an element object with the specified ID. If no matching element was found in the document, it returns null.

const element = document.getElementById('idName');

Example

HTML

<p id="myid">Hello World</p>

JavaScript

/* Get an element that have an id of 'myid': */
const myid = document.getElementById('myid');
console.log(myid);              // <p id="myid">Hello World</p>
console.log(myid.textContent);  // "Hello World"

const foo = document.getElementById('foo');
console.log(foo);  // null

document.getElementsByClassName() rootElement.getElementsByClassName();

Return value: HTMLCollection

The getElementsByClassName() returns an array-like object of all child elements which have all of the given class name(s).

const elements = document.getElementsByClassName('classNames');
const elements = rootElement.getElementsByClassName('classNames');

Example

HTML

<div id="myid">
  <span>Hello World 1</span>
  <span class="myclass">Hello World 2</span>
  <span>Hello World 3</span>
</div>
<p class="myclass test">Hello World 4</p>

JavaScript

/* Get the first element with a class of 'foo', or undefined if there is no matching element: */
const foo = document.getElementsByClassName('foo')[0];
console.log(foo); //undefined

/* Get all elements that have a class of 'myclass': */
const myclass = document.getElementsByClassName('myclass');
console.log(myclass);  // HTMLCollection(2) [span.myclass, p.myclass]
for (var i = 0; i < myclass.length; i++) {
  console.log(myclass[i].textContent);
}
// "Hello World 2"
// "Hello World 4"

/* Get all elements that have both the 'myclass' and 'test' classes: */
const myclass_test = document.getElementsByClassName('myclass test');
console.log(myclass_test);  // HTMLCollection [p.myclass.test]
for (var i = 0; i < myclass_test.length; i++) {
  console.log(myclass_test[i].textContent);
}
// "Hello World 4"

/* Get all elements that have a class of 'myclass', inside of an element that has the ID of 'myid': */
const myid_myclass = document.getElementById('myid').getElementsByClassName('myclass');
console.log(myid_myclass);  // HTMLCollection [span.myclass]
for (var i = 0; i < myid_myclass.length; i++) {
  console.log(myid_myclass[i].textContent);
}
// "Hello World 2"

document.getElementsByTagName() rootElement.getElementsByTagName()

Return value: HTMLCollection

The getElementsByTagName() returns an HTMLCollection of elements with the given tag name.

const elements = document.getElementsByTagName('tagName');
const elements = rootElement.getElementsByTagName('tagName');

Example

HTML

<div id="myid">
  <p>Hello World 1</p>
  <p>Hello World 2</p>
  <p>Hello World 3</p>
</div>
<p id="foo">Hello World 4</p>

JavaScript

/* Get all elements that have the <p> tag: */
const mytag = document.getElementsByTagName('p');
console.log(mytag);  // HTMLCollection(4) [p, p, p, p#foo, foo: p#foo]
for (var i = 0; i < mytag.length; i++) {
  console.log(mytag[i].textContent);
}
// "Hello World 1"
// "Hello World 2"
// "Hello World 3"
// "Hello World 4"

/* Get all elements that have the <p> tag, inside of an element that has the ID of 'myid': */
const myid_mytag = document.getElementById('myid').getElementsByTagName('p');
console.log(myid_mytag);  // HTMLCollection(3) [p, p, p]
for (var i = 0; i < myid_mytag.length; i++) {
  console.log(myid_mytag[i].textContent);
}
// "Hello World 1"
// "Hello World 2"
// "Hello World 3"

document.querySelector() rootElement.querySelector()

Return value: HTMLElement / null

The querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

const elements = document.querySelector('selector');
const elements = rootElement.querySelector('selector');

Example

HTML

<div id="myid">
  <p>Hello World 1</p>
  <p class="myclass">Hello World 2</p>
  <p>Hello World 3</p>
</div>
<ul>
  <li class="myclass">Hello World 4</li>
  <li>Hello World 5</li>
</ul>

JavaScript

const foo = document.querySelector('.foo');
console.log(foo); //null

/* the first element in the document with the class "myclass" is returned: */
const myclass = document.querySelector('.myclass');

console.log(myclass);  // <p class="myclass">Hello World 2</p>
console.log(myclass.textContent);  // "Hello World 2"

/* the first element in the document with the class "myclass" inside a <ul> is returned: */
const ul_myclass = document.querySelector('ul .myclass');

console.log(ul_myclass);  // <li class="myclass">Hello World 4</li>
console.log(ul_myclass.textContent);  // "Hello World 4"

/* the first element in the document with the class "myclass" inside of an element that has the ID of 'myid' is returned: */
const myid_myclass = document.getElementById('myid').querySelector('.myclass');

console.log(myid_myclass);  // <p class="myclass">Hello World 2</p>
console.log(myid_myclass.textContent);  // "Hello World 2"

const lastChild = document.querySelector('li:last-child');

console.log(lastChild);  // <li>Hello World 5</li>
console.log(lastChild.textContent);  // "Hello World 5"

document.querySelectorAll() rootElement.querySelectorAll()

Return value: NodeList

The querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

const elements = document.querySelectorAll('selector');
const elements = rootElement.querySelectorAll('selector');

Example

HTML

<ul id="myid">
  <li>Hello World 1</li>
  <li class="myclass">Hello World 2</li>
  <li>Hello World 3</li>
</ul>
<p class="myclass">Hello World 4</p>
<ul>
  <li class="myclass">Hello World 5</li>
  <li>Hello World 6</li>
</ul>

JavaScript

/* Get all elements that have a class of 'myclass': */
const myclass = document.querySelectorAll('.myclass');

console.log(myclass);  // NodeList(3) [li.myclass, p.myclass, li.myclass]
for (var i = 0; i < myclass.length; i++) {
  console.log(myclass[i].textContent);
}
// Hello World 2
// Hello World 4
// Hello World 5

/* Get all elements in the document with the class "myclass" inside a <ul> is returned: */
const ul_myclass = document.querySelectorAll('ul .myclass');

console.log(ul_myclass);  // NodeList(2) [li.myclass, li.myclass]
for (var i = 0; i < ul_myclass.length; i++) {
  console.log(ul_myclass[i].textContent);
}
// Hello World 2
// Hello World 5

/* Get all elements in the document with the class "myclass" inside of an element that has the ID of 'myid' is returned: */
const myid_myclass = document.getElementById('myid').querySelectorAll('.myclass');

console.log(myid_myclass);  // NodeList [li.myclass]
for (var i = 0; i < myid_myclass.length; i++) {
  console.log(myid_myclass[i].textContent);
}
// Hello World 2

const lastChild = document.querySelectorAll('li:last-child');

console.log(lastChild);  // NodeList(2) [li, li]
for (var i = 0; i < lastChild.length; i++) {
  console.log(lastChild[i].textContent);
}
// Hello World 3
// Hello World 6