document.createElement('')
- with properties:
Object.assign(document.createElement(''), {})
- defining custom elements in HTML:
customElements.define('my-tag', class extends HTMLElement {})
node.textContent
node.childNodes
element.children
element.innerHTML
- template contents:
template.content
- ShadowDOM:
element.attachShadow({mode: 'open'})
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('')
element.style
window.getComputedStyle()
- Look at stylesheets in CSSOM:
document.styleSheets
declaration.getPropertyValue('')
declaration.setProperty('', '')
- CSS selector, return either first matching element or null:
querySelector('')
- CSS selector, return all matching elements:
querySelectorAll('')
- XPath query:
document.evaluate()
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 => {}))
- HTML document:
new DOMParser().parseFromString('', 'text/html')
- XML document:
new DOMParser().parseFromString('', 'application/xml')
- DOM nodes:
document.createRange().createContextualFragment('')
- JSON:
JSON.parse('')
- HTML DOM to string:
element.outerHTML
- XML DOM to string:
new XMLSerializer().serializeToString()
- JSON to formatted string:
JSON.stringify('', null, 2)
function html(strings, ...expressions) {
return document.createRange().createContextualFragment(
strings.reduce((output, string, index) =>
output + String(expressions[index - 1]) + string
)
)
}