esl Exadel Smart Library
  • Core
  • Components
  • Examples
Get started
Exadel Smart Library
  • Search
  • Introduction
    • Installation Guide
    • Browser Support
    • Our Roadmap
  • Core
    • ESL Base Element
    • new ESL Mixin Element
    • ESL Media Query
    • ESL Traversing Query
    • new ESL Event Listeners
    • ESL Utils
  • Components
    • beta ESL A11y Group
    • ESL Alert
    • beta ESL Animate
    • beta ESL Footnotes
    • ESL Image
    • ESL Media
    • ESL Panel
    • ESL Panel Group
    • beta ESL Popup
    • ESL Scrollbar
    • beta ESL Select
    • beta ESL Select List
    • ESL Tabs
    • ESL Toggleable
    • ESL Trigger
  • Examples
    • Accordion
    • beta Animate
    • Embedded Audio
    • Embedded Video
    • beta Footnotes
    • Image
    • Menu
    • Notification
    • beta Popup
    • Scrollbar
    • beta Select Dropdown
    • beta Select List
    • beta Share
    • Tabs
    • Toggleable
  • Share us with:

ESL Traversing Query

ESLTraversingQuery is a utility to find elements via an extended selector query.

Extended query supports:

  • plain CSS selectors
  • relative selectors
    NOTE: Selectors that don't start from a plain selector will use passed base Element as a root
  • ::next and ::prev sibling pseudo-selectors
  • ::parent, ::closest and ::child pseudo-selectors
  • ::find pseudo-selector
  • ::first, ::last and :nth(#) limitation pseudo-selectors
  • ::visible visible element pseudo-selector

Query examples and explanation

  • #id .class [attr] - find by CSS selector in a current document
  • (empty query) - returns current base element
  • ::next - get next sibling element
  • ::prev - get previous sibling element
  • ::parent - get base element parent
  • ::parent(#id .class [attr]) - find the closest parent, matching passed selector
  • ::closest(#id .class [attr]) - find the closest ancestor including base element that matches passed selector
  • ::child(#id .class [attr]) - find direct child element(s) that match passed selector
  • ::find(#id .class [attr]) - find child element(s) that match passed selector
  • ::parent::child(some-tag) - find direct child element(s) that match tag 'some-tag' in the parent
  • #id .class [attr]::parent - find parent of element matching selector '#id .class [attr]' in document
  • ::find(.row)::last::parent - find parent of the last element matching selector '.row' from the base element subtree

API

Find one (first element that describes a query):

  ESLTraversingQuery.first(query: string, base?: Element, scope?: Element | Document): Element | null;

Find all elements that describes a query:

  ESLTraversingQuery.all(query: string, base?: Element, scope?: Element | Document): Element[];

Params:

  • query - query string
  • base - describes a base for relative query.
  • scope - defines a scope to find global query (document by default)

ESL v4.3.1 © 2023 Exadel, Inc
Core Team Contributors: Alexey Stsefanovich, Julia Murashko, Yuliya Adamskaya, Dmytro Shovchko, Anna Barmina, Anastasiya Lesun
Design by Iryna Pavlenko