update to v2.1.0

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

src/fluent-dom-esm.ts

@@ -1,16 +1,16 @@
 /**
- * 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/
  */
@@ -24,7 +24,7 @@ import {
     isString,
 } from "./fluent-dom-esm.type-guards";
 
-const APP_VERSION = "2.0.0";
+const APP_VERSION = "2.1.0";
 
 /**
  * IIFE that creates the FluentDomObject as default export
@@ -33,8 +33,13 @@ export default (function () {
     /**
      * Wraps provided element in a FluentDomObject which is then returned
      */
-    const FluentDom = function (node: HTMLElement) {
-        return new (FluentDomInternal as any)(node);
+    const FluentDom = function (nodeOrQuerySelector: string | HTMLElement) {
+        if (typeof nodeOrQuerySelector !== "string")
+            return new (FluentDomInternal as any)(nodeOrQuerySelector);
+
+        const f = new (FluentDomInternal as any)();
+        f.querySelector(nodeOrQuerySelector);
+        return f;
     };
 
     /**
@@ -168,8 +173,13 @@ export default (function () {
             return this;
         };
 
+        this.q = this.querySelector = function (selector: string) {
+            root = document.querySelector(selector);
+            return this;
+        };
+
         /**
-         * Gets or sets a one or more style attributes on the wrapped HTMLElement
+         * Sets one or more style attributes on the wrapped HTMLElement
          */
         function styleFunction(
             this: FluentDomObject,
@@ -211,35 +221,31 @@ export default (function () {
         this.s = this.style = styleFunction;
 
         /**
-         * Gets or sets the wrapped HTMLElement's "innerText" property
+         * Sets the wrapped HTMLElement's "innerText" property via `this.append`
          */
         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);
         };
 
         /**
-         * Gets or sets the "title" attribute on the wrapped HTMLElement
+         * Sets the "title" attribute on the wrapped HTMLElement
          */
         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);
         };
 
         /**
-         * Gets the wrapped HTMLElement itself
+         * Gets the wrapped HTMLElement
          */
-        this.toDom = function () {
+        this.toDom = this.toHTMLElement = function () {
             return root;
         };
 

src/fluent-dom-esm.types.ts

@@ -6,15 +6,19 @@ export interface FluentDomObject {
     append: (obj: FluentDomObject | HTMLElement | string) => FluentDomObject;
     attr: (name: string, value: string) => FluentDomObject;
     c: (tagName: string) => FluentDomObject;
+
     create: (tagName: string) => FluentDomObject;
     className: (className: string) => FluentDomObject;
     clear: () => FluentDomObject;
     cls: (className: string) => FluentDomObject;
     clr: () => FluentDomObject;
+
     h: (url: string) => FluentDomObject;
     href: (url: string) => FluentDomObject;
     html: (content: string) => FluentDomObject;
+
     id: (id: string) => FluentDomObject;
+
     l: (
         type: keyof HTMLElementEventMap,
         listener: () => {},
@@ -25,6 +29,10 @@ export interface FluentDomObject {
         listener: () => {},
         optionsOrUseCapture?: boolean | object,
     ) => FluentDomObject;
+
+    q: (selector: string) => FluentDomObject;
+    querySelector: (selector: string) => FluentDomObject;
+
     s:
         | ((prop: CSSStyleDeclaration) => FluentDomObject)
         | ((prop: string, value: string) => FluentDomObject);
@@ -36,6 +44,8 @@ export interface FluentDomObject {
     text: (text: string) => FluentDomObject;
     title: (title: string) => FluentDomObject;
     toDom: () => HTMLElement | null;
+    toHTMLElement: () => HTMLElement | null;
+
     unlisten: (
         type: keyof HTMLElementEventMap,
         listener: () => {},