Best of DOM — 2025

1. 1
   Article

   Acko.net·42w

   HTML is Dead, Long Live HTML

   The DOM has become bloated with over 350 properties per node and 660 CSS properties, making it unsuitable for modern web applications. CSS's inside-out layout model creates complexity, while features like flexbox require speculative layout passes that can cause performance issues. The author argues for rethinking web UI from first principles, proposing simpler layout models that separate concerns and provide better primitives for building applications. Current proposals like HTML-in-Canvas are insufficient because they don't address the fundamental architectural problems of the web platform.

   130

   10
2. 2
   Article

   LogRocket·1y

   We can finally move elements in the browser with the moveBefore() API

   The newly announced moveBefore() API enables developers to easily reposition DOM elements while preserving their state, which is especially valuable for web applications with complex animations. Chrome 133+ currently supports this API, but it is anticipated to be adopted by other browsers like Safari and Firefox in the future. The moveBefore() API offers advantages over traditional methods like appendChild() and insertBefore() that require removing and reinserting elements, often leading to state loss.

   54

   1
3. 3
   Article

   Lobsters·31w

   Element: setHTML() method - Web APIs

   The setHTML() method is an experimental Web API that provides XSS-safe HTML parsing and sanitization. It parses HTML strings, removes unsafe elements and attributes (like script tags and onclick handlers), and inserts the sanitized content into the DOM. The method accepts optional sanitizer configurations but always strips XSS-unsafe entities regardless of configuration. It's designed as a secure alternative to innerHTML for handling untrusted HTML content.

   47

   3
4. 4
   Article

   Web Performance Calendar·23w

   The Old Ways Are the Best: 100 Lighthouse, 0ms TBT, 32ms Queries

   A developer achieves exceptional performance metrics (100 Lighthouse score, 0ms Total Blocking Time, 32ms queries) by rejecting modern frameworks in favor of older techniques. The approach uses DATAOS (DOM As The Authority On State), treating the DOM itself as the state container instead of maintaining separate state objects, eliminating reconciliation overhead. On the backend, 1972-era bitmap indexing with RoaringBitmaps enables constant-time queries regardless of dataset size. The resulting application uses 32KB of vanilla JavaScript (15% of React's size) with a total payload under 100KB, demonstrating that native browser APIs and decades-old database techniques can outperform contemporary frameworks for most web applications.

   46

   4
5. 5
   Video

   Web Dev Simplified·41w

   Stop Using window “resize” Event Listeners

   Window resize event listeners are inefficient because they fire on every window resize, even when the specific element you're monitoring hasn't changed size. ResizeObserver provides a more efficient alternative by only triggering when the observed element actually changes dimensions. This API allows you to observe multiple elements with a single observer and only executes callbacks when those specific elements resize, making it ideal for element-specific size tracking rather than global window changes.

   42

   2
6. 6
   Article

   Christian Heilmann·33w

   Abandonware of the web: do you know that there is an HTML tables API?

   HTML tables have a native JavaScript API that allows programmatic creation and manipulation of table elements without re-rendering the entire table. The API provides methods like insertRow() and insertCell() to build tables from data structures, and allows direct access to cells using array-like indexing. While the API has some quirks and limitations (like using -1 to append rows and no native TH element creation), it offers a more secure alternative to innerHTML string concatenation and could benefit from modernization similar to recent HTML form enhancements.

   33

   1
7. 7
   Article

   Awesome Java Newsletter·42w

   How to Use innerHTML, innerText, and textContent Correctly in JavaScript

   Explains the differences between three JavaScript DOM properties: innerHTML returns full HTML content with tags, innerText returns only visible styled text respecting CSS rules, and textContent returns all text content regardless of CSS visibility. Each property serves different use cases in DOM manipulation.

   30

   1
8. 8
   Article

   CSS-Tricks·49w

   A Better API for the Resize Observer

   ResizeObserver, MutationObserver, and IntersectionObserver provide better performance than older alternatives like resize events. The standard observer APIs follow a similar pattern but can be complex to use. This guide demonstrates how to create a cleaner, more intuitive wrapper function for ResizeObserver that simplifies the API by encapsulating the observer creation, providing callback patterns, handling options, and offering convenient unobserve methods. The refactored approach makes the code more readable and easier to maintain while preserving all functionality.

   28
9. 9
   Article

   FREEK.DEV·51w

   PHP 8.4's new Dom\HTMLDocument in Diffs

   PHP 8.4 introduces a new Dom\HTMLDocument class that provides improved HTML document handling with better standards compliance and fixes for long-standing bugs present in the legacy DOMDocument class. This new implementation makes HTML manipulation more reliable and easier to work with for developers.

   24

   1
10. 10
    Article

    Collections·28w

    Announcing htmx 4.0: Embracing the Fetch API and Modern Enhancements

    htmx 4.0 transitions from XMLHttpRequest to the modern fetch() API, introducing explicit attribute inheritance with the :inherited modifier, native streaming support, and idiomorph integration for DOM morphing. The release simplifies history management by removing localStorage-based snapshots, enhances the event system with improved hx-on scripting, and adds support for partial elements and view transitions with queuing. An alpha version is currently available with a stable release planned for early 2027, while version 2.0 will continue to receive indefinite support.

    23

    1
11. 11
    Article

    Bram.us·1y

    Move elements around the DOM while preserving their state with moveBefore

    Chrome 133 introduces the moveBefore method that allows moving elements around the DOM while preserving their state. This means that elements like iframes remain loaded and CSS animations continue uninterrupted. Unlike the traditional remove and reinsert method, moveBefore keeps the element's current state intact. Currently, browser support is limited to Chrome 133+, with future support expected from Safari and Firefox.

    22

    1