update to v2.1.0

add support for querySeletor
add toHTMLElement
clean up comments
fix bug in README

dist/fluent-dom-esm.js

@@ -4,25 +4,29 @@ const isHTMLElement = (value) => !!value.nodeType;
 const isNumber = (value) => typeof value === "number";
 const isString = (value) => typeof value === "string";
 /**
- * fluent-dom-esm v2.0.0
+ * fluent-dom-esm v2.1.0
  *
- * Fluent DOM Manipulation, adapted to ESM and cranked up to v2.0(.0).
+ * Fluent DOM Manipulation, adapted to ESM and cranked up to v2.1(.0).
  *
  * https://git.itsericwoodward.com/eric/fluent-dom-esm
  *
- * v2.0.0 Copyright (c) 2025 Eric Woodward
+ * v2.1.0 Copyright (c) 2025 Eric Woodward
  * Original copyright (c) 2009 Tommy Montgomery (https://glacius.tmont.com/articles/fluent-dom-manipulation-in-javascript)
  *
  * Released under the WTFPL (Do What the Fuck You Want to Public License)
  *
- * @author	Eric Woodward (v2.0.0 update)
+ * @author	Eric Woodward (v2.1.0 update)
  * @author  Tommy Montgomery (original)
  * @license http://sam.zoy.org/wtfpl/
  */
-const APP_VERSION = "2.0.0";
+const APP_VERSION = "2.1.0";
 const fluentDomEsm = (function() {
-  const FluentDom = function(node) {
-    return new FluentDomInternal(node);
+  const FluentDom = function(nodeOrQuerySelector) {
+    if (typeof nodeOrQuerySelector !== "string")
+      return new FluentDomInternal(nodeOrQuerySelector);
+    const f = new FluentDomInternal();
+    f.querySelector(nodeOrQuerySelector);
+    return f;
   };
   FluentDom.create = FluentDom.c = function(tagName) {
     const f = new FluentDomInternal();
@@ -97,6 +101,10 @@ const fluentDomEsm = (function() {
       root.addEventListener(...props);
       return this;
     };
+    this.q = this.querySelector = function(selector) {
+      root = document.querySelector(selector);
+      return this;
+    };
     function styleFunction(prop, value) {
       if (!root) {
         throw new Error("Cannot get or set style for a non-element");
@@ -118,21 +126,17 @@ const fluentDomEsm = (function() {
     this.s = this.style = styleFunction;
     this.t = this.text = function(text) {
       if (!root) {
-        throw new Error(
-          "Cannot get or set innerText for a non-element"
-        );
+        throw new Error("Cannot set innerText for a non-element");
       }
       return this.append(text);
     };
     this.title = function(title) {
       if (!root) {
-        throw new Error(
-          "Cannot get or set outerHTML for a non-element"
-        );
+        throw new Error("Cannot get or set title for a non-element");
       }
       return this.attr("title", title);
     };
-    this.toDom = function() {
+    this.toDom = this.toHTMLElement = function() {
       return root;
     };
     this.unlisten = function(...props) {

dist/fluent-dom-esm.types.d.ts

@@ -16,11 +16,14 @@ export interface FluentDomObject {
     id: (id: string) => FluentDomObject;
     l: (type: keyof HTMLElementEventMap, listener: () => {}, optionsOrUseCapture?: boolean | object) => FluentDomObject;
     listen: (type: keyof HTMLElementEventMap, listener: () => {}, optionsOrUseCapture?: boolean | object) => FluentDomObject;
+    q: (selector: string) => FluentDomObject;
+    querySelector: (selector: string) => FluentDomObject;
     s: ((prop: CSSStyleDeclaration) => FluentDomObject) | ((prop: string, value: string) => FluentDomObject);
     style: ((prop: CSSStyleDeclaration) => FluentDomObject) | ((prop: string, value: string) => FluentDomObject);
     t: (text: string) => FluentDomObject;
     text: (text: string) => FluentDomObject;
     title: (title: string) => FluentDomObject;
     toDom: () => HTMLElement | null;
+    toHTMLElement: () => HTMLElement | null;
     unlisten: (type: keyof HTMLElementEventMap, listener: () => {}, optionsOrUseCapture?: boolean | object) => FluentDomObject;
 }

dist/styles/main.css

@@ -47,6 +47,10 @@ figure {
     color: #347c7a;
 }
 
+.code-cmnt {
+    color: #ccc;
+}
+
 .code-dom {
     color: var(--main-light);
 }