--- title: Best DOM posts of 2025 | daily.dev description: The most upvoted DOM posts of 2025, curated by the daily.dev community. canonical: https://daily.dev/tags/dom/best-of/2025 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/dom/best-of/2025 og:type: website og:site_name: daily.dev og:title: Best DOM posts of 2025 | daily.dev og:description: The most upvoted DOM posts of 2025, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of DOM — 2025 1. 1 [](/posts/html-is-dead-long-live-html-eosa0ydut "HTML is Dead, Long Live HTML") Article Acko.net · 1y 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 [](/posts/we-can-finally-move-elements-in-the-browser-with-the-movebefore-api-udv9fypcx "We can finally move elements in the browser with the moveBefore() API") 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 [](/posts/element-sethtml-method---web-apis-alvm8fbaf "Element: setHTML() method - Web APIs") Article Lobsters · 50w 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 [](/posts/the-old-ways-are-the-best-100-lighthouse-0ms-tbt-32ms-queries-5p8vm7elp "The Old Ways Are the Best: 100 Lighthouse, 0ms TBT, 32ms Queries") Article Web Performance Calendar · 42w 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. 45 4 5. 5 [](/posts/stop-using-window-resize-event-listeners-saurayuzn "Stop Using window “resize” Event Listeners") Video Web Dev Simplified · 1y 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 [](/posts/abandonware-of-the-web-do-you-know-that-there-is-an-html-tables-api--ndvirq8qz "Abandonware of the web: do you know that there is an HTML tables API?") Article Christian Heilmann · 1y 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 [](/posts/how-to-use-innerhtml-innertext-and-textcontent-correctly-in-javascript-9gbleqc5e "How to Use innerHTML, innerText, and textContent Correctly in JavaScript") Article Awesome Java Newsletter · 1y 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 [](/posts/a-better-api-for-the-resize-observer-ooc0fbzor "A Better API for the Resize Observer") Article CSS-Tricks · 1y 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 [](/posts/php-8-4-s-new-dom-htmldocument-in-diffs-wrgua22d4 "PHP 8.4's new Dom\HTMLDocument in Diffs") Article FREEK.DEV · 1y 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 [](/posts/announcing-htmx-4-0-embracing-the-fetch-api-and-modern-enhancements-mxhcluue6 "Announcing htmx 4.0: Embracing the Fetch API and Modern Enhancements") Article Collections · 48w 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. 24 1 11. 11 [](/posts/move-elements-around-the-dom-while-preserving-their-state-with-movebefore-vehq0fgbu "Move elements around the DOM while preserving their state with moveBefore") Article Bram.us · 2y 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 [See all DOM archives](/tags/dom/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/dom/best-of/2025#page","url":"https://daily.dev/tags/dom/best-of/2025","name":"Best DOM Posts of 2025","description":"The most upvoted DOM posts of 2025, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/dom/best-of/2025#items","numberOfItems":11,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/html-is-dead-long-live-html-eosa0ydut","name":"HTML is Dead, Long Live HTML"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/we-can-finally-move-elements-in-the-browser-with-the-movebefore-api-udv9fypcx","name":"We can finally move elements in the browser with the moveBefore() API"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/element-sethtml-method---web-apis-alvm8fbaf","name":"Element: setHTML() method - Web APIs"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/the-old-ways-are-the-best-100-lighthouse-0ms-tbt-32ms-queries-5p8vm7elp","name":"The Old Ways Are the Best: 100 Lighthouse, 0ms TBT, 32ms Queries"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/stop-using-window-resize-event-listeners-saurayuzn","name":"Stop Using window “resize” Event Listeners"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/abandonware-of-the-web-do-you-know-that-there-is-an-html-tables-api--ndvirq8qz","name":"Abandonware of the web: do you know that there is an HTML tables API?"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/how-to-use-innerhtml-innertext-and-textcontent-correctly-in-javascript-9gbleqc5e","name":"How to Use innerHTML, innerText, and textContent Correctly in JavaScript"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/a-better-api-for-the-resize-observer-ooc0fbzor","name":"A Better API for the Resize Observer"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/php-8-4-s-new-dom-htmldocument-in-diffs-wrgua22d4","name":"PHP 8.4's new Dom\\HTMLDocument in Diffs"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/announcing-htmx-4-0-embracing-the-fetch-api-and-modern-enhancements-mxhcluue6","name":"Announcing htmx 4.0: Embracing the Fetch API and Modern Enhancements"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/move-elements-around-the-dom-while-preserving-their-state-with-movebefore-vehq0fgbu","name":"Move elements around the DOM while preserving their state with moveBefore"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"DOM","item":"https://daily.dev/tags/dom"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/dom/best-of"},{"@type":"ListItem","position":5,"name":"2025"}]}]} ```