extrajs-dom
Javascript extensions to DOM.
DOM code is kinda spaghetti-like. Use this package to streamline your code and keep the control flow sensible.
Install
$ npm install extrajs-dom
Example
traditional DOM methods:
function createMyLink(url, text) {
let link = document.createElement('a')
link.classList.add('my-link')
link.setAttribute('itemprop', 'url')
link.setAttribute('itemscope', '')
link.setAttribute('itemtype', 'http://schema.org/URL')
link.rel = 'author'
link.href = url
link.textContent = text
return link
}
extrajs-dom methods:
const xjs = require('extrajs-dom')
const createMyLink = (url, text) =>
new xjs.HTMLAnchorElement(document.createElement('a'))
.addClass('my-link')
.attr({
itemprop : 'url',
itemscope: '',
itemtype : 'http://schema.org/URL',
})
.rel('author')
.href(url)
.textContent(text)
.node // returns the modified Node (originally passed to constructor)
Features
- Method chaining
-
xjs.Node#empty()
removes all children -
xjs.Node#trimInner()
removes all empty and whitespace-only Text node descendants -
xjs.Node#run()
executes a custom function for any unsupported features you might need -
xjs.Node#select()
executes a custom function based on a condition -
xjs.Element#attr()
sets/removes multiple attributes in one step; taking object and function arguments -
xjs.Element#{addClass,removeClass,replaceClassString}()
for better[class]
attribute manipulation -
xjs.{Document,DocumentFragment}#innerHTML()
gets what you would expect - Populate
<ol>
,<ul>
,<tbody>
, and<tr>
as lists of data