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? …
Tag Archives: dom
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. …
John Resig on The DOM
The jQuery author talks about the DOM: Nearly every method is broken in some way, in some browser