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)"

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

| 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中的例子

:open_file_folder: 目录介绍

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

:rocket: 使用者指南

通过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>

:bookmark_tabs: 文档

API

:kissing_heart: 贡献者指南

首次运行需要先安装依赖

$ npm install

一键打包生成生产代码

$ npm run build

运行单元测试:

$ npm test

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

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

$ npm run release

将新版本发布到npm

$ npm publish

贡献者列表

contributors

:gear: 更新日志

CHANGELOG.md

:airplane: 计划列表

TODO.md