Example
Get the HTML content of the first <p> element (index 0) inside the document:
var nodelist = document.getElementsByTagName("P").item(0).innerHTML;
The result of nodelist will be:
The first p element in the document.
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The item() method returns a node at the specified index in a NodeList object.
The nodes are sorted as they appear in the source code, and the index starts at 0.
A Node object's collection of child nodes is an example of a NodeList object.
Note: There are two ways to access a node at the specified index in a node list:
This syntax:
document.body.childNodes.item(0);
// The first child node of <body>Try it
Will produce the same result as this syntax:
document.body.childNodes[0];
// The first child node of <body>Try it
You can use whatever method you like, however, the most common method is [index].
Tip: Use the length property to return the number of nodes in a NodeList object.
Browser Support
| Method | |||||
|---|---|---|---|---|---|
| item() | Yes | Yes | Yes | Yes | Yes |
Syntax
nodelist.item(index)
or simply:
nodelist[index]
Parameter Values
| Parameter | Type | Description |
|---|---|---|
| index | Number | Required. The index of the node you want to return, in the node list. Note: The index starts at 0 |
Technical Details
| Return Value: | A Node object, representing the node at the specified index. Note: Returns null if the index number is out of range |
|---|---|
| DOM Version | Core Level 1 Nodelist Object |
More Examples
Example
Get the HTML content of the first <p> element (index 0) inside a <div> element:
var div = document.getElementById("myDIV");
var nodelist =
div.getElementsByTagName("P")[0].innerHTML;
The result of nodelist will be:
First p element in div.
Try it Yourself »
Example
Change the HTML content of the first <p> element (index 0) inside a <div> element:
var div = document.getElementById("myDIV");
div.getElementsByTagName("P")[0].innerHTML
= "Paragraph changed";
Try it Yourself »
Example
Loop through all elements with class="child" in a <div> element, and change their background color:
var div = document.getElementById("myDIV");
var nodelist =
div.getElementsByClassName("child");
var i;
for (i = 0; i <
nodelist.length; i++) {
nodelist[i].style.backgroundColor = "red";
}
Try it Yourself »
Related Pages
HTML DOM Reference: nodelist.length Property
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