/    /  Javascript DOM- Collections

Javascript DOM- Collections

 

The getElementsByTagName() method returns an HTMLCollection object.

An HTMLCollection object is an array-like collection of HTML elements.

 

Example:

 

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p id="i2"></p>

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("i2").innerHTML =
"The innerHTML of the second paragraph is: " +
myCollection[1].innerHTML;
</script>

</body>
</html>

 

OUTPUT:

 

JavaScript HTML DOM
Hello World!
Hello Norway!
The innerHTML of the second paragraph is: Hello Norway!

 

HTMLCollection Length:

 

HTML collection length property provides the number of elements in an HTMLCollection:

 

Example:

 

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p id="i2"></p>

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("i2").innerHTML =
"This document contains " + myCollection.length + " paragraphs.";
</script>

</body>
</html>

 

OUTPUT:

 

JavaScript HTML DOM
Hello World!
Hello Norway!
This document contains 3 paragraphs.