「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」页面元素的定位方式有很多种，像id, class, tag等，这些简单的定位方式，由于页面的复杂或者其他原因，并不能定位到我们想要的，大部分这时候可以通过xpath或css定位，我最近一直在用xpath,做下总结

基础

关于xpath定位网上有好多资料，我推荐在MDN上查看，我感觉上面讲的比较全面 developer.mozilla.org/en-US/docs/… xpath是一门在xml文档中查找信息的语言，它使用路径表达式来选取xml文档中的节点或节点集。同样也可以用于html文件元素的查找

xpath节点的关系术语

以下几个术语看字面意思就能明白

父亲（Parent）

子（Children）

同胞、同级（sibling）

祖先（Ancestor）

后代（Descendant）

XPath 使用路径表达式在 XML 文档中选取节点。节点是通过沿着路径或者 step 来选取的。下面列出了最有用的路径表达式：

表达式	描述
nodename	选取此节点的所有子节点。
/	从根节点选取。
//	从匹配选择的当前节点选择文档中的节点，而不考虑它们的位置。
.	选取当前节点。
..	选取当前节点的父节点。
@	选取属性。

例子

路径表达式	结果
div	选取 div 元素的所有子节点。
/div	选取根元素 div。注释：假如路径起始于正斜杠( / )，则此路径始终代表到某元素的绝对路径！
div/span	选取属于 div 的子元素的所有 span 元素。
//span	选取所有 span子元素，而不管它们在文档中的位置。
div//span	选择属于 div 元素的后代的所有 span 元素，而不管它们位于 div 之下的什么位置。
//@aria-label	选取名为 aria-label 的所有属性。

谓语被嵌在方括号中，查找元素加上一些特定的限定条件

//tag[@attribute=”Value”]	//input[@class='but1']"	找到class=but1的input标签
//tag[@attribute1=”Value1” and @attribute2=”Value2” ]	//input[@class='but1' and @name='key']	布尔逻辑运算; and/or属性与逻辑结合，解决多个属性重名问题
//tag[contains(@attribute1, ”Value1” )]	//input[contains(@placeholder,'请输入')]	模糊匹配：（1）存在属性值一部分是一直不变，另一部分是随机生成的（2）整体属性太长
//tag[starts-with(@attribute1, ”Value1” )]	//a[starts-with(@class,'abc123')]
//tag[text()=”value”]	//p[text()=”你好”]	text匹配， text也可以用模糊匹配//tag[contains(text(), “value“)]
//tag1/tag2[index]	//form/input[2]	父节点定位子节点层级与属性结合，解决没有属性的问题
//tag1[@attribute=”Value”]/tag2	//input[@class='but1']"/span
//*[@attribute=”value”]/tag2	//*[@class='r']/a	通过*匹配
//tag1//parent::tag2	//span[@icon-name="error-line"]/parent::button	由子节点查找父节点
//tag1//preceding-sibling::tag2	//span[@icon-name="error-line"]/preceding-sibing::input	由弟弟节点查找哥哥节点
//tag1//following-sibling::tag2	//input[@aria-label="Email"]/following-sibling::div	由哥哥节点查找弟弟节点

有时在页面控制台，想立刻验证定位的元素是否正确，是否可以对它进行一些操作，可以使用js,当然也可以使用jquery,抱歉我还没学到，先不讲了

 document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result )

第一个参数：是符合xpath语法规则的表达式

contextNode：应评估 xpathExpression 的文档中的节点，包括其任何和所有子节点。document 节点是最常用的

namespaceResolver：将传递包含在 xpathExpression 中的任何命名空间前缀的函数，它返回一个表示与该前缀关联的命名空间 URI 的字符串。这使得能够在 XPath 表达式中使用的前缀和文档中使用的可能不同的前缀之间进行转换。该转换函数可以是：
- 使用 [XPathEvaluator] 对象的 [createNSResolver]方法[创建]。
- null。其可以用于 HTML 文档或者当不使用命名空间前缀时。注意，如果 xpathExpression 包含命名空间前缀，这将导致一个带有 NAMESPACE_ERR 的 DOMException 抛出。
- 用户定义的函数。有关详细信息，请参阅附录中的 [使用一个用户定义的命名空间解析器] 部分。
resultType：指定作为评估结果返回的所需结果类型的[常数]。最常传递的常量是 XPathResult.ANY_TYPE，它将返回 XPath 表达式的结果作为最自然的类型。附录中有一个部分，其中包含[可用常数]的完整列表。它们在下面“[指定返回类型]部分中进行解释。
result：如果指定了现有的 XPathResult 对象，它将被重用以返回结果。指定 null 将创建一个新的 XPathResult 对象。