Loading lesson path
Concept visual
Start from A
Often, with JavaScript, you want to manipulate HTML elements. To do so, you have to find the elements first. There are several ways to do this:
The easiest way to find an HTML element in the DOM, is by using the element id. This example finds the element with id="intro"
const element = document.getElementById("intro");
If the element is found, the method will return the element as an object (in element).If the element is not found, element will contain null.
<p> elements:
const element = document.getElementsByTagName("p");
This example finds the element with id="main", and then finds all<p> elements inside "main"
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");If you want to find all HTML elements with the same class name, use getElementsByClassName(). This example returns a list of all elements with class="intro".
const x = document.getElementsByClassName("intro");<html> <body> <p class="demo"></p> <script>
// Access a paragraph Element const myPara = document.querySelector(".demo");
// Change the content of the Element myPara.innerHTML = "Hello World!";</script> </body> </html>
<html> <body> <p class="demo">One</p> <p class="demo">Two</p> <script>
// Access a paragraph Element const myItems = document.querySelectorAll(".demo");
// Change the content of the Element myItems[0].innerHTML = "First";</script> </body> </html>
Using # in getElementById():
"#demo" Forgetting that querySelector() returns only the first match If you want to find all HTML elements that match a specified CSS selector (id, class names, types, attributes, values of attributes, etc), use the querySelectorAll() method.
<p> elements with class="intro".
const x = document.querySelectorAll("p.intro");This example finds the form element with id="frm1", in the forms collection, and displays all element values: