Scribd
Upload
8 views

JavaScript HTML DOM

The document explains the HTML Document Object Model (DOM) and how JavaScript can interact with HTML elements, allowing for dynamic content manipulation. It covers methods for accessing, changing, adding, and deleting HTML elements, as well as handling events and validating forms. Additionally, it introduces concepts of animation using JavaScript within the DOM framework.

Uploaded by

thaakuranujtomar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

JavaScript HTML DOM

The document explains the HTML Document Object Model (DOM) and how JavaScript can interact with HTML elements, allowing for dynamic content manipulation. It covers methods for accessing, changing, adding, and deleting HTML elements, as well as handling events and validating forms. Additionally, it introduces concepts of animation using JavaScript within the DOM framework.

Uploaded by

thaakuranujtomar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 30

JavaScript HTML DOM

With the HTML DOM, JavaScript can access and change all the elements of an HTML
document.

The HTML DOM (Document Object


Model)
When a web page is loaded, the browser creates a Document Object Model of the page.

The HTML DOM model is constructed as a tree of Objects:

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

 JavaScript can change all the HTML elements in the page


 JavaScript can change all the HTML attributes in the page
 JavaScript can change all the CSS styles in the page
 JavaScript can remove existing HTML elements and attributes
 JavaScript can add new HTML elements and attributes
 JavaScript can react to all existing HTML events in the page
 JavaScript can create new HTML events in the page
What You Will Learn
In the next chapters of this tutorial you will learn:

 How to change the content of HTML elements


 How to change the style (CSS) of HTML elements
 How to react to HTML DOM events
 How to add and delete HTML elements

What is the DOM?


The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that
allows programs and scripts to dynamically access and update the content, structure, and
style of a document."

The W3C DOM standard is separated into 3 different parts:

 Core DOM - standard model for all document types


 XML DOM - standard model for XML documents
 HTML DOM - standard model for HTML documents

What is the HTML DOM?


The HTML DOM is a standard object model and programming interface for HTML. It
defines:

 The HTML elements as objects


 The properties of all HTML elements
 The methods to access all HTML elements
 The events for all HTML elements

In other words: The HTML DOM is a standard for how to get, change, add, or delete
HTML elements.

JavaScript - HTML DOM


Methods
HTML DOM methods are actions you can perform (on HTML Elements).

HTML DOM properties are values (of HTML Elements) that you can set or change.

The DOM Programming Interface


The HTML DOM can be accessed with JavaScript (and with other programming languages).

In the DOM, all HTML elements are defined as objects.

The programming interface is the properties and methods of each object.

A property is a value that you can get or set (like changing the content of an HTML
element).

A method is an action you can do (like add or deleting an HTML element).

Example
The following example changes the content (the innerHTML) of the <p> element
with id="demo":

Example

<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

In the example above, getElementById is a method, while innerHTML is a property.

The getElementById Method


The most common way to access an HTML element is to use the id of the element.
In the example above the getElementById method used id="demo" to find the element.

The innerHTML Property


The easiest way to get the content of an element is by using the innerHTML property.

The innerHTML property is useful for getting or replacing the content of HTML elements.

The innerHTML property can be used to get or change any HTML element
including <html> and <body>.

JavaScript HTML DOM


Document

The HTML DOM document object is the owner of all other objects in your web page.

The HTML DOM Document Object


The document object represents your web page.

If you want to access any element in an HTML page, you always start with accessing the document object.

Below are some examples of how you can use the document object to access and manipulate HTML.

Finding HTML Elements


Method Description

document.getElementById(id) Find an element by element id

document.getElementsByTagName( Find elements by tag name


name)

document.getElementsByClassNam Find elements by class name


e(name)
Changing HTML Elements
Property Description

element.innerHTML = new html Change the inner HTML of an


content element

element.attribute = new value Change the attribute value of an


HTML element

element.style.property = new style Change the style of an HTML


element

Method Description

element.setAttribute(attribute, value) Change the attribute value of an


HTML element

Adding and Deleting Elements


Method Description

document.createElement(element) Create an HTML element

document.removeChild(element) Remove an HTML element

document.appendChild(element) Add an HTML element

