Entendendo renderização no browser: CSSOM

Hey, esse artigo faz parte de uma série sobre renderização no browser. Se você ainda não leu os artigos passados, da uma conferida nos links abaixo:

• 
  
  

  No código essa representação ficaria assim:
  
  

  
  
  
  
  

  CODE Kopieren

  body {
  
    font-size: 16px;
  
  }
  
  
  
  div {
  
    width: 200px;
  
    height: 100px;
  
    background: blue;
  
  }
  
  
  
  a {
  
    color: red;
  
    text-decoration: none;
  
  }
  
  
  
  h1 {
  
    font-weight: bold;
  
  }
  
  

  
  
  
  
  
  
  
  

  E a árvore DOM referente ao CSSOM que vimos anteriormente é representada da seguinte forma:

  
  
  

  e execute os comando no console dela.
  
  

  
  
  
  
  

  CODE Kopieren

  document.styleSheets[0].cssRules;
  
  

  
  
  
  
  
  
  
  

  Ao executar o código acima você terá acesso a todos o css presentes na folha de estilo. Seguindo a mesma lógica anterior você pode acessar os elementos por meio de índice.
  
  

  
  
  
  
  

  CODE Kopieren

  document.styleSheets[0].cssRules[3];
  
  

  
  
  
  
  
  
  
  

  No código acima eu estou acessando a declaração de estilo do body da página.
  
  

  
  
  
  
  

  CODE Kopieren

  document.styleSheets[0].cssRules[3].style.background = "red";
  
  

  
  
  
  
  
  
  
  

  Acessando a propriedade style conseguimos adicionar ou alterar qualquer propriedade CSS, mas sem escrever estilos inlines.

  
  
  

  Recomendo que brinque um pouco mais com essa api mudando os índices e alterando o CSS de diversos elementos.

  
  
  

  
  
  
  Conclusão
  

  
  
  

  Assim como o DOM o CSSOM é uma representação em forma de arvore utilizada pelos navegadores para o processo de renderização.

  
  
  

  Podemos acessar todo o CSS da página e manipulá-lo livremente utilizando javascript. Saber executar esse tipo de operação é essencial para compreender ferramentas de CSS como styled componentes, linária etc.

  
  
  

  O conhecimento de base é o mais importante, mas é constantemente negligenciado.
  
  No contexto do desenvolvimento web, conhecer html, css, javascript e como o navegador funciona é essencial. Com essa base sólida, você vai conseguir aprender qualquer tecnologia que derive desses fundamentos.

  
  
  

  
  
  
  Muito obrigado!!
  

  
  
  

  Obrigado por ter chegado até aqui!

  
  
  

  Espero que tenha aprendido algo novo ao longo dessa leitura.

  
  
  

  Até a próxima!

  
  
  

  
  
  
  Referências
  

  
  
  
  
  
  Vollständiger Original-Bericht

  Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

  ↗ Original-Artikel auf dev.to lesen