Loading...
墨滴

Gopal

2021/10/05  阅读:23  主题:橙心

【源码】optimal-select——如何获取到 HTML 元素指纹(CSS Selector)

前言

最近在做一个项目,要求获取到一个 HTML 元素指纹。比如,我点击一个元素,就能返回一个该元素的 CSS selectors 或者 xpath。找了一下,业内还蛮多这种 npm 库,点击这里查看详情

本文就 optimal-select 讲一下是如何实现的?选择 optimal-select 的原因如下:

  • CSS Selector 相比 xpath 具有更优的性能和可读性.
  • optimal-select 支持选择多个元素
  • 支持配置匹配优先级(priority),忽略(ignore)等自定义匹配规则

当然,也有它的一个不足之处,这个库看起来有 5 年没有更新了,不过看起来它目前的情况是最符合我们的场景了。

optimal select 的简单使用

首先,安装使用如下:

npm install --save optimal-select

简单的使用:

import { select, getMultiSelector, getSingleSelector, getCommonProperties, common } from 'optimal-select' // global: 'OptimalSelect'
const multiElements = [];
document.addEventListener('click', (e) => {
  const element = e.target;
  multiElements.push(e.target);
  console.log('多个元素标识', getMultiSelector(multiElements));
  // 单个元素的标识
  console.log('单个元素标识,默认:', select(element, {
    // default reference
    rootdocument,
    skip (traverseNode) {
      // ignore select information of the direct parent
      // 忽略直接父节点的选择信息
      return traverseNode === element.parentNode
    },
    // define order of attribute processing
    // 定义优先级
    priority: ['id''class''href''src'],
    // define patterns which should't be included
    // 定义忽略规则
    ignore: {
      class (className{
        // disregard short classnames
        return className.length < 5
      },
      attribute (name, value, defaultPredicate) {
        // exclude HTML5 data attributes
        return (/data-*/).test(name) || defaultPredicate(name, value)
      },
      // tag: 'div'
    }
  }));
})

演示结果如下:

可以看到它有两个核心功能:

  • 可以生成单个元素和多个元素公共的 CSS Selector
  • 允许配置跳过匹配规则、优先级规则和忽略模式规则等自定义选项。比如 priority: ['id', 'class', 'href', 'src'] 就会有优先采取 id 匹配,再到 class 匹配,最后才是 href 和 src

整体结构

整体文件就 7 个,相关功能如下:

├── adapt.js 
├── common.js # 公共的函数,getCommonAncestor 获取到公共祖先元素。getCommonProperties 获取到公共的 属性
├── index.js  # 入口文件
├── match.js  # 单个元素的匹配
├── optimize.js # 优化
├── select.js   # 选择
└── utilities.js # 工具函数

获取单个元素的 CSS Selector

从入口文件出发:

export select, { getSingleSelector, getMultiSelector } from './select'

select.js 文件中的 getSingleSelector 函数。首先对 Node Type进行一些判断处理。Node Type 相关,可以参考——MDN

  • 假如是3(TEXT_NODE)——文字类型,则取其父元素
  • 假如不是一个元素 节点,例如 <p> 和 <div>,则报错
// 假如是3(TEXT_NODE)——Element 或者 Attr 中实际的文字,则取其父元素
if (element.nodeType === 3) {
  element = element.parentNode
}
// 假如不是一个元素 节点,例如 <p> 和 <div>。
if (element.nodeType !== 1) {
  throw new Error(`Invalid input - only HTMLElements or representations of them are supported! (not "${typeof element}")`)
}

接下来是最主要的 match 方法,主要是定义在 match.js 中,用来匹配单个元素的 CSS Selector

// 返回匹配到的 selector
const selector = match(element, options)

默认的匹配规则

解构赋值中,可以看到 priority 默认为 ['id', 'class', 'href', 'src'],这个也是我们常用的编码技巧:

const {
  root = document,
  skip = null,
  priority = ['id''class''href''src'],
  ignore = {}
} = options

跳过(skip)的逻辑

从当前元素开始遍历,直到根元素为止,ignore 也是一样的。

// 往上遍历查找匹配
while (element !== root) {
  if (skipChecks(element) !== true) {
    // ...
  }
  element = element.parentNode
}

假如存在一个条件满足,就可以 skip:

const skipChecks = (element) => {
  return skip && skipCompare.some((compare) => compare(element)) // 调用 skipCompare 看是否满足条件
}

skip 可以设置一个 node 值,function 或者是一个 node 数组。最后都处理成函数规则,以便 skipChecks 调用:

const skipCompare = skip && (Array.isArray(skip) ? skip : [skip]).map((entry) => {
  if (typeof entry !== 'function') {
    return (element) => element === entry // 满足条件就跳过
  }
  return entry
})

ignore 的逻辑

ignore 的代码逻辑跟 skip 是类似的,首先是统一规则。因为配置可以是 function. number string boolean。统计处理成函数校验的方式,方便后面调用。其中 ignore 就是一个对象,key 为相应的属性名称,值为规则函数,这样方便后面的调用校验:

// 可以是 function. number string boolean。统计处理成函数校验的方式
Object.keys(ignore).forEach((type) => {
  if (type === 'class') {
    ignoreClass = true
  }
  var predicate = ignore[type]
  if (typeof predicate === 'function'return
  if (typeof predicate === 'number') {
    predicate = predicate.toString()
  }
  if (typeof predicate === 'string') {
    predicate = new RegExp(escapeValue(predicate).replace(/\\/g'\\\\'))
  }
  if (typeof predicate === 'boolean') {
    predicate = predicate ? /(?:)/ : /.^/
  }
  ignore[type] = (name, value) => predicate.test(value)
})

然后调用 checkAttributes 或者 checkTag 进行检查是否匹配一致,接下来说一下 checkAttributes 是如何检查属性的,其中调用 findAttributesPattern 找到元素的标识。

function checkAttributes (priority, element, ignore, path, parent = element.parentNode{
  // 找到该元素目前的标识
  const pattern = findAttributesPattern(priority, element, ignore)
}

最后调用的是 checkIgnore,其中调用以上的规则,就可以知道是否是要忽略的了。

const currentIgnore = ignore[attributeName] || ignore.attribute // 获取到 check 函数的规则
if (checkIgnore(currentIgnore, attributeName, attributeValue, currentDefaultIgnore)) {
  continue
}
function checkIgnore (predicate, name, value, defaultPredicate{
  if (!value) {
    return true
  }
  const check = predicate || defaultPredicate
  if (!check) {
    return false
  }
  return check(name, value, defaultPredicate)
}

优先级的处理

findAttributesPattern 中,通过配置的规则的前后顺序,对优先级进行排序,利用的就是 JavaScript sort 的语法:

// 根据优先级前后对属性进行进行排序
const sortedKeys = Object.keys(attributes).sort((curr, next) => {
  const currPos = priority.indexOf(attributes[curr].name)
  const nextPos = priority.indexOf(attributes[next].name)
  if (nextPos === -1) {
    if (currPos === -1) {
      return 0
    }
    return -1
  }
  return currPos - nextPos
})

检测唯一性

以上我们可以拿到相关的规则了,但是众所众知,CSS Selector 可能不仅仅选中一个元素,这里通过 querySelectorAll 判断是否唯一,这种判断在这个库中多次运用:

if (pattern) {
  // 检查是否唯一。是的话,就加入到 path 前面
  const matches = parent.querySelectorAll(pattern)
  if (matches.length === 1) {
    path.unshift(pattern)
    return true
  }
}

至此,就完成了一个元素的CSS Selector 的唯一性匹配了。

获取多个元素的 CSS Selector

其实在 select.js 中,有个 getQuerySelector 的方法,会根据传入的值进行不同的方法的调用,假如是传入的是多个 Node 的时候,就会自动调用 getMultiSelector

export default function getQuerySelector (input, options = {}{
  if (input.length && !input.name) {
    return getMultiSelector(input, options)
  }
  return getSingleSelector(input, options)
}

getMultiSelector 的实现原理也很简单:

  • getCommonAncestor 获取元素中公共的祖先,并使用 getSingleSelector 获取到公共祖先的唯一标识
  • getCommonSelectors 获取到该元素所有的公共 CSS Selector
  • 拼接返回
// 获取元素中公共的祖先
const ancestor = getCommonAncestor(elements, options)
// 获取到公共祖先的唯一标识
const ancestorSelector = getSingleSelector(ancestor, options)
// 获取到该元素所有的公共 CSS Selector
const commonSelectors = getCommonSelectors(elements, options)
const descendantSelector = commonSelectors[0]
const selector = optimize(`${ancestorSelector} ${descendantSelector}`, elements, options)

上面提到的两个核心的方法,都在 common.js 中,我们来看下:

getCommonAncestor

通过 ancestors 记录所有元素的可能性祖先元素:

elements.forEach((element, index) => {
  const parents = []
  while (element !== root) {
    element = element.parentNode
    parents.unshift(element)
  }
  ancestors[index] = parents
})

为了更加方便获取,直接取最短的祖先元素和其他的比较,这样也是一种优化处理:

ancestors.sort((curr, next) => curr.length - next.length)
const shallowAncestor = ancestors.shift()

遍历这个最短的祖先元素中的各个可能,看其他的祖先元素是否都包含该规则,假如都包含,则符合要求。否则 break

for (var i = 0, l = shallowAncestor.length; i < l; i++) {
  const parent = shallowAncestor[i]
  const missing = ancestors.some((otherParents) => {
    return !otherParents.some((otherParent) => otherParent === parent)
  })
  if (missing) {
    break
  }
  ancestor = parent
}

getCommonSelectors

获取公共属性的方式都差不多,假如没有公共属性,则直接写入。假如有公共的属性,判断当前的属性是否等于已有的公共属性,假如不等于,则删除。以下使用 tag 为例(最简单的判断)

// ~ tag
if (commonTag !== undefined) {
  const tag = element.tagName.toLowerCase()
  if (!commonTag) {
    commonProperties.tag = tag
  } else if (tag !== commonTag) {
    delete commonProperties.tag
  }
}

获取多个元素的 CSS Selector 有一个比较大的问题,公共属性的获取,并不支持自定义配置忽略的规则等。所以我们可能要手动处理类似项 data-v-3333 这样的属性。

总结

optimal select 其实是一个比较简单的工具库,它值得我们学习的一些点如下:

  • 自定义规则配置的处理,将多种类型的配置,统一处理成函数,方便统一处理
  • 一些 JavaScript 技巧的运用,比如使用 sort 对优先级进行排序
  • 通过从当前元素开始往上遍历到 root 结束去确定一个元素唯一的 CSS Selector 的。其中会做一些优化(见 optimize.js 文件),优化后会使用 querySelectorAll 方法,确定其正确性
  • 通过先获取到元素列表公共祖先元素的 CSS Selector,并获取到元素列表的公共属性,最后拼接成能够获取到多个元素的 CSS Selector

Gopal

2021/10/05  阅读:23  主题:橙心

作者介绍

Gopal

Shopee