DOM Manipulation

Every method is chainable and operates on all matched elements. Internally it—™s classList, querySelectorAll, dataset and style — no custom DOM abstraction.

html / text / valclassesattributescsstraversal

Content — html / text / val

F("#app").html("<h1>Hello</h1>"); // setter
F("#app").html();                        // "<h1>Hello</h1>"

F(".title").text("FLASH.js");
F(".title").text(); // "FLASH.js"

F("input").val("hello");
F("input").val(); // "hello"

html(value) accepts string, Element or Collection (cloned).

Classes

F(".card").addClass("active", "ready");
F(".card").removeClass("active");
F(".card").toggleClass("open", true); // force
F(".card").hasClass("active"); // boolean (any match)

Attributes / Props / Data

F(".btn").attr("data-id", "42");
F(".btn").attr("data-id"); // "42"
F(".btn").attr({ "aria-label": "Close", "data-id": "1" });
F(".btn").removeAttr("data-id");

F("input").prop("checked", true);
F(".btn").data("user", { id: 1 }); // JSON → dataset
F(".btn").data("user"); // { id: 1 } — auto-parsed
F(".btn").removeData("user");

CSS / Visibility

F(".card").css({ opacity: 1, transform: "translateY(0)" });
F(".card").css("opacity"); // computed style

F(".box").show();  // display: ""
F(".box").hide();  // display: none
F(".box").toggle();

Manipulation

F(".list").append("<li>item</li>");
F(".list").append(F("<li>new</li>"));
F(".list").prepend(element);
F(".item").before("<div>before</div>");
F(".item").after("<div>after</div>");
F(".item").remove();
F(".list").empty();
F(".card").clone(); // Collection of clones

Traversal

F(".item").find(".child");
F(".item").parent();
F(".item").parents(".container");
F(".item").children(".active");
F(".item").closest(".card");
F(".item").siblings();
F(".item").next(); F(".item").prev();
F(".item").is(".active"); // boolean
F(".item").index();        // among siblings
F(".item").index(".item"); // among selector

Live demo

#dom-target — watch me

—

Events →