document.replaceChild(new, old) Replace an HTML element

document.write(text) Write into the HTML output stream

ADVERTISEMENT

Adding Events Handlers


Method Description

document.getElementById(id).onclick = function() Adding event


{code} handler code to
an onclick event

Finding HTML Objects


The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and properties. These are still
valid in HTML5.

Later, in HTML DOM Level 3, more objects, collections, and properties were added.

Property Description D
O
M

document.anchors Returns all <a> elements that have a 1


name attribute

document.applets Deprecated 1

document.baseURI Returns the absolute base URI of the 3


document

document.body Returns the <body> element 1

document.cookie Returns the document's cookie 1

document.doctype Returns the document's doctype 3

document.documentEleme Returns the <html> element 3


nt

document.documentMode Returns the mode used by the browser 3

document.documentURI Returns the URI of the document 3

document.domain Returns the domain name of the 1


document server

document.domConfig Obsolete. 3

document.embeds Returns all <embed> elements 3

document.forms Returns all <form> elements 1

document.head Returns the <head> element 3

document.images Returns all <img> elements 1

document.implementation Returns the DOM implementation 3

document.inputEncoding Returns the document's encoding 3


(character set)

document.lastModified Returns the date and time the 3


document was updated

document.links Returns all <area> and <a> elements 1


that have a href attribute

document.readyState Returns the (loading) status of the 3


document

document.referrer Returns the URI of the referrer (the 1


linking document)

document.scripts Returns all <script> elements 3

document.strictErrorCheck Returns if error checking is enforced 3


ing

document.title Returns the <title> element 1


document.URL Returns the complete URL of the document

JavaScript HTML DOM


Elements

Finding HTML Elements


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:

 Finding HTML elements by id


 Finding HTML elements by tag name
 Finding HTML elements by class name
 Finding HTML elements by CSS selectors
 Finding HTML elements by HTML object collections

Finding HTML Element by Id


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.

Finding HTML Elements by Tag Name


This example finds all <p> elements:

const element = document.getElementsByTagName("p");


This example finds the element with id="main", and then finds all <p> elements
inside "main":

Example

const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

Finding HTML Elements by Class


Name
const x = document.getElementsByClassName("intro");

Finding HTML Elements by CSS


Selectors
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.

This example returns a list of all <p> elements with class="intro".

Example

const x = document.querySelectorAll("p.intro");

Finding HTML Elements by HTML


Object Collections
This example finds the form element with id="frm1", in the forms collection, and displays
all element values:

Example
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;

JavaScript HTML DOM -


Changing HTML

The HTML DOM allows JavaScript to change the content of HTML elements.

The easiest way to modify the content of an HTML element is by using


the innerHTML property.

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>

Changing the Value of an Attribute


To change the value of an HTML attribute, use this syntax:

document.getElementById(id).attribute = new value

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>
document.write()
In JavaScript, document.write() can be used to write directly to the HTML output stream:

Example

<!DOCTYPE html>
<html>
<body>

<p>Bla bla bla</p>

<script>
document.write(Date());
</script>

<p>Bla bla bla</p>

</body>
</html>

JavaScript Forms
JavaScript Form Validation
HTML form validation can be done by JavaScript.

If a form field (fname) is empty, this function alerts a message, and returns false, to
prevent the form from being submitted:

JavaScript Example

function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}

The function can be called when the form is submitted:

HTML Form Example

<form name="myForm" action="/action_page.php" onsubmit="return


validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
JavaScript Can Validate Numeric Input
JavaScript is often used to validate numeric input:

Please input a number between 1 and 10

Submit

Automatic HTML Form Validation


HTML form validation can be performed automatically by the browser:

If a form field (fname) is empty, the required attribute prevents this form from being
submitted:

HTML Form Example

<form action="/action_page.php" method="post">


<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>

Automatic HTML form validation does not work in Internet Explorer 9 or earlier.

Data Validation
Data validation is the process of ensuring that user input is clean, correct, and useful.

Typical validation tasks are:

 has the user filled in all required fields?


 has the user entered a valid date?
 has the user entered text in a numeric field?

