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

Hickory选择器完全攻略掌握CSS风格DOM节点查询技巧【免费下载链接】hickoryHTML as data项目地址: https://gitcode.com/gh_mirrors/hic/hickoryHickory是一个强大的HTML解析与处理库它提供了类似CSS选择器的API让开发者能够以声明式方式查询和操作HTML文档。本文将详细介绍Hickory选择器的核心功能、使用方法和最佳实践帮助你轻松掌握这一高效的DOM节点查询工具。快速入门Hickory选择器基础Hickory选择器模块位于src/cljc/hickory/select.cljc它实现了大部分CSS选择器功能并提供了Clojure风格的API。使用Hickory选择器通常分为三个步骤解析HTML使用hickory/parse将HTML字符串转换为Hickory数据结构创建选择器使用选择器函数如tag、id、class等组合成查询条件执行查询使用select/select函数应用选择器并获取结果以下是一个简单示例演示如何选择所有div元素(require [hickory.core :as hickory] [hickory.select :as select]) (let [html divfoo/divdivbar/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 classaclass 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选择器等效它会匹配以下结构中的所有spandiv span直接子元素/span pspan间接子元素/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、notHickory提供了逻辑组合选择器用于构建复杂条件;; 匹配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))))性能优化建议从具体到抽象优先使用id、tag等高效选择器再添加类和属性条件限制范围使用child而非descendant减少匹配范围组合条件使用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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考