July 16, 2023, 2:40 p.m. | Lyndsi Kay Williams

DEV Community dev.to

Real DOMs and virtual DOMs and shadow DOMs, oh my! Let's take a dive to see how they all work together to create a clean, performant Document Object Model.


The DOM (Document Object Model) is exactly as it states. The HTML tree of a website is represented by an object called document. In this object there is a model of the HTML tree's elements, conveniently accessible by object dot notation.




  • document.head will return the <head></head> section of the …

difference dom frontend html performance react shadow together tree virtual webdev website work

Data Architect

@ University of Texas at Austin | Austin, TX

Data ETL Engineer

@ University of Texas at Austin | Austin, TX

Lead GNSS Data Scientist

@ Lurra Systems | Melbourne

Senior Machine Learning Engineer (MLOps)

@ Promaton | Remote, Europe

Software Engineer, Data Tools - Full Stack

@ DoorDash | Pune, India

Senior Data Analyst

@ Artsy | New York City