dom-manipulator
v1.0.6
Published
A simply way to manipulate HTML elements without unnecessary attributes
Downloads
11
Readme
Dom Manipulator
The Dom Manipulator allows you to manipulate HTML elements simply and objectively without unnecessary attributes.
Using Dom Manipulator you can:
- Find elements using the class, id, tagname or attribute;
- Set new class or remove a class;
- Obtain a object using parse form function.
Installation
Using like a library
$ git clone https://github.com/mpahenrique/dom-manipulator.git<body>
...
...
<script src="path/to/dom-manipulator/index.js"></script>
</body>Using like a module
$ npm install dom-manipulator --saveUsage (Getting Dom Manipulator method)
Using like a library
dm.somedmMethod('#my-element'); // When using like a library dm is global (window.dm)Usage
Using like a module
var dm = require('dom-manipulator');Methods
'use strict';
var _elm = dm.getElm('#my-element')
// ==> Get the element {optional: ['all'(boolean: return all selectors), 'key'(integer: select the position), 'searchIn'(string: search the element inside a node)]}
dm.createElm(obj)
// ==> This function, create a new element, they works with a object using this paramers:
// 'elm': passing the new element
// 'content': insert a text inside this new element
// 'insertAfter': insert the new element in a existing element (you can pass the id element or the object element)
// 'insertBefore': same as insertAfter, but they insert in the beginning of the existing element
// 'attributes': insert attributes in the new element. It as a object.
// Ex: 'attributes' : {
// 'tabindex': 1,
// 'style': {
// 'display':'block',
// 'width': '200px',
// 'height': '100px'
// }
// }
dm.toggleClass(_elm,'classToggle')
// ==> This function, verify if 'classToToggle' existy, in true case, they remove the class, otherwise add the class
dm.hasClass(_elm,'verifyClass')
// ==> Return a boolean if the element has class
dm.addClass(_elm,'classRemove')
// ==> Add the class
dm.removeClass(_elm,'classRemove')
// ==> Remove the class
dm.parseForm('#form-element')
// ==> Return a object with name (as key) and the value of elements
dm.byAttr('tabindex')
// ==> Return elements with the atrribute. {optional: ['value'(string: search the attribute with the same value), 'elms(DOMObject: search elements with the attribute in a element father)']}
dm.bindElm(_elm, 'click', callback)
// ==> Binding a element with a event
dm.setStyleProp(_elm, 'border', '20px solid red')
// ==> Setting a style inline to element and you cam pass the style properties as a Object, like as: {'border': '2px solid yellow', 'margin-top': '20px', 'overflow':'auto'}. {optional: ['time'(integer: pass a time, in milliseconds, to call the callback), 'onFinish'(Function: A Callback)]}
dm.getUrlParam()
// ==> Get the url params and return as a Object {optional: ['url'(string: pass a url with params to get the Object return, by default they get window.location)]}
dm.removeElm(_elm) /* or */ dm.removeElm('.my-other-element');
// ==> Remove the elements {optional: ['start'(Integer: Pass the index to start the remove itens)]}