In this article, I will introduce how to get HTML elements with JavaScript.
5ways to get HTML elemtnts
document.getElementById()
Return value: HTMLElement / null
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');
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
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');
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
getElementsByTagName() returns an HTMLCollection of elements with the given tag name.
const elements = document.getElementsByTagName('tagName');
const elements = rootElement.getElementsByTagName('tagName');
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
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');
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
querySelectorAll() rreturns 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');
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
