JavaScript/Finding elements

To work with nodes of the DOM tree, you need to locate them directly or navigate to them beginning at a starting point. DOM's Document interface serves as an entry point into the web page's content. It offers a rich set of properties and methods to reach particular nodes. The methods return single nodes or an array of nodes.

We use the following HTML page to demonstrate the most important methods.

<!DOCTYPE html><html><head><script>functionshow(){"use strict";// ...}</script><style>.head_2{display:flex;justify-content:center;}.text{padding-left:1em;font-size:1.4em;}.button{height:1.4em;width:4em;margin-top:1em;font-size:1.2em;background-color:Aqua;}</style></head><body><h1>An HTML header</h1><h2class="head_2">An HTML sub-header</h2><divid="div_1"><pid="p1"class="text">Paragraph 1</p><pid="p2"class="text">Paragraph 2</p><pid="p3"class="text">Paragraph 3</p></div><divid="div_2"><h2>Another HTML sub-header</h2><divid="div_3"><p>Another paragraph 1</p><p>Another paragraph 2</p><p>Another paragraph 3</p></div></div><buttonclass="button"onclick="show()">Go</button></body></html>

Clicking on the button invokes the function show. The examples should be included there.

Using ID

An easy-to-use, fast, and exact method to locate an individual element is to mark the element with the id property in the HTML, e.g., <p id="p2">, and use this id as the parameter to getElementById(). The following code snippet will locate the element and displays its content.

functionshow(){"use strict";constelem=document.getElementById("p2");alert(elem.innerHTML);}

The getElementById method returns one single element (the first with this id if the id is not unique).

That is also true if the element is not a text node but a node with child nodes. The return value is a single element with all its child elements included.

functionshow(){"use strict";constelem=document.getElementById("div_3");alert(elem.innerHTML);}// expected output:// <p>Another paragraph 1</p>// <p>Another paragraph 2</p>// <p>Another paragraph 3</p>

Using tag name

Another way to find elements on an HTML page is the getElementsByTagName method. It accepts a tag name, e.g., 'h1', 'div', or 'p', and returns all such elements in an array.

Here, we use the method to retrieve an array of all 'div' elements.

functionshow(){"use strict";// if you want to search in the complete document, you must specify 'document'letelemArray=document.getElementsByTagName("div");// loop over all array elementsfor(leti=0;i<elemArray.length;i++){alert(elemArray[i].innerHTML);}alert("Part 2");// if you want to search only a sub-tree, you must previously locate// the root of this sub-treeconstelem=document.getElementById("div_2");elemArray=elem.getElementsByTagName("div");for(leti=0;i<elemArray.length;i++){alert(elemArray[i].innerHTML);}}

Using class name

Next, elements can be located by an associated CSS class selector. Class selectors can have a complex syntax. Here, we use only the simple form of class names.

The example retrieves all elements that use the CSS class text - what is done by the 3 paragraphs of the first div. Please note, that the other paragraphs are not retrieved.

functionshow(){"use strict";letelemArray=document.getElementsByClassName("text");// loop over all array elementsfor(leti=0;i<elemArray.length;i++){alert(elemArray[i].innerHTML);}}

Using a query selector

The shown locating methods use specialized semantics to locate elements. But there is also a general method that combines all of that - plus more.

Query selectors use a complex syntax consisting of HTML element ids, HTML element names, HTML attributes, CSS classes, positions, and more. They locate single elements or a list of elements. To retrieve the first element which satisfies the selector, use the querySelector method. If you want to retrieve all matching elements, use querySelectorAll.

functionshow(){"use strict";// '#' locates via ID, '.' locates via CSS classletelemArray=document.querySelectorAll("h1, #p2, .head_2");// loop over all array elementsfor(leti=0;i<elemArray.length;i++){alert(elemArray[i].innerHTML);}}

Navigating the DOM tree

You can navigate in the DOM tree in the direction from the root to the leaves. This is done by locating an element and using this node as the new root for the following navigation steps.

functionshow(){"use strict";// start at 'div_2'constelem_1=document.getElementById("div_2");// use this element as the new root for further selectionsconstelemArray=elem_1.getElementsByTagName("h2");for(leti=0;i<elemArray.length;i++){alert(elemArray[i].innerHTML);}// only the child-'h2' is selected! The first 'h2' is ignored.}

Exercises

... are available on another page (click here).