LDOM

A Lightweight JavaScript library to interact with the browser DOM.

Full documentation, customizers, downloaders and examples available at lightweightdom.com.

Getting Started

LDOM is a Lightweight (about 8% of the size of jQuery) way to interact with the browser DOM (Document Object Model).

If you are familiar with jQuery, then LDOM will feel very similar. In many common use cases, LDOM can simply be a drop-in replacement to jQuery without any problems. One way that LDOM is so much smaller and faster than jQuery is that it doesn't support all of the ancient browsers that jQuery does. That being said, by using LDOM, here are the minimum browser versions that are supported. (Basically any browser since 2013)

Browser	Version
Chrome	29
Firefox	23
Safari	6
IE	9
Edge	all
Opera	12

Example Usage

Comparison between LDOM and Vanilla JavaScript

---

Set the text of all buttons.

LDOM

$("button").text("I am a Button");

Vanilla JavaScript

varbuttons=document.querySelectorAll("button");for(vari=0;i<buttons.length;i++){buttons[i].innerText="I am a Button";}

---

Add a class to all parents of buttons.

LDOM

$("button").parent().addClass("button-parent");

Vanilla JavaScript

varbuttons=document.querySelectorAll("button");for(vari=0;i<buttons.length;i++){if(buttons[i].parentNode.className.split(" ").indexOf("button-parent")===-1){buttons[i].parentNode.className+=" "+"button-parent";}}

---

Add a click event to all buttons. Remove that event from a certain button.

LDOM

varactivateButtonEventId=$("button").on("click",function(){this.addClass("button-active");});$("button").eq(1).off(activateButtonEventId);

Vanilla JavaScript

varbuttons=document.querySelectorAll("button");for(vari=0;i<buttons.length;i++){buttons[i].addEventListener("click",addButtonActiveClass);}buttons[1].removeEventListener("click",addButtonActiveClass);functionaddButtonActiveClass(){if(buttons[i].className.split(" ").indexOf("button-active")===-1){buttons[i].className+=" "+"button-active";}}

---

Create a text element and insert it after each button.

LDOM

$("<text>").css("text-align","center").text("Click the button above!").insertAfter($("button"));

Vanilla JavaScript

vartextElem=document.createElement("text");textElem.style.textAlign="center";textElem.innerText="Click the button above!";varbuttons=document.querySelectorAll("button");for(vari=0;i<buttons.length;i++){buttons[i].parentNode.insertBefore(textElem.cloneNode(true),buttons[i].nextSibling);}

---

Like what you see so far?

Full documentation, customizers, downloaders and examples available at lightweightdom.com.