Quick start

Clone the github repo git clone https://github.com/0xWiz/domlang.git and under the dest folder, you can find the minified version of the domalang. Add it to your HTML as you would add any JavaScript files.

Or use CDN link

<script src="https://cdn.jsdelivr.net/gh/0xbin/domlang/dest/domlang.min.js"></script>

DOM methods

DOM methods makes DOM manipulation much easier.

• $(selector)
• .addClass(className)
• .append([arugments])
• .also(callback)
• .attr(key, [value]) or .prop(key, [value])
• .bind(event, callback)
• .children([includeTextNodes=false])
• .clear()
• .click(callback)
• .css(key, [value])
• .disable()
• .enable()
• .extend([arguments])
• .each(callback, [context])
• .filter(selector)
• .first()
• .get(index)
• .hide()
• .height([height])
• .html([html])
• .isDisabled()
• .innerHeight()
• .innerWidth()
• .last()
• .offset()
• .on(event, callback)
• .parent()
• .parents()
• .prepend([arugments])
• .removeClass(className)
• .render(html)
• .remove()
• .removeAttr(key)
• .show()
• .siblings()
• .toggleClass(className)
• .text(s)
• .unbind(event)
• .val(value)
• .width([width])

Extension methods

Extension methods will helps to work with large collections and string.

• $.any(arr, callback) or $.some(arr, callback)
• $.all(array, callback) or $.every(arr, callback)
• $.attrs(element)
• $.clone(collection)
• $.dropLast(s, [num=1])
• $.dropFirst(s, [num=1])
• $.escape(s)
• $.extend([arguments])
• $.extension(name, callback)
• $.each(collection, callback, [context]) or $.forEach(collection, callback, [context])
• $.find(collection, callback)
• $.filter(arr, callback)
• $.has(collection, key)
• $.http(url, args)
• $.isArray(obj)
• $.isElement(obj)
• $.isString(obj)
• $.isNumber(obj) or $.isNum(obj)
• $.isEmpty(collection)
• $.isEqual(obj1, obj2)
• $.isFunction(obj)
• $.isLoopable(obj) or $.isIterable(obj)
• $.isSame(obj1, obj2)
• $.isContains(arr, obj)
• $.invoke([arguments])
• $.keys(obj)
• $.map(collection, callback, [context])
• $.plugin(name, callback)
• $.ready(callback)
• $.random(min, [max=null])
• $.reduce(collection, callback, [context]) or $.foldl(collection, callback, [context])
• $.reduceRight(collection, callback, [context]) or $.foldr(collection, callback, [context])
• $.reject(arr, callback)
• $.render(element, html)
• $.toObject(jsonString)
• $.toJson(collection)
• $.toNum(s) or $.toNumber(s)
• $.toString(obj)
• $.toArray(collection)
• $.unescape(s)
• $.upload(url) :warning:
• $.values(obj)
• $.where(arr, obj)

Allows you to create a new domlang instance, you can pass the following as argument.

• String — If it is an HTML string then it will create those element and add it to the current instance, or it will select elements from the DOM itself.
• HTMLElement — Add the given HTMLElement to the current instance.
• Array — Add all the elements from the array to the current instance if the element is a HTMLElement.

Example →

let buttons = $("button"); 

Add class name to all selected elements. You can add multiple class names by seperating with a space.

Example →

$("a").addClass("link");
$("ul").addClass("list navigation");

Append HTML element(s) to the selected elements. You can pass the following as argument.

• String — Select element(s) from the DOM and append them to the selected elements.
• HTMLElement — Append given HTMLElement to the selected elements.
• Array — Append all the elements from given array to the selected elements if the array element is a HTML element.
• arguments — You can pass all above parameters as arguments. Example : $("#container").append(element1, element2)

Example →

let span = $("<span>+</span>");
$("ul li").append(span);

This is method is an utility method. The first selected element will be set to the callback for further processing, and this method will return whatever elements was before this method called.

Example →

$("input[type='username']").also(function() {
  if (this.isDisabled()) {
    this.enable();
  }
});

Get or set HTML element(s) attribute. :warning: If key only passed as argument, it will return the first element's attribute.

Example →

$("a").attr("href", "not-found.html");

let action = $("form").attr("action");

Bind an event listener to selected element(s). :information_source: It is a wrapper around addEventListener method.

Example →

$("button").bind("click", function() {
    alert(this.text());
});

Get all the children of the first element from the selected elements. Pass true as argument to include all the text nodes.

Example →

$("ul").children().each(function(i) {
  this.text(this.text() + " " + i);
});

Clear all events of selected elements.

Example →

let buttons = $("button").bind("click", function() {
  alert("hello");
});

buttons.clear();

Bind a click event to selected elements.

Example →

$("button").click(function() {
  alert(this.text());
});

Add CSS style to selected elements. You can pass the following as first argument.

• String — pass the CSS style property as the key and pass the CSS style property value as second argument.
• Object — pass a JavaScript object as the first argument with all the CSS styles as key-value pair.

Example →

