Javascript DOM – Elements
JavaScript is most commonly used to get or modify(set or change) the content or value of the HTML elements on the page, as well as to apply some effects like a show, hide, animations, etc. Before you can perform any action you need to select or find the target HTML element.
Common ways of selecting the elements on a page and do something with them using JavaScript.
Selecting the Topmost Elements:
document:
An HTML document is available directly as document properties.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Access body Element from Different Location</title>
<script>
document.write("From HEAD: " + document.body); // Prints: null (since <body> is not parsed yet)
</script>
</head>
<body>
<hr>
<script>
document.write("From BODY: " + document.body); // Prints: HTMLBodyElement
</script>
</body>
</html>
OUTPUT:
From HEAD: null From BODY: [object HTMLBodyElement]
Selecting Elements by ID:
You can select an element based on its unique “ID” with the getElementById() method. This is the easiest way to select or find an HTML element in the DOM tree.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Select an Element by its ID Attribute</title>
</head>
<body>
<p id="i2">This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>
<script>
// Selecting element with id mark
var match = document.getElementById("i2");
// Highlighting element's background
match.style.background = "red";
</script>
</body>
</html>
OUTPUT:
The getElementById() method will return the element as an object(in my element) if the matching element was found, or null if no matching element was found in the document.
Selecting Elements by Class Name:
If you want to find or select all HTML elements with the same class name, use getElementsByClassName().
Example:
<!DOCTYPE html>
<html>
<body>
<h2> HTML Elements by Class Name</h2>
<p>Hello World!</p>
<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>
<p id="demo"></p>
<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>
</body>
</html>
OUTPUT:
Finding HTML Elements by Class Name Hello World! The DOM is very useful. This example demonstrates the getElementsByClassName method. The first paragraph (index 0) with class="intro": The DOM is very useful.
Selecting Elements by Tag Name:
Finds all <p> elements
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements by Tag Name</h2>
<p>Hello World!</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
<p id="demo"></p>
<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
'The text in first paragraph (index 0) is: ' + x[0].innerHTML;
</script>
</body>
</html>
OUTPUT:
Finding HTML Elements by Tag Name Hello World! This example demonstrates the getElementsByTagName method. The text in first paragraph (index 0) is: Hello World!
Selecting Elements with CSS Selectors:
If you want to find all HTML elements that match a specified CSS selector provide a very powerful and efficient (id, class names, types, attributes, values of attributes, etc), use the querySelectorAll() method.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Select Elements with CSS Selectors</title>
</head>
<body>
<ul>
<li>Bread</li>
<li class="tick">Coffee</li>
<li>Apple Cake</li>
</ul>
<script>
// Selecting all li elements
var matches = document.querySelectorAll("ul li");
// Printing the number of selected li elements
document.write("Number of selected elements: " + matches.length + "<hr>")
// Printing the content of selected li elements
for(var elem of matches) {
document.write(elem.innerHTML + "<br>");
}
// Applying line through style to first li element with class tick
matches = document.querySelectorAll("ul li.tick");
matches[0].style.textDecoration = "line-through";
</script>
</body>
</html>
OUTPUT:
Bread Coffee Apple Cake Number of selected elements: 3 Bread Coffee Apple Cake