JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
DOM Elements
Finding HTML Element by Id
To find an HTML element in the DOM, is by using the element id.
This example finds the element with id=”intro”:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p id=”intro”>Finding HTML Elements by Id</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>
<p id=”demo”></p>
<script>
const element = document.getElementById(“intro”);
document.getElementById(“demo”).innerHTML =
“The text from the intro paragraph is: ” + element.innerHTML;
</script>
</body>
</html>
Output
JavaScript HTML DOM
Finding HTML Elements by Id
This example demonstrates the getElementsById method.
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.
Finding HTML Elements by Tag Name
This example finds all <p> elements:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements by Tag Name.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
<p id=”demo”></p>
<script>
const element = document.getElementsByTagName(“p”);
document.getElementById(“demo”).innerHTML = ‘The text in first paragraph (index 0) is: ‘ + element[0].innerHTML;
</script>
</body>
</html>
Output
JavaScript HTML DOM
Finding HTML Elements by Tag Name.
This example demonstrates the getElementsByTagName method.
The text in first paragraph (index 0) is: Finding HTML Elements by Tag Name.
This example searches the element with id=”main”, and then finds all <p> elements inside “main”.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<div id=”main”>
<p>Finding HTML Elements by Tag Name</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
</div>
<p id=”demo”></p>
<script>
const x = document.getElementById(“main”);
const y = x.getElementsByTagName(“p”);
document.getElementById(“demo”).innerHTML =
‘The first paragraph (index 0) inside “main” is: ‘ + y[0].innerHTML;
</script>
</body>
</html>
Output
JavaScript HTML DOM
Finding HTML Elements by Tag Name
This example demonstrates the getElementsByTagName method.
The first paragraph (index 0) inside "main" is: Finding HTML Elements by Tag Name
Finding HTML Elements by Class Name
To find all HTML elements with the same class name, use getElementsByClassName().
This example returns a list of all elements with class=”intro”.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements by Class Name.</p>
<p class=”intro”>Hello World!</p>
<p class=”intro”>This example demonstrates the <b>getElementsByClassName</b> method.</p>
<p id=”demo”></p>
<script>
const x = document.getElementsByClassName(“intro”);
document.getElementById(“demo”).innerHTML =
‘The first paragraph (index 0) with class=”intro” is: ‘ + x[0].innerHTML;
</script>
</body>
</html>
Output
JavaScript HTML DOM
Finding HTML Elements by Class Name.
Hello World!
This example demonstrates the getElementsByClassName method.
The first paragraph (index 0) with class="intro" is: Hello World!
Finding HTML Elements by CSS Selectors
To find all HTML elements that matches a specified CSS selector (id, class names, types, attributes, values of attributes, etc), use the querySelectorAll() method.
This example returns a list of all <p> elements with class=”intro”.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements by Query Selector</p>
<p class=”intro”>Hello World!.</p>
<p class=”intro”>This example demonstrates the <b>querySelectorAll</b> method.</p>
<p id=”demo”></p>
<script>
const x = document.querySelectorAll(“p.intro”);
document.getElementById(“demo”).innerHTML =
‘The first paragraph (index 0) with class=”intro” is: ‘ + x[0].innerHTML;
</script>
</body>
</html>
Output
JavaScript HTML DOM
Finding HTML Elements by Query Selector
Hello World!.
This example demonstrates the querySelectorAll method.
The first paragraph (index 0) with class="intro" is: Hello World!.
Finding HTML Elements by HTML Object Collections
This example searches the form element with id=”frm1″, in the forms collection, and showcases all element values.
Example
<!DOCTYPE html>
<html>
<body><h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements Using <b>document.forms</b>.</p>
<form id=”frm1″ action=”/action_page.php”>
First name: <input type=”text” name=”fname” value=”Dr”><br>
Last name: <input type=”text” name=”lname” value=”Jackson”><br><br>
<input type=”submit” value=”Submit”>
</form>
<p>These are the values of each element in the form:</p>
<p id=”demo”></p>
<script>
const x = document.forms[“frm1”];
let text = “”;
for (let i = 0; i < x.length ;i++) {
text += x.elements[i].value + “<br>”;
}
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
JavaScript HTML DOM
Finding HTML Elements Using document.forms.
These are the values of each element in the form: