Unlike the classic way of moving a node by removing+reinserting it, the moveBefore method preserves the element’s state!
Move elements around the DOM while preserving their state with moveBefore
Tag Archives: dom
Move elements around the DOM while preserving their state with
DOM Treemap DevTools Extension
Christian Schaefer created a DevTools Extension for both Chromium and Firefox that visualizes the children of a DOM Node. The bigger the box, the more children that child node has. After a Google Lighthouse audit complaining an excessive DOM size, have you ever wondered in which corner of your document most DOM nodes are buried? …
Visualizing DOM Events
A visualizer to help you learn how the DOM Event system works through exploration. Explore event phases, stopping events, canceling events, passive events and more. Explore DOM Events →
Observing Rendered DOM Nodes
Sam Thorogood has been looking into all kinds of changes that can happen to DOM Nodes: This post will explain how to be notified when: an element is added or removed from the DOM the bounding box of an element changes (i.e., resizes) an element moves around the page for any reason Expect some ResizeObserver, …
HTML DOM – Common tasks of managing HTML DOM with vanilla JavaScript
HTML DOM is a collection of JavaScript snippets to perform common tasks. No dependencies. HTML DOM →
How to write your own Virtual DOM
The main part of Virtual DOM can be written in less than ~50 lines of code. […] When we change something in our Virtual DOM Tree, we get a new Virtual Tree. Algorithm compares these two trees (old and new), finds differences and makes only necessary small changes to real DOM so it reflects virtual. …