【酷库】如何获取到 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
    root: document,
    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