浏览器技术栈中的老牌利器

在现代前端开发中，许多开发者可能从未直接接触过浏览器中已有的某些Web功能和技术。或许你刚接触Web开发，对这些技术一无所知，因为你沉浸在某些特定框架的抽象中，不需要深入了解甚至完全不需要了解这些底层技术。

被遗忘的XML技术栈

XML是一种与HTML不完全相似的古老语言。最近WHATWG讨论建议从浏览器中移除称为XSLT编程的XML技术栈的重要部分。这正是我们多年来拥有的那种较老、现有的技术，可以用于解决像我的团队遇到的CSSOM情况这样实际的问题。

XPath：核心API

在XML技术中，最有用的可能是XPath——一种查询语言，允许你在具有一个根元素的标记树中找到任何节点或属性。

XPath的优势：

• CSS选择器可以找到页面中的大多数元素，但无法找到所有元素
• CSS选择器无法根据元素在DOM中的当前位置来查找元素
• XPath可以做到这两点

结合XPath与CSS

XPath可以做许多CSS选择器在查询元素时无法做到的事情，但CSS选择器也能做一些XPath无法做到的事情，比如按类名查询元素。

1
2
3
4
5

/* CSS */
.myClass

/* XPath */
/*[contains(@class, "myClass")]

XPath查询包含字符串"myClass"的class属性的元素，这比CSS选择器更广泛。

XPath函数概览

XPath提供了许多有用的函数：

• starts-with：检查文本是否以特定文本开头
• contains：检查文本是否包含特定文本
• count：返回查询匹配的数量
• substring：类似JavaScript的substring
• normalize-space：规范化空白字符
• translate：替换字符串中的字符

实际应用示例

文本节点查询

1
2
3

// 查询所有li元素的文本节点
document.queryXPaths("//li/text()").results
// 返回：["one","two","three"]

属性查询

1
2
3

// 查询包含"Sign In"文本的链接的href属性
document.queryXPaths("//a[text() = 'Sign In']/@href").results
// 返回：["/login.html"]

XPath在测试中的优势

XPath在测试中表现出色，因为它可以获取DOM中的每个元素，从DOM的任何位置，而CSS无法做到这一点。在CSS类在许多现代构建系统中无法保持一致的情况下，XPath能够对元素的内容进行更强大的匹配，无论DOM结构如何变化。

XSLT 1.0弃用问题

Chrome团队计划从浏览器中移除XSLT 1.0支持，这很重要，因为XSLT 1.0使用专注于XML的编程进行文档转换，而这又依赖于XPath 1.0。

结论

XPath是浏览器技术栈中较老技术的一个完美例子，即使在今天仍然具有很大的实用性，即使你从未知道它的存在或从未考虑过使用它。通过将XPath与CSS结合使用，开发者可以获得更强大的元素查询能力，扩展技术工具箱。