A fun library for querying and manipulating DOM elements using a subset of (My)SQL.
<script src="https://cdn.jsdelivr.net/npm/sqldom/dist/sqldom.min.js"></script>
<script>
const {execSql} = window.sqldom;
// ...
</script>
npm install sqldom
Using the table dom
has the effect of selecting all elements from the DOM, while using a specific tag name like button
will only select elements of that tag name.
Columns are the properties of the element, e.g id
, class
,value
etc. You can use *
to select the DOM element itself.
const {elements} = execSql(`SELECT * FROM dom WHERE class LIKE "%foo%"`);
// `elements` is an array of DOM elements
const {elements} = execSql(`SELECT id, type FROM button WHERE text = "Click me"`);
// `elements` is an array of objects, each object containing the id and type of a button
execSql(`UPDATE div SET class = CONCAT_WS(" ", class, "foo") WHERE id = "bar"`);
You must provide a container element to insert into as the second argument.
execSql(`INSERT INTO div (id, class) VALUES ("foo", "bar")`, {
insertTo: container,
});
You could even go one step further and select the container element using a query as well:
const {elements} = execSql(`SELECT * FROM div WHERE id = "container"`);
const container = elements[0];
execSql(`INSERT INTO div SET id = "foo", class = "bar"`, {
insertTo: container,
});
execSql(`DELETE FROM div WHERE class = "foo" LIMIT 1`);
I was basically nerd-sniped by this tweet and decided I would give it a shot despite it being pointless (for obvious reasons). Spent the better half of my weekend on it and had a lot of fun.
For that reason it's not exactly the most efficient, it essentially pulls all1 elements from the DOM and filters them out according to the conditions in the query. At first, I thought of transforming parts of the WHERE clause of the query into CSS selectors to try and narrow down the results a bit, but then figured it was kinda pointless lol. I might still do it later.
It uses node-sql-parser to parse the SQL. Only supports basic SELECT
, INSERT
, UPDATE
, DELETE
statements (i.e no joins or subqueries or group by etc) for now.
- Basic CRUD (SELECT, UPDATE, INSERT, DELETE)
- Binary operators, comparison operators, logical operators etc.
- Some functions such as
CONCAT_WS
,CONCAT
,LENGTH
(more to be added) - WHERE
- ORDER BY
- LIMIT
- Subqueries
- Joins
- Group by
- Aggregate functions
- More validations to be MySQL compliant
MIT License
Footnotes
-
It will pull all elements if you do a
SELECT * FROM dom
. If you do aSELECT * FROM input
for example, it will only pull inputs. โฉ