How to use XPath to search from a specified DOM node in JavaScript?

JavaScript XPath search: precise positioning of DOM nodes

In JavaScript development, it is often necessary to use XPath expressions to accurately find nodes in the DOM tree. This article focuses on how to search XPath from the specified DOM node rather than the document root node.

Many developers are prone to misuse XPath expressions //input to find all input elements under a specific DOM node. However, //input searches the entire document instead of starting with the specified node. This will cause the search results to be inconsistent with expectations.

Workaround: Use relative path XPath expression

To start a search from a specific DOM node (for example, a div node with id "menu", use a relative path XPath expression starting with . For example, .//input means recursively looking up input elements in all its child nodes starting from the current node (i.e., the "menu" node).

Example:

Assuming that you need to find all input elements under menu node with class attribute "tInput" and value attribute "100", you can use the following XPath expression:

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

This expression only searches within the range of menu nodes and their children nodes, improving search efficiency and ensuring the accuracy of the results.

Summarize:

The key to using XPath search from a specified DOM node is to use relative path expressions, starting with . , to limit the search range. This is essentially different from the absolute path expression (e.g. //input ) that is looked up from the document root node. By flexibly using relative path expressions, XPath lookup can be controlled more accurately, thereby improving code efficiency and maintainability.

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