Selecting element from DOM with JavaScript and XPath

javascript dom xpath

58,146

Solution 1

The evaluate method does not return a DOM node as you seem to expect. You would need

var element = document.evaluate( '//body//form/p/textarea' ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue;
if (element != null) {
  element.value = '...';
}

Solution 2

@Mark Robinson comment is right, your Xpath expression is wrong, you could use one of those :

//body/div/div/form/p/textarea (Mark's example)
//body//form/p/textarea (any form in body)

Plus, the evaluate function will return a XPathResult object, not the textarea, so you can't do directly element.value

Here is your example fixed:

<body>
    <div id="calculator">
        <div id="calculatorController">
            <form action="#" method="get" onsubmit="return false">
                <p>
                    <textarea disabled="disabled"></textarea>
                </p>
            </form>
        </div>
    </div>
</body>

var element = document.evaluate( '//body/div/div/form/p/textarea' ,document, null, XPathResult.ANY_TYPE, null );

var textarea = element.iterateNext ();
textarea.value = "Hello textarea";

58,146

Author by

Eric Herlitz

System developer, architect and Optimizely MVP that fancies Optimizely/Episerver, Azure, SharePoint and more. Also Co-founder of Bendsoft and the SharePoint .NET Connector. https://twitter.com/EricHerlitz http://www.herlitz.io

Updated on April 11, 2020

Comments

Eric Herlitz about 4 years

I'm trying to figure out how to select the textarea in the code below using xpath and JavaScript (which is the only option here).

<body>
    <div id="calculator">
        <div id="calculatorController">
            <form action="#" method="get" onsubmit="return false">
                <p>
                    <textarea disabled="disabled"></textarea>
                </p>
            </form>
        ...

I'm trying to do something like this

var element = document.evaluate( '//body/form/p/textarea' ,document, null, XPathResult.ANY_TYPE, null );
// and write back
element.value = "Hello textarea";

But it fails

Anyone keen to help?

Thanks

Update below this

============================================================

The entire block of code looks like this. Don't forget the window.onload=function()

<html>
<head>
  <script type='text/javascript'> 
  //<![CDATA[ 
  window.onload=function(){
  var element = document.evaluate( '//body//form/p/textarea' ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue;

        if (element != null) {
            element.value = 'Hello textarea';
        }

  }
  //]]> 
  </script> 
</head>
<body>
    <div id="calculator">
        <div id="calculatorController">
            <form action="#" method="get" onsubmit="return false">
                <p>
                    <textarea disabled="disabled"></textarea>
                </p>
            </form>
        </div>
    </div>
</body>
</html>