Web: DOM

This is a module with some shorthand methods to execute common and useful DOM commands.

html, head, body

Just some short aliases for:

• html: document.documentElement
• head: document.head
• body: document.body

$

Shorthand for document.querySelector.

import{$}from'@jsweb/utils/web/dom'constcontainer=$('div.container')// returns the div.container DOM element or undefined if not found

$$

Shorthand for document.querySelectorAll.

import{$$}from'@jsweb/utils/web/dom'constitems=$$('li.item')// returns an array of the li.item elements or an empty array if none

create

Shorthand for document.createElement, but with a useful way to add properties to the element.

import{create}from'@jsweb/utils/web/dom'constlink=create('a',{href: 'https://some.cool.site',target: '_blank',class: 'stylish-link'})// returns the created element

Note: Only valid HTML element properties. Don't try to add inner content or event listening here.

append

Shorthand for Element.appendChild.

import{append,create}from'@jsweb/utils/web/dom'constli=create('li',{class: 'list-item'})li.textContent='New Item'append('ul',li)

listen

Shorthand for Element.addEventListener.

import{listen}from'@jsweb/utils/web/dom'listen('#click-here','click',(event)=>{ ... })