page-dom
Set of async objects for creating DOM elements in Page framework. It's based on the Async Tree Pattern.
Install
npm install @page-libs/dom
Run test
npm test
Run build
npm run build
Package is already built. So, for using in Page you just need to install it.
Usage
const {
// Async objects from the list below
} = require('@page-libs/dom')Async objects
CreatedElement(tagName, attrStr[, text])
new CreatedElement(
'div', 'class="div" id="div1" style="color: deepskyblue; border: 1px solid solid;"', "text"
).call()
ElementWithAdditionalHTML(elm, html)
new ElementWithAdditionalHTML(
new CreatedElement(
'div', 'class="div" id="div1" style="color: deepskyblue; border: 1px solid solid;"'
), '<div>content</div>'
).call()
ElementWithAppendedChildren(elm, ...children)
new ElementWithAppendedChildren(
document.getElementById('elm-id'),
new CreatedElement(
'div', 'class="div" id="div1" style="color: deepskyblue; border: 1px solid solid;"', "text"
)
).call()
ElementWithPrependedChildren(elm, ...children)
new ElementWithPrependedChildren(
document.getElementById('elm-id'),
new CreatedElement(
'div', 'class="div" id="div1" style="color: deepskyblue; border: 1px solid solid;"', "text"
)
).call()
ElementWithAppendedText(elm, text)
new ElementWithAppendedText(
new CreatedElement(
'div', 'class="div" id="div1" style="color: deepskyblue; border: 1px solid solid;"', "text"
), "additional text"
).call()
ElementWithAttributes(elm, attrStr)
new ElementWithAttributes(
new CreatedElement(
'div', 'class="div" id="div1" style="color: deepskyblue; border: 1px solid solid;"', "text"
), 'name="div"'
).call()
ElementWithInnerHTML(elm, attrStr)
new ElementWithInnerHTML(
new CreatedElement(
'div', 'class="div" id="div1" style="color: deepskyblue; border: 1px solid solid;"'
), '<div>content</div>'
).call()
ElementWithTextContent(elm, attrStr)
new ElementWithTextContent(
new CreatedElement(
'div', 'class="div" id="div1" style="color: deepskyblue; border: 1px solid solid;"'
), 'content'
).call()
RemovedElement(elm)
new RemovedElement(
someElement
).call()
ReplacedElement(newElm, oldElm)
new ReplacedElement(
newElm, oldElm
).call()
a, abbr, acronym, address, applet, area, article, aside, audio, b, base, basefont, bdo, big, blockquote, body, br, button, canvas, caption, center, cite, code, col, colgroup, datalist, dd, del, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, frame, frameset, head, header, h1, h2, h3, h4, h5, h6, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, link, main, map, mark, meta, meter, nav, noscript, object, ol, optgroup, option, p, param, pre, progress, q, s, samp, script, section, select, small, source, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, u, ul, var, video, wbr
// Simple example
// tagName(attrStr, [text])(...children)
new ElementWithAppendedChildren(
document.createElement('div'),
div('class="div" id="div1"')(
h1()(),
a('href="guseyn.com"')(),
div('class="div" id="div2"')(
img('src="image.png"')(),
p('', 'text')()
)
)
).call()