X
HOME HTML5 CSS3 JAVASCRIPT SQL PHP5 JQUERY ANGULAR BOOTSTRAP3 XML MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

HTML DOM item() Method

Element Object Reference Element Object

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


Examples

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: element.getElementsByClassName() Method

HTML DOM Reference: element.getElementsByTagName() Method

HTML DOM Reference: element.querySelectorAll() Method

HTML DOM Reference: document.getElementsByClassName() Method

HTML DOM Reference: document.getElementsByName() Method

HTML DOM Reference: document.getElementsByTagName() Method

HTML DOM Reference: document.querySelectorAll() Method


Element Object Reference Element Object


Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook