@asamuzakjp/dom-selector

DOM Selector

Retrieve DOM node from the given CSS selector.
Experimental

Install

npm i @asamuzakjp/dom-selector

Usage

import {
  matches, closest, querySelector, querySelectorAll
} from '@asamuzakjp/dom-selector';

matches(selector, node, opt)

matches - same functionality as Element.matches()

Parameters

• selector string CSS selector
• node object Element node
• opt object? options
  • opt.warn boolean? console warn e.g. unsupported pseudo-class

Returns boolean true if matched, false otherwise

closest(selector, node, opt)

closest - same functionality as Element.closest()

Parameters

• selector string CSS selector
• node object Element node
• opt object? options
  • opt.warn boolean? console warn e.g. unsupported pseudo-class

Returns object? matched node

querySelector(selector, refPoint, opt)

querySelector - same functionality as Document.querySelector(), DocumentFragment.querySelector(), Element.querySelector()

Parameters

• selector string CSS selector
• refPoint object Document, DocumentFragment or Element node
• opt object? options
  • opt.warn boolean? console warn e.g. unsupported pseudo-class

Returns object? matched node

querySelectorAll(selector, refPoint, opt)

querySelectorAll - same functionality as Document.querySelectorAll(), DocumentFragment.querySelectorAll(), Element.querySelectorAll()
NOTE: returns Array, not NodeList

Parameters

• selector string CSS selector
• refPoint object Document, DocumentFragment or Element node
• opt object? options
  • opt.sort boolean? sort matched nodes
  • opt.warn boolean? console warn e.g. unsupported pseudo-class

Returns Array<(object | undefined)> array of matched nodes

Acknowledgments

The following resources have been of great help in the development of the DOM Selector.

• CSSTree
• selery