templating / web components
document object model
dom manipulation
document.createElement( tag )
node.cloneNode( true )
element.before( sibling )
element.prepend( child )
element.append( child )
element.after( sibling )
element.remove()
element.replaceWith( ...replacement )
dom search
element.querySelector( query )
element.querySelectorAll( query )
jquery
document.getElementById( id )
element.getElementsByClassName( class )
element.getElementsByTagName( tag )
templates
<template>
template.content
DocumentFragment ( Node, not Element )
Node
Text
node.textContent
Element ( Elements are Nodes )
element.innerHTML
attributes
element.hasAttribute()
element.getAttribute()
element.setAttribute()
unique attributes
element.classList
element.style
element.dataset
web components
customElements
CustomElementRegistry
customElement.define( name, elementClass )
element.attachShadow( { mode: "open"|"closed" } )
element.shadowRoot
using templates and slots
element.slot
element.assignedSlot
textNode.assignedSlot