dom-toolkit.md

Vanilla DOM Toolkit

Creating Elements

• document.createElement('')
• with properties: Object.assign(document.createElement(''), {})
• defining custom elements in HTML: customElements.define('my-tag', class extends HTMLElement {})

Working with Element Contents

• node.textContent
• node.childNodes
• element.children
• element.innerHTML
• template contents: template.content
• ShadowDOM: element.attachShadow({mode: 'open'})

Working with Attributes

• element.attributes
• element.getAttribute('')
• element.setAttribute('', '')
• element.hasAttribute('')
• element.removeAttribute('')
• element.dataset
• element.classList.add('')
• element.classList.remove('')
• element.classList.contains('')
• element.classList.toggle('')
• element.classList.replace('')

Working with Style Properties

• element.style
• window.getComputedStyle()
• Look at stylesheets in CSSOM: document.styleSheets
• declaration.getPropertyValue('')
• declaration.setProperty('', '')

Adding Nodes to DOM

• node.before()
• node.prepend()
• node.append()
• node.after()

Removing Nodes from DOM

• node.remove()
• node.replaceWith()
• node.replaceChildren()

Finding Elements

• CSS selector, return either first matching element or null: querySelector('')
• CSS selector, return all matching elements: querySelectorAll('')
• XPath query: document.evaluate()

Traversing & Filtering DOM

• document.createTreeWalker()
• document.createNodeIterator()

Observing Changes (Events and Observers)

• eventTarget.addEventListener('', event => {})
• eventTarget.dispatchEvent()
• new Event('')
• new MouseEvent('')
• new KeyboardEvent('')
• new CustomEvent('')
• eventTarget.removeEventListener('', event => {})
• Observe changes to element's attributes, text content, child content: new MutationObserver(entries => entries.forEach(entry => {}))
• Observe changes to element's dimensions: new ResizeObserver(entries => entries.forEach(entry => {}))
• Observe changes to element's visibility on screen: new IntersectionObserver(entries => entries.forEach(entry => {}))

Parsers

• HTML document: new DOMParser().parseFromString('', 'text/html')
• XML document: new DOMParser().parseFromString('', 'application/xml')
• DOM nodes: document.createRange().createContextualFragment('')
• JSON: JSON.parse('')

Stringifiers

• HTML DOM to string: element.outerHTML
• XML DOM to string: new XMLSerializer().serializeToString()
• JSON to formatted string: JSON.stringify('', null, 2)

---

Basic HTML tagged template function

function html(strings, ...expressions) {
  return document.createRange().createContextualFragment(
    strings.reduce((output, string, index) =>
      output + String(expressions[index - 1]) + string
    )
  )
}