dom

Adds one listener to multiple events

Sets element styles from passed object of styles. Can also transform dash-case to camelCase for CSS properties

Converts a duration string to milliseconds integer

Decodes HTML entities in a string using the browser's DOMParser. If the DOMParser is not available, it uses a regular expression to decode the basic entities.

Delegate DOM events. Uses event bubbling with closest() for events that bubble. Uses MutationObserver for non-bubbling events (focus, blur, mouseenter, mouseleave, etc.) to attach listeners directly to matching elements as they appear in the DOM.

Detaches an element from the DOM and returns it

Drag event handler

Pointer events, and one gesture at a time. The pointer is captured on the way in - touch and pen the browser captures implicitly, the mouse it does not - so a mouse drag keeps reporting after it has left the element, and whatever the pointer crosses on the way hears nothing of it. What capture does not survive is the element leaving the document: the moment it is disconnected the spec hands the capture to the document, and insertBefore on a connected node disconnects it first, so a list that reorders itself by moving the dragged row loses it on the first crossing. The moves are heard on the document for as long as the gesture lasts, which is where they land either way. Everything this needs - pointer events, pointer capture, touch-action - is in Safari 13 and iOS 13.2; below that the listener attaches and nothing ever arrives.

Two ways in. Hand it an element and it waits for a pointerdown of its own, for as long as it is attached. Hand it a pointerdown already in flight and it starts that one gesture now, taking its listeners away again when the pointer is let go - which is what a caller with a single delegated listener has, and the only shape that works over a list whose rows come and go. Attaching per row is a listener per row and a re-attach every time the list grows one; delegating is one listener whatever the list does.

Started from an event, nothing is written into the element: no drag-enabled, no dragging, no touch-action. It is an element the caller already owns and has already styled, and touch-action is decided long before a pointerdown is dispatched, so setting it there would be a promise this cannot keep - put it on the handle in CSS.

A gesture the platform takes away - a scroll it decided was one, a call arriving - reports dragcancel and no dragend, and never coasts into inertia. That distinction is the whole reason to listen for it: a cancelled drag is not a drag the person finished.

within is what makes the percentages worth reading. They are measured against the element being dragged unless it names another, and a handle is a few pixels of the track it runs along - so xPercentage off a 24px handle answers a question about the handle, and the caller wanting "how far along the track is this" has to do the sum itself. Pointed at the track it is that number directly, held to 0-100 at the ends, which is a slider, a splitter or a before-and-after comparison in one read. maxVelocity: '0.5%' caps the flick in that unit too.

axis is for a handle on a track. The glide is two-dimensional and over once both velocities have decayed, and a slider reads one of them: a flick along a horizontal track carries some velocity across it too, and that one can outlive the one along the track by most of a second - the handle sat still at the wall, draginertiaend not yet said. Named, the other axis reads 0 in every velocityX/velocityY and carries nothing, so the glide is over when this one is.

preventDefaultTouch owns the touch gesture by putting touch-action: none on the element for as long as the handler is attached, restored by destroy. Preventing the default on the events cannot do it: by the time a pointermove arrives the browser has already decided the gesture is a scroll.

The events are named dragstart, drag and dragend, which are also the names the native HTML drag and drop API uses. A page listening for the native ones on the same element will hear these too. Renaming them is a breaking change and has not been made; callback is the way to take one element's drags without that.

What shaped it. compare-images-slider is the handle on a track: within, axis, and a flick capped in per cent because a comparison slider is the same gesture at every width. splitter-elemental in book-of-elements is that read on either axis, and rearrange-elemental is the delegated way in - one pointerdown over rows that come and go, losing the pointer capture on the first insertBefore. Every option above is one of those three hitting a wall, not a guess at what a caller might want.

Encodes HTML entities in a string using the browser's DOMParser. If the DOMParser is not available, it uses a regular expression to encode the basic entities.

Returns all focusable elements from a given element or the document. Focusable elements are those that can be focused by the user, such as links, buttons, inputs, etc. Always use getVisibleFocusableElements instead of this function to ensure that only visible elements are returned, since only visible elements can be focused by the user.

Gets if the horizontal scroll has reached the start or end of the element.

Gets table data from a table element, a simple regular table element, or a table like structure. Useful for scraping data.

Returns the duration a single property will actually transition with, in milliseconds.

Unlike reading getTransitionDurations() by key, this resolves the all keyword: a transition: all 1s animates height too, it just isn't listed under that name. An untransitioned property reads as 0, which is also what transition: none gives you - so a reduced motion media query switching the transition off reads as "no animation".

Returns a map of transition properties and durations

Gets if the vertical scroll has reached the start or end of the element.

Returns all visible focusable elements from a given element or the document.

Empty where there is no layout to consult, since isVisible decides every row.

Inserts an element before another element