Most often, the purpose of data validation is to ensure correct user input.

Validation can be defined by many different methods, and deployed in many different
ways.

Server side validation is performed by a web server, after input has been sent to the
server.
Client side validation is performed by a web browser, before input is sent to a web
server.

HTML Constraint Validation


HTML5 introduced a new HTML validation concept called constraint validation.

HTML constraint validation is based on:

 Constraint validation HTML Input Attributes


 Constraint validation CSS Pseudo Selectors
 Constraint validation DOM Properties and Methods

Constraint Validation HTML Input


Attributes
Attribute Description

disabled Specifies that the input element should be disabled

max Specifies the maximum value of an input element

min Specifies the minimum value of an input element

pattern Specifies the value pattern of an input element

required Specifies that the input field requires an element

type Specifies the type of an input element

For a full list, go to HTML Input Attributes.

Constraint Validation CSS Pseudo


Selectors
Selector Description

:disabled Selects input elements with the "disabled" attribute specified

:invalid Selects input elements with invalid values

:optional Selects input elements with no "required" attribute specified

:required Selects input elements with the "required" attribute specified

:valid Selects input elements with valid values

For a full list, go to CSS Pseudo Classes.


JavaScript HTML DOM - Changing
CSS
The HTML DOM allows JavaScript to change the style of HTML elements.

Changing HTML Style


To change the style of an HTML element, use this syntax:

document.getElementById(id).style.property = new style

The following example changes the style of a <p> element:

Example

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

</body>
</html>

Using Events
The HTML DOM allows you to execute code when an event occurs.

Events are generated by the browser when "things happen" to HTML elements:

 An element is clicked on
 The page has loaded
 Input fields are changed

You will learn more about events in the next chapter of this tutorial.

This example changes the style of the HTML element with id="id1", when the user clicks a
button:

Example
<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>

<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

</body>
</html>

JavaScript HTML DOM


Animation
Learn to create HTML animations using JavaScript.

A Basic Web Page


To demonstrate how to create HTML animations with JavaScript, we will use a simple web page:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript Animation</h1>

<div id="animation">My animation will go here</div>

</body>
</html>

Create an Animation Container


All animations should be relative to a container element.

Example

<div id ="container">
<div id ="animate">My animation will go here</div>
</div>
Style the Elements
The container element should be created with style = "position: relative".

The animation element should be created with style = "position: absolute".

Example

#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}

ADVERTISEMENT

Animation Code
JavaScript animations are done by programming gradual changes in an element's style.

The changes are called by a timer. When the timer interval is small, the animation looks continuous.

The basic code is:

Example

id = setInterval(frame, 5);

