thor-dom v1.0.15

A small kit to simplify DOM operation.

Install

npm i thor-dom

Usage

Select DOM elements

// query by selector 
dom.query('div.some-class > #id1')
// warp dom elements to Nodes object
const a = document.createElement('div')
const b = document.createElement('div')
dom.wrap(a)
dom.wrap(a, b)
dom.wrap(...document.querySelectorAll('div'))

Build DOM tree

// create a element and specify class name
dom.new('div', 'class1', 'class2', someClassName ...) 
dom.new('div', 'class1 class2')
// or
dom.div('class1', 'class2' ...)
dom.span('class1 class2 class3', someClassName)
...
// Example:
let input;
dom.div('container').css({
  display: 'flex',
  flexDirection: 'column',
}).append(
  dom.div('header').text('Title'),
  dom.div('content').append(
    dom.input().name('search').ref((ipt) => input = ipt),
    dom.button().text('Search').on('click', () => {
      const keyword = input.value();
      // do search operation ...
    })
  )
).appendTo(document.body)

Convert HTML string to Nodes object

dom.html('<div>example</div>')

work with jsdom

const JSDom = require('jsdom')
const { createDom } = require('thor-dom')

const jsDom = new JSDom.JSDOM();
const doc = jsDom.window.document;
const dom = createDom(doc)
...

console.log(jsDom.serialize());