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

You are here: Reference > JavaScript > client-side > xml handling > methods > firstChild (TreeWalker)

firstChild method (TreeWalker)

Browser support:

9

Finds the first child of the current node in the tree represented by the current TreeWalker object. If it exists, it will be made the current node and returned, else the current node is retained and null is returned.

Note: The TreeWalker object and its firstChild method are supported in Internet Explorer from version 9.

The TreeWalker object represents the result of the createTreeWalker method as a tree. The elements of the resulting tree refer to the nodes in the document that fulfill the conditions specified for the createTreeWalker method. For further details, please see the page for the TreeWalker object.

Syntax:

object.firstChild ( );

You can find the related objects in the Supported by objects section below.

Return value:

Returns the node if found, else returns null.

Example HTML code 1:

This example illustrates the use of the firstChild method:

<head>
    <script type="text/javascript">
        function ElementChecker (node) {
            if (node.tagName.toLowerCase () == 'span') {
                return NodeFilter.FILTER_ACCEPT;
            }
            return NodeFilter.FILTER_SKIP;
        }

        function FindSubSection () {
            var contElem = document.getElementById ("content");
            if (document.createTreeWalker) {
                walker = document.createTreeWalker (contElem, NodeFilter.SHOW_ELEMENT, ElementChecker, false);
                
                    // get the first matching node
                var node = walker.firstChild ();
                
                node = walker.firstChild ();
                alert ("The contents of the first subsection:\n " + node.innerHTML);                
            }
            else {
                alert ("Your browser does not support the createTreeWalker method!");
            }
        }
    </script>
</head>
<body>
    <div id="content">
        <span>
            <b>1. Section</b><br />
            <span>
                <b>1.1. Subsection</b><br />
            </span>
        </span>
        <span>
            <b>2.Section</b><br />
        </span>
    </div>

    <br /><br />
    <button onclick="FindSubSection ()">Find the first subsection with the TreeWalker object</button>
</body>