let anchors = $("a");
anchors.css("color", "green");
anchors.css({
  textStyle: "none",
  display: "inline-block",
  padding: "5px"
});

Disable selected form elements.

Example →

$("input[type='username']").disable();

Enable selected form elements.

Example →

$("input[type='username']").enable();

Allows you to add more elements to the current instance. You can pass the following as first argument.

• String — Select element(s) from the DOM and append them to the selected elements.
• HTMLElement — Append given HTMLElement to the selected elements.
• Array — Append all the elements from given array to the selected elements if the array element is a HTML element.
• arguments — You can pass all above parameters as arguments. Example : $("#container").extend(element1, element2)

Example →

$("ul li").extend("ol li").css("listStyle", "none");

Loop through each element from the current instance. if there is no context passed the current element will be used as the context. Callback has 2 arguments if the there is no context or it will have 3 arguments.

Example →

$("input").each(function(index, elements) {
  if (this.isDisabled()) {
    this.enable();
  }
});

let navs = ["Home", "About", "Contact"];
$("a").each(function(element, index, elements) {
  element.text(this);
}, navs);

Remove elements match the given selector from current instance.

Example →

let buttons = $("button, input[type='submit']");
buttons.disable();
buttons.filter("button").enable(); // enable input with type submit

Returns a new instance with the first element from current instance.

Example →

let buttons = $("button");
let firstButton = buttons.first();

Returns a new instance with the given indexed element from current instance.

Example →

let buttons = $("button");
let secondButton = buttons.get(1);

Hide all selected elements.

Example →

$("img").hide();

Return the height of the first element from selected elements. :information_source: It includes border and padding.

Example →

let containerHeight = $("div#container").height();
$("div#container").height(containerHeight - 20);

If no argument passed then return the html of the first element from selected elements, else set the given HTML to all the selected elements.

Example →

let containerHtml = $("div#container").html();
$("div#container").html("<h1>I am inside a container</h1>");

Check if the first element from selected elements is isDisabled or not.

Example →

$("input[type='username']").also(function() {
  if (this.isDisabled()) {
    this.enable();
  }
});

Return the inner height of the first element from selected elements.

Example →

let insideHeight = $("div#container").innerHeight();

Return the inner width of the first element from selected elements.

Example →

let insideHeight = $("div#container").innerWidth();

Returns a new instance with the last element from current instance.

Example →

let buttons = $("button");
let lastButton = buttons.last();

Return the offset of the first element from selected elements.

Example →

let offset = $("button").offset();
console.log(offset.top, offset.left);

Bind an event listener to selected element(s). :information_source: It is a wrapper around addEventListener method.

Example →

$("button").on("click", function() {
    alert(this.text());
});

Return the parent element of the first element from selected elements.

Example →

let form = $("input[name='username']").parent();

Return all the parent elements of the selected elements.

Example →

let uls = $("li").parents().filter("ol");

Prepend HTML element(s) to the selected elements. You can pass the following as argument.

• String — Select element(s) from the DOM and append them to the selected elements.
• HTMLElement — Append given HTMLElement to the selected elements.
• Array — Append all the elements from given array to the selected elements if the array element is a HTML element.
• arguments — You can pass all above parameters as arguments. Example : $("#container").append(element1, element2)

Example →

let span = $("<span>+</span>");
$("ul li").prepend(span);

Remove class name to all selected elements. You can add multiple class names by seperating with a space.

Example →

$("a").removeClass("link");
$("ul").removeClass("list navigation");

.render() is similar to .html() but instead of removing all elements and putting the new elements, it compare every element and update the changes only. :information_source: A useful method when you want to update a large HTML content.

Example →

<div id="wrap">
  <h1>Heading 1</h1>
  <p>Para 1</p>
  <p>Para 2</p>
  <button>Button 1</button>
</div>

$("#wrap").render(`
  <div id="wrap">
    <h1>Heading 1</h1>
    <p>Para 1</p>
    <p>Para 2</p>
    <button>Button 1</button>
    <button>A new button</button>
  </div>
`);

In this case the render method will only add the A new button.

Remove all selected elements from the DOM.

Example →

$("p").remove();

Remove the given attribute from selected elements.

Example →

$("input[data-dummy]").removeAttr("data-dummy");

Make the selected elements visible if they were hidden.

Example →

let buttons = $("button");
buttons.hide();

setTimeout(function() {
  buttons.show();
}, 3000);

Return the siblings of the first element from selected elements.

Example →

let allListExceptMe = $("ul li").siblings();

Remove if the class name exist or add if the class name is not.

Example →

$("a.green, a.red, a.active").toggleClass("active");

Set text content of the selected elements.

Example →

$("a.notfound").text("Not Found");

Remove an event from selected elements.

Example →

$("input[type='submit']").bind("click", function(e) {
  e.preventDefault();
});

$("input[type='submit']").unbind("click");

Set the value of the selected form elements.

Example →

$("input").text("The same values");

Return the width of the first element from selected elements. :information_source: It includes border and padding.

Example →

let containerWidth = $("div#container").width();
$("div#container").width(containerWidth - 20);