Skip to content

A Lightweight JavaScript library to interact with the browser DOM.

License

Notifications You must be signed in to change notification settings

CreativeTechGuy/LDOM

Repository files navigation

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.