XPath is a powerful language for selecting nodes in an XML or HTML document. JavaScript provides built-in support for XPath through the document.evaluate() method, which can be used to evaluate an XPath expression and return the matching nodes in the document.
Here's an example of how to use XPath with JavaScript to select and manipulate the content of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, world!</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>// Get the first <li> element in the document
var listItem = document.evaluate("//li[1]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
// Change the text of the <li> element
listItem.textContent = "New item";This code selects the first
The document.evaluate() method takes several arguments:
- expression: The XPath expression to evaluate.
- contextNode: The node from which to start the search. In this case, we want to search the entire document, so we use document.
- namespaceResolver: A function that resolves namespaces used in the XPath expression. We're not using any namespaces, so we use null.
- resultType: The type of result to return. In this case, we want to return the first matching node, so we use XPathResult.FIRST_ORDERED_NODE_TYPE.
- result: An existing XPathResult object to reuse. We're not reusing an existing object, so we use null.
XPath is a powerful tool for selecting and manipulating nodes in an XML or HTML document, and JavaScript provides built-in support for XPath through the document.evaluate() method. With XPath, you can easily target specific nodes in a document and manipulate them to achieve your desired results.
- If you appreciate my work, please consider becoming a 'Sponsor', giving a ⭐ to my projects, or following me.
This project is licensed under the MIT - see the LICENSE file for details.