Skip to content
A Lightweight JavaScript library to interact with the browser DOM.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
resources
CNAME
LICENSE
README.md
android-chrome-192x192.png
android-chrome-256x256.png
apple-touch-icon.png
browserconfig.xml
customizer.html
favicon-16x16.png
favicon-32x32.png
favicon.ico
feather.png
index.html
ldom.dev.js
mstile-150x150.png
robots.txt
safari-pinned-tab.svg
site.webmanifest

README.md

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("click", 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, buttons[i].nextSibling);
}

Like what you see so far?

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

You can’t perform that action at this time.