Checks if an element is empty

Checks if an element is overflowing horizontally used to check if the scrollbar is visible.

Checks if an element is overflowing its container either vertically or horizontally used to check if the scrollbar is visible.

Checks if an element is overflowing its container used to check if the scrollbar is visible.

If provided element is visible. Checks if the element is not visibility hidden or display none, has no opacity, and has a width and height.

Answers false for everything where there is no layout to consult - jsdom, and any other DOM without a renderer behind it - because the fallback path ends on the element having a box, and nothing in such an environment ever has one. That is honest rather than useful: a DOM that renders nothing cannot say what is visible. Code that has to run under one wants a narrower question it can actually answer - whether the element sits inside a [hidden] ancestor, say.

Loads an image form a provided source url and calls a callback when it's loaded

Check a list of elements if all of them matches a selector

Check a list of elements if any of them matches a selector

Run a handler on selected elements and on elements added to the DOM with the same selector as a MutationObserver abstraction, or use it to delegate events as a delegateEvent alias

Parses HTML string to a DOM Node

Resizes an element to cover its parent element while maintaining the aspect ratio

Queries the DOM for elements and returns them. Substitutes for document.querySelectorAll(selector) and JQuery's $(selector)

Queries the DOM for a single element and returns it. Substitutes for document.querySelector(selector) and JQuery's $(selector).first()

Read a set of typed options off an element's attributes.

Accepts the bare, kebab-case and data-* spellings of each option, with data-* winning when both are present, so a widget can be configured whichever way the markup author reaches for. Only the options actually present come back - absent ones are left out rather than defaulted, so the result merges cleanly over whatever defaults the caller holds.

Booleans follow HTML, not JavaScript: a bare attribute parses as an empty string and means "on", and only false and 0 mean off. Numbers that do not parse are dropped rather than coming back as NaN.

Removes all elements matching a selector from the DOM

Removes one listener from multiple registered events

Reports which section the reader is currently in, and calls back when that changes.

The current section is the last one whose top edge has passed the reading line — offset pixels below the top of the viewport — which is not the same as the topmost section on screen: a heading scrolled just out of sight is still the section being read. At the very bottom of the page the last section wins outright, because a final section shorter than the screen can never reach the line and would otherwise be unreachable. Above the first section the callback gets null, leaving what the top of the page means to the caller.

Driven by a rAF-throttled scroll listener rather than an IntersectionObserver: an observer fires only when visibility changes, so scrolling from one heading to the next inside a screen that already shows both tells it nothing, and it keeps reporting the section before.

Section positions are measured once and cached, so a scrolled frame costs one layout read — a document-height check — instead of one per section. The cache rebuilds itself on window resize, through a ResizeObserver on document.body whenever the body changes size, and on any scrolled frame where the document's height moved — which is what catches a body pinned to 100% height, whose box never resizes while its content grows. An IntersectionObserver over the sections rides along as a staleness probe: its entries carry each section's rectangle for free, so a shift that changed no height anywhere — two sections trading equal heights, a transform settling — is caught the moment a moved section crosses a viewport edge. A shift that neither changes a height nor crosses an edge answers stale until update() is called; each observer degrades alone, so a browser missing one keeps every other trigger.

Follows the window's scroll only, not a scrolling container's.

Swipe event handler

Two points make the gesture - where the pointer went down and where it came up - so there is no pointermove listener running on every frame of every scroll down the page. The axis it travelled furthest along is the one reported, and a gesture as far down as across is neither.

Toggles an attribute value on an element

Reports why a sticky element cannot stick.

position: sticky fails silently: no error, no warning, an element that simply never moves. The usual cause is an ancestor with overflow: hidden, scroll, auto or overlay, which becomes the scrollport the element sticks inside — and when that ancestor does not itself scroll, there is nowhere for the element to go. No DevTools reports it: neither engine's inactive-CSS pass has a rule for sticky, since the declaration is valid and applied, and their scroll badges mark containers that really do scroll — where the one that breaks stickiness is a box that never scrolls at all. This reads the ancestors and names the culprit.

Each finding carries a code, the element it is about, the culprit element to look at, the problem in one sentence and a fix. The codes are detached (not in the document, so nothing about it computes), not-sticky, no-inset (every inset is auto, so there is no threshold to stick at), no-room (the containing block is no larger than the element), dead-scrollport (an ancestor is the scrollport and never scrolls) and nested-scrollport (the element sticks inside an ancestor rather than to the viewport, which may well be what you meant).

An empty array means nothing here can see a reason, never that the element sticks. Three things it cannot see: contain: paint, contain: layout and content-visibility on an ancestor; html and body overflow, skipped because a non-visible value there propagates to the viewport and reporting it would fire on the most ordinary markup there is; and a containing block that is not the element's parent, since no-room measures the parent.