HTML DOM :: Node :: Document | Element :: CanIUse.com

Document Object has both Model (DOM) and Interfaces.

Interface hierarchy: Node > (Document|Element)

Both have properties and methods, with the descendents inheriting from Node.

Examples

Libraries

UPDATE: Use base.js library

o.toDOM = (parent, child, at) => {
    /** Insert into DOM
     * @param {Element}   parent
     * @param {DOMString} child   gets parsed
     * @param {any}       at      optional; prepend on any, else append
     * 
     * USAGE: toDOM(css('#foo .bar'), '<h3>Foo</h3> <p>bar baz</p>', 1)
     */
    //o.profStart('toDOM')
    // https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML 
    at = at ? 'afterbegin' : 'beforeend' 
    // ... "? Prepend : Append" (amongst siblings; children of parent node).
    if (parent && child) {
        parent.insertAdjacentHTML(at, child)
        return true
    }
    return false
}
o.purge = (target) => { // Remove all child nodes
    if (!target) return false
    while (target.firstChild) {
        target.removeChild(target.firstChild)
    }
}
o.replaceContent = (node, html) => node.textContent = html

o.create = (name) => {
    return document.createElement(name)
}
o.id = (id) => {
    return document.getElementById(id)
}

/* root is context node */

o.css = (selector, root) => {
    root = root ? root : document 
    return root.querySelector(selector)
}
o.cssAll = (selector, root) => {
    root = root ? root : document 
    return root.querySelectorAll(selector)
}
o.class = (name, root) => {
    root = root ? root : document 
    return root.getElementsByClassName(name)
}
o.tags = (tag, root) => {
    root = root ? root : document 
    return root.getElementsByTagName(tag)
}

Others

DOM Location

console.log("origin",window.location.origin)    // origin http://127.0.0.1:5500
console.log("window",window.location.pathname)  // /sub/
console.log("top",top.location.pathname)        // /sub/
console.log("parent",parent.location.pathname)  // /sub/
// `top` and `parent` useful @ iframe

DOM Position : el.getBoundingClientRect() | CanIUse @ 99.5%

div {
    width: 400px;
    height: 200px;
    padding: 20px;
    margin: 50px auto;
    background: #990;
}

<div>&nbsp;</div>

const 
    getRect = el => { 
        /*************************************************************
         * Convert the unusable return of getBoundingClientRect(),
         * which is the morphodite DOMRect, into a USEFUL object.
         * 
         * USEAGE: [...Object.keys(getRect(el))].map(perKey)
         ************************************************************/
        const {
            top, right, bottom, left, width, height, x, y
        } = el.getBoundingClientRect()
        return {top, right, bottom, left, width, height, x, y} 
    },
    src = document.querySelector('DIV'),
    got = getRect(src),
    put = (key) => {
        const tgt = document.createElement('PRE')
        tgt.textContent  = `${ key } : ${ got[key] }`
        document.body.appendChild(tgt)
    }

;[...Object.keys(got)].map(put)

HTML DOM :: Element > Node < Document

Test per CSS

Element.matches() (CanIUse.com)

Test if the CSS selectorString matches the element; checks if el is the selector.

var result = el.matches(selectorString) // true | false

Find per CSS

Element.closest() (CanIUse.com)

Walk up the DOM, from targetEl, to find the closest element (closestEl) matching the CSS selectors.

var closestEl = targetEl.closest(selectors) // HTMLElement | null

document.querySelector(CSS-selector)

Examples

document.querySelector('main.group-1') 
document.querySelector('#logo>svg') 
document.querySelector('div.user-panel.main input[name="login"]')

Returns first element matched, else null.

parentNode.querySelectorAll(CSS-selector)

Returns a NodeList representing a list of matching elements.

contextNode.querySelectorAll(selector)

Insert | Replace :: HTML as String (parsed as HTML and inserted as nodes)

insertAdjacentHTML()

el.insertAdjacentHTML(position, STRING)

node.textContent

Comparisons:

Insert | Replace :: HTML as Node

append() (CanIUse.com)

parentNode.append(...nodesToAppend)

append()/prepend() do so relative to sibling node(s) of parentNode; not parentNode itself. Inserts one or more nodes (nodesToAppend/nodesToPrepend) after/before the collection of siblings under parentNode.

prepend() (CanIUse.com)

appendChild() / insertBefore() are Older APIs (IE compatible) of append()/prepend()

parentNode.appendChild(aChild);
parentNode.insertBefore(newNode, referenceNode)

E.g.,

li = document.createElement('LI')       // Create <li> node
txtNode = document.createTextNode(str)  // Create text node
li.appendChild(txtNode)                 // Append it to <li>

ul = document.getElementById('target') 
ul.insertBefore(li, ul.childNodes[0])   // prepend this li to siblings under ul

node.childNodes[0] & node.nodeValue

Use to replace TEXT at one of many siblings; leaves all else unaffected.

node.childNodes[0]

Insert MANY :: DocumentFragment | create​Document​Fragment()

Remove child elements

node.removeChild(child)

Referencing only the target node:

let node = document.getElementById('target')
if (node.parentNode) {
    node.parentNode.removeChild(node)
}

Referencing only the parent node:

let parent = document.getElementById('parent')
while (parent.firstChild) {
    parent.removeChild(parent.firstChild)
}

Or

let parent = document.getElementById('parent')
while (parent.firstChild) {
    parent.firstChild.remove()
}

Other suggested …

var cNode = node.cloneNode(false)
node.parentNode.replaceChild(cNode, node)

Layout Thrashing :: Layout Reflow Culprits

... properties or methods that trigger the browser to synchronously calculate the style and layout; ... a common performance bottleneck.