Selecting element from DOM with JavaScript and XPath

Question

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>

I'm no XPath expert but wouldn't the path need to be '//body/div/div/form/p/textarea'?? — Mark Robinson
– Mark Robinson, Commented Jun 24, 2011 at 11:04
I see, you put the javascript in your head section, it will execute before the DOM is loaded, try either put your code just before </body> or in the head, put your code in a function and add window.onload = function_name; — Yann Milin
– Yann Milin, Commented Jun 24, 2011 at 13:45

Martin Honnen · Accepted Answer · 2011-06-24 11:56:20Z

38

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 = '...';
}

answered Jun 24, 2011 at 11:56

Martin Honnen

169k6 gold badges100 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Yann Milin Over a year ago

Ooh, nice solution, proper than mine.

Yann Milin Over a year ago

yes it does , maybe you're using a browser not compatible with evaluate?

Eric Herlitz Over a year ago

Firefox 5, Chrome 12, Safari 5, all in mac os. Tried to run them both locally and from a webserver arghs

Yann Milin Over a year ago

Tried his code locally on FF4 and chromium 14 here, no problems at all

Eric Herlitz Over a year ago

Thanks, the jsfiddle helped med out :)

|

Yann Milin · Accepted Answer · 2011-06-24 12:03:12Z

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";

edited Jun 24, 2011 at 12:03

answered Jun 24, 2011 at 11:55

Yann Milin

1,3451 gold badge11 silver badges22 bronze badges

2 Comments

Eric Herlitz Over a year ago

It tend to return Error: TYPE_ERR: DOM XPath Exception 52

Yann Milin Over a year ago

maybe this or this will help?

Collectives™ on Stack Overflow

Selecting element from DOM with JavaScript and XPath

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related