El DOM es una APIs Web (como lo es la API Canvas, API de Geolocalización, LocalStorage, Multimedia, el CSSOM, etc) que permite el acceso dinámico a través de la programación para acceder, añadir, cambiar y eliminar dinámicamente cualquier documento HTML con lenguajes como ECMAScript (JavaScript).
El DOM se define como la estructura de objetos JS que usa el Navegador para comprender el código HTML, de esta forma el navegador mapea el código HTML a objetos JS para ser manipulados.
El nodo raíz del DOM llamado 'document' es un objeto (y también una propiedad de windows) que contiene todo el HTML convertido a objetos JS y que se puede visualizar por consola ó gráficamente como una estructura jerárquica de nodos con forma de árbol.
«*Document: es el nodo raíz, a partir del cual derivan el resto de nodos»*
El CSSOM funciona de manera similar pero complementario al DOM, transformando el lenguaje de marcado CSS en objetos JS que son entendibles para el navegador, lo que permite leer y modificar el estilo de CSS de forma dinámica.
Es un método de lectura del objeto global windows (window.getComputedStyle) que retorna un objeto con todos los estilos computados del elemento del DOM que se le indica como parámetro.
El navegador toma las medidas relativas de los estilos CSS, lo interpreta y las convierte a valores computados (px); estos pueden ser consultadas en la pestaña computed dentro de las herramientas para desarrolladores que nos ofrecen los navegadores
Los estilos computados: representan los valores finales (en px) de las propiedades CSS del elemento.
let elemento = document.querySelector('.selector')
getComputedStyle(elemento)
Metodo de lectura para obtener el valor de una propiedad en particular de un elemento.
let elemento = document.querySelector('.selector')
getComputedStyle(elemento).getPropertuValue('propiedadCss')