function frame() {
if (/* test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
Create the Full Animation Using
JavaScript
Example

function myMove() {
let id = null;
const elem = document.getElementById("animate");
let pos = 0;
clearInterval(id);
id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}

JavaScript HTML DOM Events


HTML DOM allows JavaScript to react to HTML events:

Mouse Over Me

Click Me

Reacting to Events
A JavaScript can be executed when an event occurs, like when a user clicks on an HTML
element.

To execute code when a user clicks on an element, add JavaScript code to an HTML event
attribute:

onclick=JavaScript

Examples of HTML events:

 When a user clicks the mouse


 When a web page has loaded
 When an image has been loaded
 When the mouse moves over an element
 When an input field is changed
 When an HTML form is submitted
 When a user strokes a key

In this example, the content of the <h1> element is changed when a user clicks on it:
Example

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

</body>
</html>

In this example, a function is called from the event handler:

Example

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>

</body>
</html>

JavaScript HTML DOM


EventListener
The addEventListener() method
Example

Add an event listener that fires when a user clicks a button:

document.getElementById("myBtn").addEventListener("click", displayDate);

The addEventListener() method attaches an event handler to the specified element.


The addEventListener() method attaches an event handler to an element without overwriting existing event
handlers.

You can add many event handlers to one element.

You can add many event handlers of the same type to one element, i.e two "click" events.

You can add event listeners to any DOM object not only HTML elements. i.e the window object.

The addEventListener() method makes it easier to control how the event reacts to bubbling.

When using the addEventListener() method, the JavaScript is separated from the HTML markup, for better
readability and allows you to add event listeners even when you do not control the HTML markup.

You can easily remove an event listener by using the removeEventListener() method.

Syntax
element.addEventListener(event, function, useCapture);

The first parameter is the type of the event (like "click" or "mousedown" or any other HTML DOM Event.)

The second parameter is the function we want to call when the event occurs.

The third parameter is a boolean value specifying whether to use event bubbling or event capturing. This parameter
is optional.

Note that you don't use the "on" prefix for the event; use "click" instead of "onclick".

Add an Event Handler to an Element


Example

Alert "Hello World!" when the user clicks on an element:

element.addEventListener("click", function(){ alert("Hello World!"); });

You can also refer to an external "named" function:

Example

Alert "Hello World!" when the user clicks on an element:


element.addEventListener("click", myFunction);

function myFunction() {
alert ("Hello World!");
}

JavaScript HTML DOM


Navigation

With the HTML DOM, you can navigate the node tree using node relationships.

DOM Nodes
According to the W3C HTML DOM standard, everything in an HTML document is a node:

 The entire document is a document node


 Every HTML element is an element node
 The text inside HTML elements are text nodes
 Every HTML attribute is an attribute node (deprecated)
 All comments are comment nodes

With the HTML DOM, all nodes in the node tree can be accessed by JavaScript.

New nodes can be created, and all nodes can be modified or deleted.

Node Relationships
The nodes in the node tree have a hierarchical relationship to each other.
The terms parent, child, and sibling are used to describe the relationships.

 In a node tree, the top node is called the root (or root node)
 Every node has exactly one parent, except the root (which has no parent)
 A node can have a number of children
 Siblings (brothers or sisters) are nodes with the same parent

<html>

<head>
<title>DOM Tutorial</title>
</head>

<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>

</html>

From the HTML above you can read:

 <html> is the root node


 <html> has no parents
 <html> is the parent of <head> and <body>
 <head> is the first child of <html>
 <body> is the last child of <html>

and:

 <head> has one child: <title>


 <title> has one child (a text node): "DOM Tutorial"
 <body> has two children: <h1> and <p>
 <h1> has one child: "DOM Lesson one"
 <p> has one child: "Hello world!"
 <h1> and <p> are siblings

ADVERTISEMENT
Navigating Between Nodes
You can use the following node properties to navigate between nodes with JavaScript:

 parentNode
 childNodes[nodenumber]
 firstChild
 lastChild
 nextSibling
 previousSibling

Child Nodes and Node Values


A common error in DOM processing is to expect an element node to contain text.

Example:

<title id="demo">DOM Tutorial</title>

The element node <title> (in the example above) does not contain text.

It contains a text node with the value "DOM Tutorial".

The value of the text node can be accessed by the node's innerHTML property:

myTitle = document.getElementById("demo").innerHTML;

Accessing the innerHTML property is the same as accessing the nodeValue of the first
child:

myTitle = document.getElementById("demo").firstChild.nodeValue;

Accessing the first child can also be done like this:

myTitle = document.getElementById("demo").childNodes[0].nodeValue;

All the (3) following examples retrieves the text of an <h1> element and copies it into
a <p> element:

Example

<html>
<body>

<h1 id="id01">My First Page</h1>


<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").innerHTML;
</script>
</body>
</html>

Example

<html>
<body>

<h1 id="id01">My First Page</h1>


<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

Example

<html>
<body>

<h1 id="id01">My First Page</h1>


<p id="id02">Hello!</p>

<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

InnerHTML
In this tutorial we use the innerHTML property to retrieve the content of an HTML element.

However, learning the other methods above is useful for understanding the tree structure
and the navigation of the DOM.
DOM Root Nodes
There are two special properties that allow access to the full document:

 document.body - The body of the document


 document.documentElement - The full document

Example

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>

</body>
</html>

Example

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>

</body>
</html>

The nodeName Property


The nodeName property specifies the name of a node.

 nodeName is read-only
 nodeName of an element node is the same as the tag name
 nodeName of an attribute node is the attribute name
 nodeName of a text node is always #text
 nodeName of the document node is always #document

Example

<h1 id="id01">My First Page</h1>


<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").nodeName;
</script>

Note: nodeName always contains the uppercase tag name of an HTML element.

The nodeValue Property


The nodeValue property specifies the value of a node.

 nodeValue for element nodes is null


 nodeValue for text nodes is the text itself
 nodeValue for attribute nodes is the attribute value

The nodeType Property


The nodeType property is read only. It returns the type of a node.

Example

<h1 id="id01">My First Page</h1>


<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").nodeType;
</script>

The most important nodeType properties are:

Node Typ Example


e
ELEMENT_NODE 1 <h1 class="heading">W3Schools</h1>

ATTRIBUTE_NOD 2 class = "heading" (deprecated)


E

TEXT_NODE 3 W3Schools

COMMENT_NOD 8 <!-- This is a comment -->


E

DOCUMENT_NO 9 The HTML document itself (the parent of


DE <html>)

DOCUMENT_TYP 10 <!Doctype html>


E_NODE

Type 2 is deprecated in the HTML DOM (but works). It is not deprecated in the XML DOM.

JavaScript HTML DOM Elements


(Nodes)
Adding and Removing Nodes (HTML Elements)

Creating New HTML Elements (Nodes)


To add a new element to the HTML DOM, you must create the element (element node) first,
and then append it to an existing element.

Example

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");


element.appendChild(para);
</script>
Example Explained
This code creates a new <p> element:

const para = document.createElement("p");

To add text to the <p> element, you must create a text node first. This code creates a text
node:

const node = document.createTextNode("This is a new paragraph.");

Then you must append the text node to the <p> element:

para.appendChild(node);

Finally you must append the new element to an existing element.

This code finds an existing element:

const element = document.getElementById("div1");

This code appends the new element to the existing element:

element.appendChild(para)

Creating new HTML Elements -


insertBefore()
The appendChild() method in the previous example, appended the new element as the
last child of the parent.

If you don't want that you can use the insertBefore() method:

Example

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");


const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
Removing Existing HTML Elements
To remove an HTML element, use the remove() method:

Example

<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const elmnt = document.getElementById("p1"); elmnt.remove();
</script>

Example Explained
The HTML document contains a <div> element with two child nodes (two <p> elements):

<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

Find the element you want to remove:

const elmnt = document.getElementById("p1");

Then execute the remove() method on that element:

elmnt.remove();

The remove() method does not work in older browsers, see the example below on how to
use removeChild() instead.

Removing a Child Node


For browsers that does not support the remove() method, you have to find the parent node
to remove an element:

Example

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

Example Explained
This HTML document contains a <div> element with two child nodes (two <p> elements):

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

Find the element with id="div1":

const parent = document.getElementById("div1");

Find the <p> element with id="p1":

const child = document.getElementById("p1");

Remove the child from the parent:

parent.removeChild(child);

Here is a common workaround: Find the child you want to remove, and use
its parentNode property to find the parent:

const child = document.getElementById("p1");


child.parentNode.removeChild(child);

Replacing HTML Elements


To replace an element to the HTML DOM, use the replaceChild() method:

Example

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

JavaScript HTML DOM


Collections

The HTMLCollection Object


The getElementsByTagName() method returns an HTMLCollection object.

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

The following code selects all <p> elements in a document:

Example

const myCollection = document.getElementsByTagName("p");

The elements in the collection can be accessed by an index number.

To access the second <p> element you can write:

myCollection[1]

Note: The index starts at 0.

HTML HTMLCollection Length


The length property defines the number of elements in an HTMLCollection:

Example

myCollection.length

The length property is useful when you want to loop through the elements in a collection:
Example

Change the text color of all <p> elements:

const myCollection = document.getElementsByTagName("p");


for (let i = 0; i < myCollection.length; i++) {
myCollection[i].style.color = "red";
}

An HTMLCollection is NOT an array!

An HTMLCollection may look like an array, but it is not.

You can loop through the list and refer to the elements with a number (just like an array).

However, you cannot use array methods like valueOf(), pop(), push(), or join() on an
HTMLCollection.

You might also like