Selecting element from DOM with JavaScript and XPath

Question 1

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>

Question 2

I'm no XPath expert but wouldn't the path need to be '//body/div/div/form/p/textarea'??

Question 3

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;

Question 4

Aaaaaand, you beat me to it before I post it :)

Question 5

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

Question 6

Ooh, nice solution, proper than mine.

Question 7

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

Question 8

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

Question 9

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

Question 10

Thanks, the jsfiddle helped med out :)

Question 11

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

Question 12

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

Question 13

maybe this or this will help?

Martin Honnen 169k6 gold badges100 silver badges123 bronze badges · 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 = '...';
}

Share

Improve this answer

answered Jun 24, 2011 at 11:56

Martin Honnen's user avatar

Martin Honnen

169k6 gold badges100 silver badges123 bronze badges

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

6 Comments

Yann Milin

Yann Milin Over a year ago

Ooh, nice solution, proper than mine.

2011年06月24日T12:01:45.013Z+00:00

Yann Milin

Yann Milin Over a year ago

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

2011年06月24日T13:06:24.307Z+00:00

Eric Herlitz

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

2011年06月24日T13:23:41.953Z+00:00

Yann Milin

Yann Milin Over a year ago

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

2011年06月24日T13:31:27.537Z+00:00

Eric Herlitz

Eric Herlitz Over a year ago

Thanks, the jsfiddle helped med out :)

2011年06月24日T13:43:17.28Z+00:00

|

CollectivesTM on Stack Overflow

Selecting element from DOM with JavaScript and XPath

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related