dom-js is an extension of the native API of DOM to manipulate the DOM elements in an easy, simple and efficient way
is compatible with IE9+,IE Edge, FF3.5+, Chrome4+, opera 10.1+ All opera mini, Safari3.1+, Android browser2.1+ and ALL recent browsers
The load event occurs when DOM Object has been loaded
dom.load(function() { // your code here }):Return the first Element within the document that matches the specified selector
var container = dom.get("#container"); // <div id='container'>Returns All Elements within the document that matches the specified selector
var container = dom.getAll(".col-10"); // [<div class='col-10'>, <div class='col-10'>, <div class='col-10'>]Returns the DOM node's parent Element
var parent = container.getParent(); // <body>add a node to the end of the list of children of a Element
container.appendTo("<h1>Title</h1>");remove the Element from the DOM
container.remove();sets or gets the HTML syntax describing the element's descendants
container.html('<span>text lorem ipsum</span>');Return the first Element within the Element that matches the specified selector
container.find('span'); // <span>Return All Elements within the Element that matches the specified selector
container.findAll('.span'); // [<span class='span'>, <span class='span'>, <span class='span'>]get the value of an attribute on the specified element
container.attr('id'); // containerset the value of an attribute on the specified element
var logo = dom.get("#logo") logo.setAttr('alt', 'domJS');inserts a set of Node or DOMString objects in the children list of this ChildNode's parent, just before this ChildNode.
container.before('<h1>Title of page</h1>');inserts a set of Node or DOMString objects in the children list of this ChildNode's parent, just after this ChildNode.
container.after('<h2>Lorem ipsum</h2>');Adds the specified class(es) to Element
container.addClass('col-12 center-auto');Remove the specified class(es) to Element
container.removeClass('col-12 center-auto');Determine whether any of the matched elements are assigned the given classe.
container.hasClass('container'); // trueAttach an event handler function for one event to the selected elements. Type of event accept all the events of mouse & keyboard exemple : click, load, keypress, ...
container.on('click', function(event) { console.log(this); // <div id="container"> console.log(event); // Event Object });remove an event handler for one event to the selected elements.
container.off('click'); OR container.off('click', function(event) { console.log(this); // <div id="container"> console.log(event); // Event Object });Encode a set of form elements as a multiple format for submission.
var form = dom.get("#form"); form.serialize("string") // return form encoded to string form.serialize("array") // return form encoded to array form.serialize("object") // return form encoded to objectGet the Element in NodeList by index
var input = dom.getAll("input[type='text']").eq(0); // <input name="input_0" />Get the current value of the inputs elements
input.val(); // test valueGet the first Element in NodeList
var input = dom.getAll("input[type='text']").first(); // <input name="input_0" />Get the last Element in NodeList
var input = dom.getAll("input[type='text']").last(); // <input name="input_10" />set one or more CSS properties for matched element.
container.css({ "background-color" : "#ff0000", "font-size" : "25px", "color" : "#ccc" });Show Element
container.show();Hide Element
container.hide();Get the current coordinates of the element (top, left, width, height)
container.offset(); // { top ; 10, left : 10, width : 960, height : 700 }Insert content to the beginning of Element
container.prependTo('<span>date of publication : 20/06/2017</span>');get the first parent element that matches the selector
var span = dom.get("#span"); span.closestTo('#container'); // <div id="container">Check if arguments matched with the style CSS of Element and return true/false
var span = dom.get("#span"); span.isCss("color=red"); // false or trueget the next Element of this DOMNode
var span_next = span.next(); // <p>get the prev Element of this DOMNode
var span_prev = span.prev(); // <span>Wrap an HTML structure around each element in the set of matched elements.
var li_menu = container.getAll("li.links"); li_menu.wrap("<ul class='block-display'>"); // <ul class="block-display">get Base64 of file uploaded by the user in input File
var input_logo = container.find("input[type='file']"); input_logo.convertBase64(function(bse64) { console.log(base64); // data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA.../j/BRgA+iQ8SzlkV/IAAAAASUVORK5CYII= });Execute the requests HTTP to server by AJAX methode
dom.ajax({ url :'http://exemple.com/get-data', type : 'get' // post, put, delete cache : true, headers : { "Accept" : "application/json" }, data : [], async : true // for activate or desactivate asynchronous request mimeType : null, success : function(data) { console.log(data); }, error : function(status, error, event) { console.log(error); } });methode for verify if the variable is the Array type or not
var list = ["orange", "apple", "banane"]; var check_array = dom.is_array(list); // truemethode for verify if the variable is the Object type or not
var object = { name : "john doe" }; var check_object = dom.is_object(object); // trueMIT - Said10