Latest web development tutorials
 

HTML DOM length Propery

< Element Object

Example

Find out how many <p> elements there are in the document:

var nodelist = document.getElementsByTagName("P").length;

The result of nodelist will be:

4
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The length property returns the number of nodes in a NodeList object.

A Node object's collection of child nodes is an example of a NodeList object.

The length property is useful when you want to loop through the nodes in a node list (See "More Examples" below).

This property is read-only.

Tip: Use the item() method to return a node at the specified index in a NodeList object.


Browser Support

Property
length Yes Yes Yes Yes Yes

Syntax

nodelist.length

Technical Details

Return Value: A Number, representing the number of nodes in the nodelist
DOM Version Core Level 1 Nodelist Object

Examples

More Examples

Example

Find out how many <p> elements there are inside a <div> element:

var div = document.getElementById("myDIV");           // Get the <div> element with id="myDIV"
var nodelist = div.getElementsByTagName("P").length;  // Get the number of <p> elements inside <div>

The result of nodelist will be:

3
Try it Yourself »

Example

Loop through all <p> elements inside a <div> element, and change the background color of each <p>:

var div = document.getElementById("myDIV");
var nodelist = div.getElementsByTagName("P");

var i;
for (i = 0; i < nodelist.length; i++) {
    nodelist[i].style.backgroundColor = "red";
}
Try it Yourself »

Example

Return the number of child nodes of the <body> element:

var nodelist = document.body.childNodes.length;

The result of nodelist will be:

12
Try it Yourself »

Example

Loop through the child nodes of <body> and output the node name of each child node:

var nodelist = document.body.childNodes;

var txt = "";
var i;
for (i = 0; i < nodelist.length; i++) {
    txt = txt + nodelist[i].nodeName + "<br>";
}

The result of txt will be:

#comment
#text
P
#text
BUTTON
#text
P
#text
P
#text
SCRIPT
#text
Try it Yourself »

Related Pages

HTML DOM Reference: href="met_nodelist_item.html">nodelist.item() Method

HTML DOM Reference: element.childNodes Property

HTML DOM Reference: href="met_element_getelementsbyclassname.html">element.getElementsByClassName() Method

HTML DOM Reference: href="met_element_getelementsbytagname.html">element.getElementsByTagName() Method

HTML DOM Reference: href="met_element_queryselectorall.html">element.querySelectorAll() Method

HTML DOM Reference: href="met_document_getelementsbyclassname.html">document.getElementsByClassName() Method

HTML DOM Reference: href="met_doc_getelementsbyname.html">document.getElementsByName() Method

HTML DOM Reference: href="met_document_getelementsbytagname.html">document.getElementsByTagName() Method

HTML DOM Reference: href="met_document_queryselectorall.html">document.querySelectorAll() Method


< Element Object