In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > objects > NodeList

NodeList collection

Browser support:

Represents a live collection of nodes.

The elements in the collection are sorted in source code order.
A live collection means that the modification of the document affects the collection. See Example 2 for details.

Syntax:

Methods that return the object:

+	object.getElementsByClassName (className)
	Related objects: document, XMLDocument Related HTML objects: a, abbr, acronym, address, b, bdo, big, blink, blockquote, body, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frameset, h1, h2, h3, h4, h5, h6, head, html, i, img, ins, kbd, keygen, label, legend, li, listing, map, marquee, menu, nobr, noframes, noscript, object, ol, optgroup, option, p, plaintext, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, xml, xmp
+	object.getElementsByName (name)
	Related objects: document, XMLDocument
+	object.getElementsByTagName (tagName)
	Related objects: document, XMLDocument Related HTML objects: a, abbr, acronym, address, b, bdo, big, blink, blockquote, body, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frameset, h1, h2, h3, h4, h5, h6, head, html, i, img, ins, kbd, keygen, label, legend, li, listing, map, marquee, menu, nobr, noframes, noscript, object, ol, optgroup, option, p, plaintext, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, xml, xmp
+	object.getElementsByTagNameNS (namespaceURI, tagName)
	Related objects: document, XMLDocument Related HTML objects: a, abbr, acronym, address, b, bdo, big, blink, blockquote, body, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frameset, h1, h2, h3, h4, h5, h6, head, html, i, img, ins, kbd, keygen, label, legend, li, listing, map, marquee, menu, nobr, noframes, noscript, object, ol, optgroup, option, p, plaintext, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, xmp
+	object.querySelectorAll (selectors)
	Related objects: document, DocumentFragment, XMLDocument Related HTML objects: a, abbr, acronym, address, b, bdo, big, blink, blockquote, body, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frameset, h1, h2, h3, h4, h5, h6, head, html, i, img, ins, kbd, keygen, label, legend, li, listing, map, marquee, menu, nobr, noframes, noscript, object, ol, optgroup, option, p, plaintext, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, xmp
+	object.tags (tagName)
	Related objects: all, anchors, applets, areas, boundElements, cells, childNodes, children, elements, embeds, forms, images, links, options, rows, scripts, tBodies Related HTML objects: form, select
+	object.urns (URN)
	Related objects: all, anchors, applets, areas, boundElements, cells, children, elements, embeds, forms, images, links, options, rows, scripts, tBodies Related HTML objects: form, select

The base interface, through which you can add new functionalities to the NodeList collection, is the NodeList interface.

Possible members:

Properties:

length

Returns an integer that specifies the number of nodes in the current collection.

This property is read-only.

Methods:

[nameOrIndex]

Returns a node or a collection of nodes from the current collection by name or index.

Parameters:

nameOrIndex

Required. String or zero-based integer that specifies the node or nodes to retrieve.

If an integer value is specified, it specifies the index of the node to retrieve.
If this parameter is a string, then it specifies a value for the name or id property of the element or elements to retrieve.

Return value:

If no match is found, it returns undefined.
If exactly one match is found, it returns the matching node.
If more than one match is found, it returns a NodeList sub-collection filled with the matching elements. The sub-collection contains the matching elements in source order.

In Firefox, Opera, Google Chrome and Safari, if more than one match is found, the first matching element is returned.

item (nameOrIndex [, subIndex])

Returns an node or a collection of nodes from the current collection by name or index.

Parameters:

nameOrIndex

Required. String or zero-based integer that specifies the node or nodes to retrieve.

If an integer value is specified, it specifies the index of the node to retrieve.
If this parameter is a string, then it specifies a value for the name or id property of the element or elements to retrieve.

Firefox, Google Chrome and Safari do not support string values.

subIndex

Optional. Supported by Internet Explorer only. If more than one matching element is found for the index parameter (possible only if it is a string), the item method creates a NodeList sub-collection filled with the matching elements. In that case, the subIndex property specifies the position of the element in the sub-collection to retrieve. In other cases, the subIndex property has no meaning.

Return value:

If no match is found, it returns null in Internet Explorer, Firefox and Opera, and returns undefined in Google Chrome and Safari.
If exactly one match is found, it returns the matching node.
If more than one match is found, it returns a NodeList sub-collection filled with the matching elements. The sub-collection contains the matching elements in source order.

In Opera, if more than one match is found, the first matching element is returned.

namedItem (name)

Returns an element or a collection of elements from the current collection by name.

Parameters:

name

Required. String that specifies a value for the name or id property of the element or elements to retrieve.

Return value:

If no match is found, it returns null.
If exactly one match is found, it returns the matching element.
If more than one match is found, it returns a NodeList sub-collection filled with the matching elements. The sub-collection contains the matching elements in source order.

In Firefox and Opera, if more than one match is found, the first matching element is returned.

Example HTML code 1:

This example illustrates the use of the NodeList collection:

<head>
    <script type="text/javascript">
        function GetCheckedFruits () {
            var elements = document.getElementsByName ("fruits");
            for (var i=0; i < elements.length; i++) {
                if (elements[i].checked) {
                    alert ("The " + (i + 1) + ". radio button is checked");
                }
            }
        }
    </script>
</head>
<body>
    <button onclick="GetCheckedFruits ()">Get the checked fruit!</button>
    apple <input type="radio" name="fruits" checked="checked" />
    peach <input type="radio" name="fruits" />
    cherry <input type="radio" name="fruits" />
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the meaning of live collections:

<head>
    <script type="text/javascript">
        function GetBoldElements () {
            var container = document.getElementById ("container");
            var boldTags = container.getElementsByTagName ("b");

            alert ("There are " + boldTags.length + " bold elements in the container.");

                // add a new bold element to the container
            var newBoldTag = document.createElement ("b");
            newBoldTag.innerHTML = "new bold element";
            container.appendChild (newBoldTag);
            alert ("A new bold tag has been added to the container.");

            alert ("There are " + boldTags.length + " bold elements in the container.");

                // remove a bold element from the container
            container.removeChild (newBoldTag);
            alert ("A bold tag has been removed from the container.");

            alert ("There are " + boldTags.length + " bold elements in the container.");
        }
    </script>
</head>
<body>
    <button onclick="GetBoldElements ()">Get the number of bold elements in the container!</button>
    <br /><br />
    <div id="container">
        <b>First bold element in the container.</b>
        <br />
        <b>Second bold element in the container.</b>
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

External links:

NodeList (W3C)

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments

NodeList collection

Syntax:

Possible members:

Parameters:

Return value:

Parameters:

Return value:

Parameters:

Return value:

Example HTML code 1:

Example HTML code 2:

External links:

Post Content