DOM 选择器

为严格符合规格而建造的 CSS 选择器引擎.

特征

• 严格规格合规性:严格遵守现代网络标准. 它准确地剖析,评价,并取出元素跨越了伪类和HTML属性的复杂组合. CSS选择器4级(例如, :is(), (中文(简体) ), :not(), (中文(简体) ), :where(), (中文(简体) ), :has())和"影子DOM"的伪类(:host, (中文(简体) ), :host-context) (中文(简体) ).
• 工具函数: 提供与标准查询并行的效用方法, 如 check() aST评价及 extractSubjects() 用于从选择器中提取主题密钥.
• jsdom 默认引擎: 采用CSS选择引擎,用于 日记。 。 。 .

安装

npm i @asamuzakjp/dom-selector

使用量

import { DOMSelector } from '@asamuzakjp/dom-selector';
import { JSDOM } from 'jsdom';

const { window } = new JSDOM();

// Destructuring methods (all methods are bound to the instance)
const {
  check, closest, extractSubjects, matches, querySelector, querySelectorAll, supports
} = new DOMSelector(window);

API 密码

new DOMSelector(window, document?, opt?)

创建 DOMS 选择器实例 .

• window [温道] 窗口对象 .
• document 怎么样? 文档对象 。 默认为 window.document。 。 。 .
• opt {对象}? 选项 :
  • opt.cacheSize {数}? 最多存储在 LRU 缓存中的项目 。 默认为 4096。这适用于每个内部缓存,包括每个文档缓存将解析选择器与文档对齐,这样在活文件上反复查询不同的选择器不会无限制地增大其缓存.
  • opt.idlUtils {对象}? 用于jsdom的内部IDL包装器.
  • opt.maxLength {数}? 选择器允许的最大长度 。 默认为 2048。 。 。 .

matches(selector, node, opt?)

等值为 元素. matches( )。 。 。 .

• selector {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你来干什么 CSS选取器.
• node {元素} 元素节点.
• opt {对象}? 选项 :
  • opt.noexcept 怎么样? true 禁止例外情况(例如, DOMException 用于无效选择)并返回 false 换句话说.
  • opt.warn 怎么样? true 当遇到不支持或贬值的特性时,向控制台输出警告.
• 回返 {布尔} true 如果匹配, false 否则.

closest(selector, node, opt?)

等值为 元素. closest( )。 。 。 .

• selector {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你来干什么 CSS选取器.
• node {元素} 元素节点.
• opt {对象}? 选项 :
  • opt.noexcept 怎么样? true 禁止例外和返回 null 换句话说.
  • opt.warn 怎么样? true 当遇到不支持或贬值的特性时,向控制台输出警告.
• 回返 {元素} 无效} 对应的祖先节点或 null。 。 。 .

querySelector(selector, node, opt?)

等值为 文档.query 选择器( ), (中文(简体) ), DocumentFraft.query 选择器 () 财务报告和审定财务报表 元素.query 选择器( )。 。 。 .

• selector {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你来干什么 CSS选取器.
• node {文档{文档{文档碎片}{元素} 节点可以在里面找到.
• opt {对象}? 选项 :
  • opt.noexcept 怎么样? true 禁止例外和返回 null 换句话说.
  • opt.warn 怎么样? true 当遇到不支持或贬值的特性时,向控制台输出警告.
• 回返 {元素} 无效} 匹配的节点或 null。 。 。 .

querySelectorAll(selector, node, opt?)

等值为 文档.querySelectorall (), (中文(简体) ), 文档断面.querySelectorall () 财务报告和审定财务报表 元素. query 选择器全部( )。 。 。 . 页:1: 返回标准 Array<Element>,而不是一个 NodeList。 。 。 .

• selector {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你来干什么 CSS选取器.
• node {文档{文档{文档碎片}{元素} 节点可以在里面找到.
• opt {对象}? 选项 :
  • opt.noexcept 怎么样? true 以压制例外并返回空数组 [] 换句话说.
  • opt.warn 怎么样? true 当遇到不支持或贬值的特性时,向控制台输出警告.
• 回返 {箭头} 匹配元素组合 .

check(selector, node, opt?)

检查元素是否匹配 CSS 选择器并返回额外的抽象语法树信息 . 页:1:选择器中的任何伪元素都被排除在匹配评价之外.

• selector {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你来干什么 CSS选取器.
• node {元素} 元素节点.
• opt {对象}? 选项 :
  • opt.requireAst 怎么样? 表示是否总是尝试分析并返回 AST .
  • opt.noexcept 怎么样? true 来压制例外,并将错误保存在 error 而不是丢弃.
  • opt.warn 怎么样? true 当遇到不支持或贬值的特性时,向控制台输出警告.
• 回返 {检查结果} 含有下列属性的对象:
  • match {布尔} true 如果元素与选择器匹配, false 否则.
  • pseudoElement {字符串} 无效} 从选择器提取的伪元素,如果有的话.
  • ast {对象}{无效} 解析的 AST 对象 .
  • error {DOM Excuseion } 错误 {{} 无效} 错误对象, 如果有的话 .

extractSubjects(selector, caseSensitive?)

分析一个选择器并提取最右侧的主题密钥( Id, Class, Tag) .

• selector {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你来干什么 CSS选取器.
• caseSensitive 怎么样? true 如果标记键对大小写敏感。 默认为 false。 。 。 .
• 回返 {箭头} 一系列取出的主题密钥 。 每个对象包含:
  • id {字符串} 无效} 身份证.
  • className {字符串} 无效} 阶级名相.
  • tag {字符串} 无效} 标签名称.

supports(selector)

检查给定的 CSS 选择器是否由此引擎支持 . 支持的选取者完整名单见下表.

• selector {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你来干什么 CSS选取器.
• 回返 {布尔} true 如果选择器被支持, false 否则.

clear(clearAll?)

清除内部缓存以释放内存.

• clearAll 怎么样? 是否清除所有缓存 。 如果错误, 只有缓存匹配结果被清除 。 默认为 false。 。 。 .
• 回返 {

支持的 CSS 选择器

*1 : (中文(简体) ) ElementInternals.states,也就是说. CustomStateSet,在jsdom中未执行,所以您需要在自定义元素构建器中应用补丁.

class LabeledCheckbox extends window.HTMLElement {
  #internals;
  constructor() {
    super();
    this.#internals = this.attachInternals();
    // patch CustomStateSet
    if (!this.#internals.states) {
      this.#internals.states = new Set();
    }
    this.addEventListener('click', this._onClick.bind(this));
  }
  get checked() {
    return this.#internals.states.has('checked');
  }
  set checked(flag) {
    if (flag) {
      this.#internals.states.add('checked');
    } else {
      this.#internals.states.delete('checked');
    }
  }
  _onClick(event) {
    this.checked = !this.checked;
  }
}

业绩

见 基准 最新结果.

承认

以下资源对于DOM选择器的开发有很大帮助.

• CSSTree (英语)
• 红酒
• 日记
• nwsapi (英语)

版权(c) 2023 阿萨穆扎克(卡兹)