XPath query under JavaScript DOM node: How to find elements from a specified node?

JavaScript DOM node XPath query: precise positioning of child elements

This article describes how to use XPath expressions to find elements from a specified DOM node in JavaScript. Many developers often encounter problems starting from the root node rather than the specified node when using document.evaluate() method.

For example, developers want to find all input elements under a div element with class "menu", or more precisely, find input elements with class "tInput" and value "100". Using //input directly starts searching from the entire document root node, not from the specified "menu" node.

The key is to understand the relative paths of XPath expressions. //input means to find all input elements in the document. To start looking from a specific node (for example, menu node), you need to use a relative path expression.

Correct XPath expression

To find all input descendants from the current node, use .//input . The point number ( . ) represents the current node. Therefore, document.evaluate('.//input', menu, null, XPathResult.ANY_TYPE, null); will recursively search all input child nodes starting from menu node.

More complex conditional searches

For more complex conditions, such as looking for input elements with class "tInput" and value "100", you can use the following XPath expression:

.//input[@class='tInput' and @value='100']

This expression combines an attribute selector to position the target element accurately. Note that the attribute values ​​need to be enclosed in single or double quotes. Use this expression in combination with document.evaluate method to perform accurate searches under menu node. This approach allows you to efficiently start with any specified DOM node, using XPath expressions for exact element lookup.

The above is the detailed content of XPath query under JavaScript DOM node: How to find elements from a specified node?. For more information, please follow other related articles on the PHP Chinese website!