Hickory选择器完全攻略：掌握CSS风格DOM节点查询技巧

Hickory选择器完全攻略：掌握CSS风格DOM节点查询技巧

【免费下载链接】hickoryHTML as data项目地址: https://gitcode.com/gh_mirrors/hic/hickory

Hickory是一个强大的HTML解析与处理库，它提供了类似CSS选择器的API，让开发者能够以声明式方式查询和操作HTML文档。本文将详细介绍Hickory选择器的核心功能、使用方法和最佳实践，帮助你轻松掌握这一高效的DOM节点查询工具。

快速入门：Hickory选择器基础

Hickory选择器模块位于src/cljc/hickory/select.cljc，它实现了大部分CSS选择器功能，并提供了Clojure风格的API。使用Hickory选择器通常分为三个步骤：

1. 解析HTML：使用hickory/parse将HTML字符串转换为Hickory数据结构
2. 创建选择器：使用选择器函数（如tag、id、class等）组合成查询条件
3. 执行查询：使用select/select函数应用选择器并获取结果

以下是一个简单示例，演示如何选择所有<div>元素：

(require '[hickory.core :as hickory] '[hickory.select :as select]) (let [html "<div>foo</div><div>bar</div>" htree (hickory/as-hickory (hickory/parse html))] (select/select (select/tag :div) htree))

核心选择器详解

元素选择器：精准定位标签

tag选择器用于匹配指定标签名的元素，支持字符串或关键字参数，且不区分大小写：

;; 匹配所有<p>标签 (select/tag :p) (select/tag "P") ; 同样有效

在测试文件test/cljc/hickory/test/select.cljc中，我们可以看到tag选择器的实际应用：

;; 选择所有<h1>标签 (let [selection (select/select (select/tag "h1") htree)] (is (and (= 1 (count selection)) (= :h1 (-> selection first :tag)))))

ID选择器：唯一元素定位

id选择器通过元素的id属性进行精确匹配，同样不区分大小写：

;; 匹配id为"user-profile"的元素 (select/id "user-profile") (select/id :user-profile) ; 关键字形式也支持

类选择器：样式类匹配

class选择器用于匹配具有指定CSS类的元素：

;; 匹配所有包含"active"类的元素 (select/class "active")

Hickory会自动解析class属性中的多个类名，因此以下HTML元素可以被(select/class "cool")匹配：

<div class="aclass bclass cool">...</div>

属性选择器：灵活的属性匹配

attr选择器提供了强大的属性匹配能力，支持存在性检查和值匹配：

;; 匹配所有具有disabled属性的元素 (select/attr :disabled) ;; 匹配href属性值为"https://example.com"的元素 (select/attr :href #(= % "https://example.com")) ;; 匹配data-role属性值以"button-"开头的元素 (select/attr :data-role #(string/starts-with? % "button-"))

组合选择器：构建复杂查询

后代选择器：层级关系匹配

descendant选择器用于匹配某个元素的后代元素，无论中间隔多少层级：

;; 匹配<div>内所有的<span>元素 (select/descendant (select/tag :div) (select/tag :span))

与CSS中的div span选择器等效，它会匹配以下结构中的所有<span>：

<div> <span>直接子元素</span> <p><span>间接子元素</span></p> </div>

子选择器：直接层级匹配

child选择器仅匹配直接子元素，与CSS中的>运算符类似：

;; 仅匹配<div>的直接子元素中的<span> (select/child (select/tag :div) (select/tag :span))

这个选择器不会匹配上例中<p>内的<span>元素。

相邻兄弟选择器：紧接其后的元素

follow-adjacent选择器匹配紧随目标元素之后的兄弟元素：

;; 匹配<div>后面紧接的<p>元素 (select/follow-adjacent (select/tag :div) (select/tag :p))

等效于CSS中的div + p选择器。

通用兄弟选择器：后续所有兄弟

follow选择器匹配目标元素之后的所有兄弟元素，无论是否紧接：

;; 匹配<div>之后的所有<p>兄弟元素 (select/follow (select/tag :div) (select/tag :p))

等效于CSS中的div ~ p选择器。

伪类选择器：高级匹配逻辑

位置伪类：nth-child系列

Hickory提供了丰富的位置伪类选择器，用于按位置选择元素：

;; 选择第2个子元素 (select/nth-child 2) ;; 选择奇数位置的子元素 (select/nth-child :odd) ;; 选择偶数位置的子元素 (select/nth-child :even) ;; 选择倒数第3个子元素 (select/nth-last-child 3)

在测试文件中，我们可以看到这些选择器的实际应用：

;; 选择偶数位置的元素 (let [selection (select/select (select/and (select/node-type :element) (select/nth-child :even)) htree)] (is (and (= 4 (count selection)) (= :element (-> selection first :type)))))

逻辑组合：and、or、not

Hickory提供了逻辑组合选择器，用于构建复杂条件：

;; 匹配class为"active"且id为"menu"的div元素 (select/and (select/tag :div) (select/class "active") (select/id "menu")) ;; 匹配div或span元素 (select/or (select/tag :div) (select/tag :span)) ;; 匹配不是p元素的所有元素 (select/not (select/tag :p))

实战技巧：组合使用选择器

复杂查询示例

结合多种选择器，可以构建强大的查询逻辑。例如，选择所有包含"item"类且data-status属性为"completed"的div元素，这些元素是ul的直接子元素：

(select/child (select/tag :ul) (select/and (select/tag :div) (select/class "item") (select/attr :data-status #(= % "completed"))))

性能优化建议

1. 从具体到抽象：优先使用id、tag等高效选择器，再添加类和属性条件
2. 限制范围：使用child而非descendant减少匹配范围
3. 组合条件：使用and尽早排除不匹配元素

总结：Hickory选择器的优势

Hickory选择器为Clojure开发者提供了强大而灵活的HTML查询能力，其主要优势包括：

• CSS兼容性：支持大部分CSS选择器语法，降低学习成本
• 函数式API：符合Clojure风格，支持组合和高阶函数
• 跨平台：在Clojure、ClojureScript中均可使用
• 精确控制：提供比CSS更细粒度的控制选项

通过本文介绍的选择器功能，你可以轻松处理各种HTML文档查询需求。要深入了解更多选择器和高级用法，请参考Hickory源代码中的src/cljc/hickory/select.cljc文件和测试用例test/cljc/hickory/test/select.cljc。

开始使用Hickory选择器，体验函数式HTML处理的强大魅力吧！

【免费下载链接】hickoryHTML as data项目地址: https://gitcode.com/gh_mirrors/hic/hickory