Given a DOM node, return a unique CSS selector matching only that element. This is particularly useful when tracking in custom variables in analytics:
document.addEventListener('click', function(event) {
var selector = unique(event.target);
_gaq.push(['_trackEvent', 'Engagement', 'Click', selector]);
}, false);
This package is a fork of the unique-selector npm package. The original source code is available on GitHub at ericclemmons/unique-selector.
Updates include:
- escaping selectors to be valid for document.querySelector()
e.g.1 DomElement = <span id="test"></span>
import unique from 'unique-selector';
// Optional Options
options = {
// Array of selector types based on which the unique selector will generate
selectorTypes : [ 'ID', 'Class', 'Tag', 'NthChild' ]
}
unique( DomElement, options ); // #test
e.g.2 DomElement = <span test="2"></span>
import unique from 'unique-selector';
// Optional Options
options = {
// Array of selector types based on which the unique selector will be generate
selectorTypes : [ 'Attributes' ]
}
unique( DomElement, options ); // [test="2"]
e.g.3 DomElement = <div id="xyz" class="abc test"></div>
import unique from 'unique-selector';
// Optional Options
options = {
// Regular expression of ID and class names to ignore
excludeRegex : RegExp( 'xyz|abc' )
}
unique( DomElement, options ); // .test
$ npm run test
Feel free to open issues, make suggestions or send PRs.
-
v1.0.0
- Launch of fork as a package
-
v0.4.1 (fork)
- Fork unique-selector package
- Escape selectors
-
v0.1.0
- Big refactor/rewrite using es6
- More test + Change the test script
- Script to compile es6 to es5 using babel
- Ability to pass options for the selectorTypes based on which the unique selector will be generated, see the options
-
v0.0.4
- Handle extra whitespace in
className
(#9)
- Handle extra whitespace in
-
v0.0.3
- Add support for various
<form>
elements (#2)
- Add support for various
-
v0.0.2
- Fix bug with
nth-child
calculation
- Fix bug with
-
v0.0.1
- Initial release
MIT