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()
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');
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