Skip to content

v1.1.0
Compare
Choose a tag to compare
@datkat21 datkat21 released this 09 Oct 05:33
· 26 commits to master since this release
v1.1.0
39b536d

New in v1.1.0

  • A few new methods have been introduced.
  • Added full JSDoc documentation.
  • You can now (finally) create Html instances from actual HTML elements.

New static methods

These are very useful if you want to quickly retrieve a HTML element from the DOM as a new Html instance.

  • Html.from(element) Retrieve a HTML element as a new Html instance
  • Html.qs(query) Retrieve a querySelector as a new Html instance
  • Html.qsa(query) Retrieve all querySelector elements as an array of new Html instances

Examples:

Html.from(document.body) // Html { elm: <body> }
Html.qs('p.red') // Html { elm: <p class="red"> }
Html.qsa('li') // Array(3) [ { elm: <li> }, {...}, {...} ]

New methods

  • queryHtml(selector) querySelector something and return as a new Html instance
  • styleJs({ ... }) Style as JS syntax (backgroundColor instead of background-color for example)
  • getText() Retrieve innerText
  • getHtml() Retrieve innerHTML
  • getValue() Retrieve value

Examples:

let body = Html.qs('body');

// queryHtml
body.queryHtml('p.red') // Html { elm: <p class="red"> }

// styleJs
body.styleJs({
  backgroundColor: '#101010',
  fontFamily: 'sans-serif',
})

let div = new Html('div').appendTo('body');

// getText
let p = new Html('p').text('Hello, world!').appendTo(div);
p.getText() // 'Hello, world!'

// getHtml
div.getHtml() // <p>Hello, world!</p>

// getValue
let input = Html.qs('input');
let value = input.getValue();

Usage

Install the module:

npm i @datkat21/html

Import it into your project via method(s):

  1. Copy and import html.js as a module:
import Html from './html.js';
  1. Loading via package manager:
import Html from '@datkat21/html';
Assets 2
Loading