DOMQL

Tired of using document.querySelector() with CSS selectors? Ever wanted to use SQL-like syntax to query DOM elements?
Yeah, me neither.

To use the library, simply use one the following methods to import the library.

ES6:

        import * as domql from './domql.min.js';
        var result = domql.$("SELECT * FROM html WHERE id='foo'");
        

From script:

        <script src="https://cdn.jsdelivr.net/gh/yuxuan-ji/domql@master/dist/domql.min.js"></script>

        <script>
            var result = domql.$("SELECT * FROM html WHERE id='foo'");
        </script>
        

By default, Domql uses document.querySelectorAll as its query engine. While this results in an overall smaller build file, the default engine has limited support for complex CSS selectors. When you need access to complex queries, it is recommended to use an external query engine such as Sizzle.js like so:

ES6:

        import * as Sizzle from './sizzle.min.js';
        ...
        domql.QueryEngine.setEngine(Sizzle.default);
        

From script:

        <script> src="https://cdnjs.cloudflare.com/ajax/libs/sizzle/2.3.3/sizzle.min.js"></script>
        ...
        <script>
            domql.QueryEngine.setEngine(Sizzle);
        </script>
        

Examples

Check out the Examples Page.

Demo

The DOMQL library is loaded in this page. Try it out on this page's HTML!