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()