get-selector

获取 DOM 元素的 CSS 选择器，类似 Chrome 浏览器的 copy selector 功能，但支持获取更短的 CSS 选择器。

对于如下的 DOM 结构：

<div class="a">
  <div class="b">
    <div></div>
    <p></p>
    <div></div>
    <div></div>
  </div>
</div>

使用 getSelector 方法，可以获取到如下的选择器：

// 智能短路径
getSelector(document.querySelector('.b div:nth-of-type(3)'));
// => "div.b > div:nth-of-type(3)"

// 全路径
getSelector(document.querySelector('.b div:nth-child(3)'), false);
// => "body > div.a > div.b > div:nth-of-type(3)"

💊 兼容性单元测试保证支持如下环境：

IE	CH	FF	SF	OP	IOS	Android	Node
11+	50+	100+	13+	100+	10.3+	4.1+	14+

注意：编译代码依赖ES5环境，对于ie6-8需要引入es5-shim才可以兼容，可以查看demo/demo-global.html中的例子

📂 目录介绍


.
├── demo 使用demo
├── dist 编译产出代码
├── doc 项目文档
├── src 源代码目录
├── test 单元测试
├── CHANGELOG.md 变更日志
└── TODO.md 计划功能

🚀 使用者指南

通过npm下载安装代码

$ npm install --save @jsmini/get-selector

如果你是node环境

var base = require('@jsmini/get-selector');

如果你是webpack等环境

import base from '@jsmini/get-selector';

如果你是浏览器环境

<script src="node_modules/@jsmini/get-selector/dist/index.aio.js"></script>

📑 文档

API

😘 贡献者指南

首次运行需要先安装依赖

$ npm install

一键打包生成生产代码

$ npm run build

运行单元测试:

$ npm test

注意：浏览器环境需要手动测试，位于test/browser

修改 package.json 中的版本号，修改 README.md 中的版本号，修改 CHANGELOG.md，然后发布新版

$ npm run release

将新版本发布到npm

$ npm publish

贡献者列表

contributors

⚙️ 更新日志

CHANGELOG.md

✈️ 计划列表

TODO.md

jsmini/get-selector