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

var buttons = document.querySelectorAll("button");
for (var i = 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

var buttons = document.querySelectorAll("button");
for (var i = 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

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

Vanilla JavaScript

var buttons = document.querySelectorAll("button");
for (var i = 0; i < buttons.length; i++) {
	buttons[i].addEventListener("click", addButtonActiveClass);
}
buttons[1].removeEventListener("click", addButtonActiveClass);

function addButtonActiveClass(){
	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

var textElem = document.createElement("text");
textElem.style.textAlign = "center";
textElem.innerText = "Click the button above!";
var buttons = document.querySelectorAll("button");
for (var i = 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.