Um momento
Aula 05
Cursos / Dicas de Desenvolvimento de Software em Áudio
O que é DOM (Dica de Software em Áudio)

Confira umas dicas de desenvolvimento de software em áudio. Explicações e discussões de temas de programação, engenharia de código, aplicativos, web, etc.

Summary

# O que é DOM?

O DOM, ou **Document Object Model**, é a representação dos dados do estado de um documento HTML no navegador. Ele permite a manipulação do documento, tornando-o interativo e parecido com um aplicativo.

## Principais Pontos

- **Definição**: O DOM é um modelo que representa a estrutura de um documento HTML, permitindo que desenvolvedores manipulem suas partes através de JavaScript.
- **Especificações**: Mantido pela instituição WOTWG, a especificação do DOM pode ser acessada em [DOM.spec.wotwg.org](http://dom.spec.wotwg.org).
- **Funcionalidades**: Funções comuns do DOM incluem:
  - `document.getElementById`
  - `document.createElement`
  - `document.querySelector`
  - `addEventListener`
  
Essas funções são parte da interface do DOM e permitem a interação com elementos HTML.

## Estrutura

- O DOM se apresenta como uma árvore de **nodes**, onde cada node representa um elemento HTML.
- A manipulação ocorre através das funções disponibilizadas pelo DOM.

## Uso

- O DOM é amplamente utilizado em desenvolvimento frontend para a manipulação de elementos de páginas, gestão de eventos e criação de aplicações web interativas.
- A consistência entre navegadores garante que a maioria das funções do DOM opera de forma semelhante em Firefox, Chrome, Edge, entre outros.

## Conclusão

O Document Object Model é uma ferramenta essencial para qualquer desenvolvedor web, com uma variedade de funções para manipulação de documentos HTML, tornando a experiência do usuário mais dinâmica e interativa.

Espero que tenham gostado e até a próxima!

Video Transcript

O que é DOM? No inglês document object model. Model de objeto do documento. Então quando a gente fala de DOM, né, DOM no inglês DOM, a gente só se isso ao navegador e ao documento de HTML. Então o DOM, document object model, é a representação dos dados do estado de um documento no navegador. Então aquele documento HTML, que tem as tags e etc. A gente pode representar ele através desse modelo de objeto, né, desse documento DOM. E através do DOM, a gente pode manipular o documento. Então basicamente isso, a gente usa o DOM para poder manipular o documento de HTML na parte do cliente. Quando você acessa o site e você quer mudar o comportamento, manipular o documento para que se torne interativo, se torne um aplicativo e tal. Então se você já programou JavaScript, você já usou os objetos window, janela, documento, documento. Esses todos pertencem ao DOM, tá? Do padrão DOM. Então o DOM tem uma especificação, né? A instituição WOTWG que tem, que mantém esse spec, né, especificação de como o DOM, como essa interface deve ser. E a gente tem lá no site deles, se você quiser ver, DOM.spec.wotwg.org. DOM.sps.whtwg.org. Entendo em mostra lá as várias coisas, as especificações. Então os navegadores, olham para essa especificação e implementam nesse padrão. Então você vai no Firefox, vai no Chrome, vai no Edge e você tem acesso a essas funções do DOM, como por exemplo se você já usou document.getElementById, document.createElement, document.querSelector, addEventListener, assim por diante. Isso é parte da interface do DOM, né? Tudo parte do DOM. Então de certa maneira, o DOM é como se fosse uma espécie de biblioteca no JavaScript, na parte do cliente, no navegador. Ele já tem várias funções que a gente pode usar. E essas funções já são disponibilizadas para a gente usar e elas são disponíveis nos navegadores de hoje, né? A maioria segue quase o mesmo padrão, né? Então hoje o dia está muito mais consistente nos navegadores seguiria mesmo comportamento em respecto às funções do DOM da especificação. Então de novo, o DOM é essa interface através da qual a gente manipula o documento. E essa interface nesse modelo de objeto composto da árvores, de árvores de nodes, né? Nodes, né? Nodes. E essa árvore tem os elementos de HTML que está dentro dos elementos assim por diante. E a maneira de a gente manipular esses elementos é através das funções do DOM, né? DocumentObjectModel. Tá bom? Então é isso. DocumentObjectModel, o modelo de objeto do documento, várias funções para a gente poder manipular o documento de HTML, as páginas, os sites, os aplicativos. Muito, muito usado, né? Você programa no frontend, você sempre está usando as funções do DOM. Para poder manipular os elementos, as nodes, para poder lidar com eventos, né? Você observa os eventos e faz uma coisa de acordo com o evento e todas essas coisas, né? Então os objetos mais usados, né? Se você é o window, tem documento, né? E toda parte do DOM. E tem várias, várias funções. Tem elemento para ID do documento, create elemento documento, evento listener, query selected documento e assim por diante, tá? Então tem várias, várias APIs através do DOM. Então por essa só, espero que tenham gostado e até a próxima.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: