You are here: Reference > JavaScript > client-side > xml handling > objects > XPathResult

XPathResult object

Browser support:
Represents the result of the evaluation of an XPath expression.
The evaluate method evaulates an XPath expression and returns an XPathResult object that represents the result.
The type of the result depends on the fourth parameter of the evaluate method, or if its value is ANY_TYPE, then it depends on the expression specified by the first parameter of the method. The type of the result can be retrieved with the resultType property.
The members of the XPathResult object provide access to the different result types.

Syntax:

Methods that return the object:
object.evaluate (xpathExpression, contextNode, namespaceResolver, resultType, result)
Related objects:
The base interface, through which you can add new functionalities to the XPathResult object, is the XPathResult interface.

Possible members:

Constants:
The following constants are available in the scope of the XPathResult object.
You can use them directly through the XPathResult interface (XPathResult.ANY_TYPE) or through an instance of the XPathResult object. The constants represent the result types supported by the object. You can use them for the value of the resultType property or for the fourth parameter of the evaluate method.
Using the constants instead of their numeric values results in more readable code.
ANY_TYPE
0 The type of the result depends on the expression specified by the first parameter of the evaluate method.
NUMBER_TYPE
1 The result is a number. Use the numberValue property to get the value of the result.
STRING_TYPE
2 The result is a string. Use the stringValue property to get the value of the result.
BOOLEAN_TYPE
3 The result is a boolean. Use the booleanValue property to get the value of the result.
UNORDERED_NODE_ITERATOR_TYPE
4 The result contains all nodes that match the expression, but not necessarily in the same order as they appear in the document hierarchy. Use the iterateNext method to get the matching nodes.
ORDERED_NODE_ITERATOR_TYPE
5 The result contains all nodes that match the expression, in the same order as they appear in the document hierarchy. Use the iterateNext method to get the matching nodes.
UNORDERED_NODE_SNAPSHOT_TYPE
6 The result contains snapshots for all nodes that match the expression, but not necessarily in the same order as they appear in the document hierarchy. Use the snapshotItem method to get the matching nodes.
ORDERED_NODE_SNAPSHOT_TYPE
7 The result contains snapshots for all nodes that match the expression, in the same order as they appear in the document hierarchy. Use the snapshotItem method to get the matching nodes.
ANY_UNORDERED_NODE_TYPE
8 The result is a node that matches the expression. The result node is not necessarily the first matching node in the document hierarchy. Use the singleNodeValue property to get the matching node.
FIRST_ORDERED_NODE_TYPE
9 The result is the first node in the document hierarchy that matches the expression. Use the singleNodeValue property to get the matching node.
Properties:
booleanValue
If the type of the result represented by the XPathResult object is Boolean, returns the value of the result.
invalidIteratorState
Retrieves whether the iterator of the current XPathResult object is valid or not.
numberValue
If the type of the result represented by the XPathResult object is number, returns the value of the result.
resultType
Retrieves the type of the result represented by the XPathResult object.
singleNodeValue
Returns the single node represented by the current XPathResult object.
snapshotLength
Returns the length of the snapshots collection.
stringValue
If the type of the result represented by the XPathResult object is string, returns the value of the result.
Methods:
iterateNext
Moves the iterator to the next node in the result set and returns the node referenced by the current iterator.
snapshotItem
Returns a matching node from the snapshots collection.

Example HTML code 1:

This example shows how to get all span elements that are immediate children of a given element:
<head>
    <style>
        .level1 {color:red;}
        .level2 {color:blue;}
        .level3 {color:green;}
    </style>
    <script type="text/javascript">
        function GetSpanElements () {
            var message = "";

            if (document.evaluate) {    // Firefox, Opera, Google Chrome and Safari
                var container = document.getElementById ("container");
                var xPathRes = document.evaluate ( 'span', container, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

                message += "The contents of the span elements:<br />";
                var actualSpan = xPathRes.iterateNext ();
                while (actualSpan) {
                    message += "<b>" + actualSpan.innerHTML + "</b><br />";
                    actualSpan = xPathRes.iterateNext ()
                }
            }
            else {  // Internet Explorer
                message = "Your browser does not support the evaluate method!";
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onload="GetSpanElements ()">
    <span class="level1">Span 1</span>
    <div id="container">
        <span class="level2">Span 2</span>
        <div>
            <span class="level3">Span 3</span>
            <span class="level3">Span 4</span>
        </div>
        <span class="level2">Span 5</span>
        <span class="level2">Span 6</span>
    </div>
    <span class="level1">Span 7</span>
    <br /><br />
    <div id="info" style="background-color:#e0b0b0; width:400px"></div>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to get all span elements that are descendants of a given element:
<head>
    <style>
        .level1 {color:red;}
        .level2 {color:blue;}
        .level3 {color:green;}
    </style>
    <script type="text/javascript">
        function GetSpanElements () {
            var message = "";

            if (document.evaluate) {    // Firefox, Opera, Google Chrome and Safari
                var container = document.getElementById ("container");
                var xPathRes = document.evaluate ( './/span', container, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

                message += "The contents of the span elements:<br />";
                var actualSpan = xPathRes.iterateNext ();
                while (actualSpan) {
                    message += "<b>" + actualSpan.innerHTML + "</b><br />";
                    actualSpan = xPathRes.iterateNext ()
                }
            }
            else {  // Internet Explorer
                message = "Your browser does not support the evaluate method!";
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onload="GetSpanElements ()">
    <span class="level1">Span 1</span>
    <div id="container">
        <span class="level2">Span 2</span>
        <div>
            <span class="level3">Span 3</span>
            <span class="level3">Span 4</span>
        </div>
        <span class="level2">Span 5</span>
        <span class="level2">Span 6</span>
    </div>
    <span class="level1">Span 7</span>
    <br /><br />
    <div id="info" style="background-color:#e0b0b0; width:400px"></div>
</body>
Did you find this example helpful? yes no

Example HTML code 3:

This example shows how to get all span elements that are descendants but not immediate children of a given element:
<head>
    <style>
        .level1 {color:red;}
        .level2 {color:blue;}
        .level3 {color:green;}
    </style>
    <script type="text/javascript">
        function GetSpanElements () {
            var message = "";

            if (document.evaluate) {    // Firefox, Opera, Google Chrome and Safari
                var container = document.getElementById ("container");
                var xPathRes = document.evaluate ( '*//span', container, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

                message += "The contents of the span elements:<br />";
                var actualSpan = xPathRes.iterateNext ();
                while (actualSpan) {
                    message += "<b>" + actualSpan.innerHTML + "</b><br />";
                    actualSpan = xPathRes.iterateNext ()
                }
            }
            else {  // Internet Explorer
                message = "Your browser does not support the evaluate method!";
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onload="GetSpanElements ()">
    <span class="level1">Span 1</span>
    <div id="container">
        <span class="level2">Span 2</span>
        <div>
            <span class="level3">Span 3</span>
            <span class="level3">Span 4</span>
        </div>
        <span class="level2">Span 5</span>
        <span class="level2">Span 6</span>
    </div>
    <span class="level1">Span 7</span>
    <br /><br />
    <div id="info" style="background-color:#e0b0b0; width:400px"></div>
</body>
Did you find this example helpful? yes no

Example HTML code 4:

This example shows how to get all span elements in the document that are immediate children of an li element:
<head>
    <style>
        .level1 {color:red;}
        .level2 {color:blue;}
        .level3 {color:green;}
    </style>
    <script type="text/javascript">
        function GetSpanElements () {
            var message = "";

            if (document.evaluate) {    // Firefox, Opera, Google Chrome and Safari
                var xPathRes = document.evaluate ( "//li/span", document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

                message += "The contents of the span elements:<br />";
                var actualSpan = xPathRes.iterateNext ();
                while (actualSpan) {
                    message += "<b>" + actualSpan.innerHTML + "</b><br />";
                    actualSpan = xPathRes.iterateNext ()
                }
            }
            else {  // Internet Explorer
                message = "Your browser does not support the evaluate method!";
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onload="GetSpanElements ()">
    <span class="level1">Span 1</span>
    <ul>
        <li>
            <span class="level2">Span 2</span>
        </li>
        <li>
            <div>
                <span class="level3">Span 3</span>
            </div>
        </li>
        <li>
            <span class="level2">Span 4</span>
            <span class="level2">Span 5</span>
        </li>
        <li>
            <div>
                <span class="level3">Span 6</span>
            </div>
            <span class="level2">Span 7</span>
        </li>
    </ul>
    <span class="level1">Span 8</span>
    <br /><br />
    <div id="info" style="background-color:#e0b0b0; width:400px"></div>
</body>
Did you find this example helpful? yes no

Example HTML code 5:

This example shows how to get all span elements in the document that are descendants of an li element:
<head>
    <style>
        .level1 {color:red;}
        .level2 {color:blue;}
        .level3 {color:green;}
    </style>
    <script type="text/javascript">
        function GetSpanElements () {
            var message = "";

            if (document.evaluate) {    // Firefox, Opera, Google Chrome and Safari
                var xPathRes = document.evaluate ( "//li//span", document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

                message += "The contents of the span elements:<br />";
                var actualSpan = xPathRes.iterateNext ();
                while (actualSpan) {
                    message += "<b>" + actualSpan.innerHTML + "</b><br />";
                    actualSpan = xPathRes.iterateNext ()
                }
            }
            else {  // Internet Explorer
                message = "Your browser does not support the evaluate method!";
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onload="GetSpanElements ()">
    <span class="level1">Span 1</span>
    <ul>
        <li>
            <span class="level2">Span 2</span>
        </li>
        <li>
            <div>
                <span class="level3">Span 3</span>
            </div>
        </li>
        <li>
            <span class="level2">Span 4</span>
            <span class="level2">Span 5</span>
        </li>
        <li>
            <div>
                <span class="level3">Span 6</span>
            </div>
            <span class="level2">Span 7</span>
        </li>
    </ul>
    <span class="level1">Span 8</span>
    <br /><br />
    <div id="info" style="background-color:#e0b0b0; width:400px"></div>
</body>
Did you find this example helpful? yes no

Example HTML code 6:

This example shows how to get all span elements in the document that have a 'class' attribute with a value of 'level2':
<head>
    <style>
        .level1 {color:red;}
        .level2 {color:blue;}
        .level3 {color:green;}
    </style>
    <script type="text/javascript">
        function GetSpanElements () {
            var message = "";

            if (document.evaluate) {    // Firefox, Opera, Google Chrome and Safari
                var xPathRes = document.evaluate ( "//span[@class='level2']", document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

                message += "The contents of the span elements:<br />";
                var actualSpan = xPathRes.iterateNext ();
                while (actualSpan) {
                    message += "<b>" + actualSpan.innerHTML + "</b><br />";
                    actualSpan = xPathRes.iterateNext ()
                }
            }
            else {  // Internet Explorer
                message = "Your browser does not support the evaluate method!";
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onload="GetSpanElements ()">
    <span class="level1">Span 1</span>
    <ul>
        <li>
            <span class="level2">Span 2</span>
        </li>
        <li>
            <div>
                <span class="level3">Span 3</span>
            </div>
        </li>
        <li>
            <span class="level2">Span 4</span>
            <span class="level2">Span 5</span>
        </li>
        <li>
            <div>
                <span class="level3">Span 6</span>
            </div>
            <span class="level2">Span 7</span>
        </li>
    </ul>
    <span class="level1">Span 8</span>
    <br /><br />
    <div id="info" style="background-color:#e0b0b0; width:400px"></div>
</body>
Did you find this example helpful? yes no

Example HTML code 7:

This example illustrates the use of the XPathNSResolver object for the evaluate method:
Code
ajax.js
ns.xml
<head>
    <script type="text/javascript" src="ajax.js"></script>
    
    <script type="text/javascript">
        var httpRequest = null;
        
        function SendRequest () {
            if (!httpRequest) {
                httpRequest = CreateHTTPRequestObject ();   // defined in ajax.js
            }
            if (httpRequest) {          
                    // The requested file must be in the same domain that the page is served from.
                var url = "ns.xml";
                httpRequest.open ("GET", url, true);    // async
                httpRequest.onreadystatechange = OnStateChange;
                httpRequest.send (null);
            }
        }

        function OnStateChange () {
            if (httpRequest.readyState == 0 || httpRequest.readyState == 4) {
                if (IsRequestSuccessful (httpRequest)) {    // defined in ajax.js
                    GetParamTags ();
                }
                else {
                    alert ("Operation failed.");
                }
            }
        }

        function NSResolver (nsPrefix) {
            if (nsPrefix == "dotto") {
                return "http://help.dottoro.com/NS";
            }
            return null;
        }

        function GetParamTags () {
            var xmlDoc = ParseHTTPResponse (httpRequest);   // defined in ajax.js
            if (!xmlDoc)
                return;

            if (xmlDoc.createNSResolver) {
                var nsResolver = xmlDoc.createNSResolver (xmlDoc.documentElement);
                var params = xmlDoc.evaluate("//dotto:param", xmlDoc.documentElement, nsResolver, XPathResult.ANY_TYPE, null);
                var param = params.iterateNext();
                while (param) {
                    var paramName = param.getAttribute ("name");
                    var paramValue = param.getAttribute ("value");
                    alert ("<dotto:param name='" + paramName + "' value='" + paramValue + "' />");
                    param = params.iterateNext();
                }
            }
            else {
                alert ("Your browser doesn't support the createNSResolver method!");
            }
        }
    </script>
</head>
<body>
    <button onclick="SendRequest ()">Get param tags with 'dotto' namespaces</button>
</body>
Did you find this example helpful? yes no

Example HTML code 8:

This example is equivalent to the previous one, but it implements a namespace resolver function for the evaluate method:
Code
ajax.js
ns.xml
<head>
    <script type="text/javascript" src="ajax.js"></script>
    
    <script type="text/javascript">
        var httpRequest = null;
        
        function SendRequest () {
            if (!httpRequest) {
                httpRequest = CreateHTTPRequestObject ();   // defined in ajax.js
            }
            if (httpRequest) {          
                    // The requested file must be in the same domain that the page is served from.
                var url = "ns.xml";
                httpRequest.open ("GET", url, true);    // async
                httpRequest.onreadystatechange = OnStateChange;
                httpRequest.send (null);
            }
        }

        function OnStateChange () {
            if (httpRequest.readyState == 0 || httpRequest.readyState == 4) {
                if (IsRequestSuccessful (httpRequest)) {    // defined in ajax.js
                    GetParamTags ();
                }
                else {
                    alert ("Operation failed.");
                }
            }
        }

        function NSResolver (nsPrefix) {
            if (nsPrefix == "dotto") {
                return "http://help.dottoro.com/NS";
            }
            return null;
        }

        function GetParamTags () {
            var xmlDoc = ParseHTTPResponse (httpRequest);   // defined in ajax.js
            if (!xmlDoc)
                return;

            if (xmlDoc.createNSResolver) {
                var params = xmlDoc.evaluate("//dotto:param", xmlDoc.documentElement, NSResolver, XPathResult.ANY_TYPE, null);
                var param = params.iterateNext();
                while (param) {
                    var paramName = param.getAttribute ("name");
                    var paramValue = param.getAttribute ("value");
                    alert ("<dotto:param name='" + paramName + "' value='" + paramValue + "' />");
                    param = params.iterateNext();
                }
            }
            else {
                alert ("Your browser doesn't support the createNSResolver method!");
            }
        }
    </script>
</head>
<body>
    <button onclick="SendRequest ()">Get param tags with 'dotto' namespaces</button>
</body>
Did you find this example helpful? yes no

External links:

User Contributed Comments

Post Content

Post Content