Check if a given DOMRect is contained within another DOMRect
True when the target lies inside the container or on its edges.
function isContained({ target, container }) { return target.x >= container.x && target.x + targ…DOMCollection · 30 utilities
DOM utilities
Elements, geometry, focus, scrolling and forms. The geometry checks run in the lab; the rest run in Chromium against the markup each page shows.
Check if two DOMRects intersect
Two rects intersect when they meet on both axes.
function intersect({ a, b }) { return b.x <= a.x + a.width && b.x + b.width >= a.x && b.y <= a.…DOMCompare two DOMRects for size and position match
Compare x, y, width and height exactly.
function sameRect({ a, b }) { return ['x', 'y', 'width', 'height'].every(key => a[key] === b[ke…DOMGet the center point of a DOMRect
Return [x, y] of the rect’s center.
function getCenter({ x, y, width, height }) { return [x + width / 2, y + height / 2]; }DOMCalculate the distance to the bottom of a page
Pixels left to scroll before the end of the page.
function distanceToBottom() { return document.documentElement.scrollHeight - window.innerHeight…DOMCheck if an element has CSS overflow
True when either axis is styled to scroll: overflow auto or scroll.
function hasCssOverflow(element) { const { overflowX, overflowY } = getComputedStyle(element); …DOMCheck if an element has overflow
True when the content is larger than the element’s visible box.
function hasOverflow(element) { return element.scrollHeight > element.clientHeight || element.s…DOMCheck if an element is a descendant of another
True when child is inside parent, at any depth.
function isDescendant(child, parent) { return child !== parent && parent.contains(child); }DOMCheck if an element is focused
Compare the element with document.activeElement.
function hasFocus(element) { return element === document.activeElement; }DOMCheck if the touch events are supported
True when the browser exposes touch events or reports touch points.
function touchSupported() { return 'ontouchstart' in window || navigator.maxTouchPoints > 0; }DOMCheck if user scrolls to the bottom of the page
True when the viewport has reached the end of the page.
function isAtBottom(tolerance = 1) { const { scrollHeight, clientHeight } = document.documentEl…DOMDetect Internet Explorer browser
Look for document.documentMode, which only Internet Explorer defines.
function isInternetExplorer() { return 'documentMode' in document; }DOMDetect macOS browser
Guess whether the device is a Mac, iPhone or iPad from the platform string.
function isApplePlatform() { return /Mac|iPhone|iPad|iPod/.test(navigator.userAgentData?.platfo…DOMGet all siblings of an element
Return the other element children of the element’s parent.
function siblings(element) { return element.parentElement ? [...element.parentElement.children]…DOMGet the position of an element relative to the document
Add the scroll offsets to the element’s viewport position.
function getPosition(element) { const rect = element.getBoundingClientRect(); return { left: re…DOMGet the selected text
Read the text of the current document selection.
function getSelectedText() { return window.getSelection()?.toString() ?? ''; }DOMGo back to the previous page
Move one step back in the session history.
function goBack() { history.back(); }DOMHide an element
Set the hidden attribute.
function hide(element) { element.hidden = true; }DOMInsert an element after other one
Place an element right after a reference element.
function insertAfter(element, reference) { reference.after(element); }DOMInsert an element before other one
Place an element right before a reference element.
function insertBefore(element, reference) { reference.before(element); }DOMInsert given HTML after an element
Parse an HTML string and insert it after the element.
function insertHtmlAfter(html, element) { element.insertAdjacentHTML('afterend', html); }DOMInsert given HTML before an element
Parse an HTML string and insert it before the element.
function insertHtmlBefore(html, element) { element.insertAdjacentHTML('beforebegin', html); }DOMRedirect to another page
Navigate to a URL, adding an entry to the history.
function goTo(url) { location.assign(url); }DOMReload the current page
Load the current document again.
function reload() { location.reload(); }DOMReplace an element
Swap an element for another in the same position.
function replace(element, replacement) { element.replaceWith(replacement); }DOMScroll to top of the page
Scroll the window back to the top.
function goToTop() { window.scrollTo(0, 0); }DOMSerialize form data
Turn a form’s fields into an object; repeated names become arrays.
function serialize(form) { const groups = new Map(); for (const [key, value] of new FormData(fo…DOMShow an element
Clear the hidden attribute and any inline display: none.
function show(element) { element.hidden = false; element.style.removeProperty('display'); }DOMStrip HTML from a given text
Parse HTML in an inert document and return its text.
function stripHtml(html) { return new DOMParser().parseFromString(html, 'text/html').body.textC…DOMToggle an element
Flip the hidden attribute.
function toggle(element) { element.hidden = !element.hidden; }DOMTry a function in the local code lab, then read its limits before using it in an application.