DOCSEARCHbyAlgolia
Submit Docs

Jelly SQL Documentation

website·Indexed 30 days ago

https://docs.jellysql.com

A SQL-like language for querying the DOM that generates CSS selectors using SQL syntax. The documentation covers basic query structure, select statements, operators, pseudo-structural classes, and a reference table mapping SQL commands to W3C Selectors.

Tokens
5.5K
Snippets
37
Records
50
Agent score
49%

What's inside Jelly SQL

  1. Understand Jelly SQL keyword behavior and case sensitivity

    Keywords in Jelly SQL are reserved words used to define query structure and specify target elements. They are not case-sensitive. Keywords used within string literals (e.g., 'LINK') are treated as strings and not as reserved keywords.

  2. Understand the basic structure of a Jelly SQL CSS query

    Jelly SQL CSS allows querying the DOM using SQL-like syntax. A complete query typically consists of the following components: a Select statement, Conditions, Keywords, Functions, and Comments.

  3. Use combinators to define DOM element relationships in Jelly SQL

    Combinators in Jelly SQL specify how elements should be selected based on their position in the DOM. They are not case-sensitive. Unlike CSS, where combinators are evaluated right-to-left, Jelly SQL follows the order defined by the language. When chaining multiple combinators, the AND operator is implicit and not required. Users must ensure queries comply with W3C standards as the parser does not validate CSS selector logic.

  4. Apply a single selector to multiple conditions using Cross-Apply

    Cross-apply allows you to shorthand queries by applying a single AND selector to multiple OR expressions. To achieve this, place the AND selector before the grouped OR expressions.

    Constraint: As of V1.0, cross-apply selectors must precede the OR expressions. Placing them after the group will result in unexpected behavior.

    -- Valid Cross-Apply
SELECT * FROM DOM WHERE
TAG = 'a' AND (CLASS = 'active' OR CLASS = 'link')

-- Invalid Cross-Apply (V1.0)
SELECT * FROM DOM WHERE
(CLASS = 'active' OR CLASS = 'link') AND TAG = 'a'

  5. Target elements by type using AS TYPEOF

    To target elements based on their type (equivalent to CSS :of-type selectors), use the AS TYPEOF modifier in conjunction with the CHILD function. The TYPEOF function does not require parentheses when used as a modifier.
    -- Select the last paragraph element of its type
SELECT * FROM DOM WHERE
TAG('p') AND CHILD(LAST) AS TYPEOF

  6. Use functions in Jelly SQL queries

    Functions in Jelly SQL are used to target specific elements or perform shorthand operations on elements that match a query. Functions are not case-sensitive and follow a standard syntax: the function name followed by parentheses () containing comma-separated arguments. Even functions with zero arguments require parentheses, with the exception of TYPEOF.
    -- Function with arguments
SELECT * FROM DOM WHERE ATTRIBUTE('data-color') = 'orange'

-- Function without arguments
SELECT * FROM DOM WHERE CHILD()

  7. Install and use Jelly SQL via npm or yarn

    Jelly SQL can be installed as a package for use in Node.js or browser projects. It supports TypeScript and has no third-party dependencies. Use the query function to convert SQL-like syntax into standard CSS selectors.
    npm install jelly-sql
    import { query } from 'jelly-sql';

const selector = query(`SELECT * FROM DOM WHERE TAG = 'a'`);
console.log(selector); // Output: "a"

  8. Create complex queries with nested grouping

    JellySQL supports nested parentheses for complex logical expressions, including double and triple nesting. This allows for highly specific DOM selection logic.
    -- Double Nested
SELECT * FROM DOM WHERE
TAG = 'a' AND (CLASS = 'active' OR (CLASS = 'link' AND ID = 'new-link'))

-- Triple Nested
SELECT * FROM DOM WHERE
TAG = 'div' AND (CLASS = 'container' OR (CLASS = 'wrapper' AND (ID = 'main' OR ID = 'sidebar')))

  9. Use self-grouping for automatic logical expression splitting

    JellySQL automatically groups expressions based on their logical operator. The parser always groups AND expressions together, meaning OR operators act as the split points between groups. Because of this, the AND operator is not required when chaining combinators.
    SELECT * FROM DOM WHERE
TAG = 'a' AND CLASS = 'active'
OR CLASS = 'link'
OR TAG = 'button' AND ID = 'to-top-link'

  10. Manually group expressions with parentheses

    Use parentheses () to explicitly group expressions when you need to apply a specific logical operator to a set of conditions. This overrides default parser behavior and improves query readability.
    SELECT * FROM DOM WHERE
(TAG = 'a' AND CLASS = 'active')
OR (CLASS = 'link' AND TAG = 'button')

  11. Use combinators in Jelly SQL queries

    CSS combinator selectors are evaluated from right to left. In Jelly SQL, the order is defined by the language syntax itself.
    SELECT * FROM DOM WHERE
TAG('p') CHILD OF TAG('div')

  12. Use the Jelly-SQL Playground to generate CSS selectors

    The Jelly-SQL Playground allows developers to write jelly-sql queries and see the corresponding generated CSS selectors in real-time. To execute a query in the playground, use the keyboard shortcut Ctrl+Enter (or Cmd+Enter on macOS).
    SELECT * FROM DOM WHERE TAG = 'div' AND CLASS = 'container'