Javascript extensions to DOM.
DOM code is kinda spaghetti-like. Use this package to streamline your code and keep the control flow sensible.
$ npm install extrajs-dom
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)
xjs.Node#empty()
removes all childrenxjs.Node#trimInner()
removes all empty and whitespace-only Text node descendantsxjs.Node#run()
executes a custom function for any unsupported features you might needxjs.Node#select()
executes a custom function based on a conditionxjs.Element#attr()
sets/removes multiple attributes in one step; taking object and function argumentsxjs.Element#{addClass,removeClass,replaceClassString}()
for better [class]
attribute manipulationxjs.{Document,DocumentFragment}#innerHTML()
gets what you would expect<ol>
, <ul>
, <tbody>
, and <tr>
as lists of dataGenerated using TypeDoc