\n\n\n\n\n\n\n<\/p>
O Que é DOM<\/strong><\/h2>A sigla DOM significa Document Object Model, que em português significa Modelo de Documento por Objetos. Trata-se de uma interface de programação que os navegadores utilizam para representar páginas na web.<\/p>
O DOM oferece um modelo de representação e interação do documento HTML<\/strong><\/a> ou XML. Esse modelo se estrutura em formato de árvore, com vários galhos que indicam diferentes elementos da página. Quando esse modelo é alterado através da linguagem de script, se altera a página da web — seja sua estrutura, estilo ou elementos. <\/p>Desse modo, o DOM possibilita a manipulação e modificação de elementos de um documento web ao conectar as linguagens de programação à página em questão. Ele é neutro em termos de linguagem, então pode ser executado com qualquer uma delas, ainda que seja mais popular utilizá-lo com o JavaScript<\/strong><\/a>.<\/p>Como toda página na web é um documento, os navegadores precisam fazer a leitura e a interpretação desses documentos para refletir seus conteúdos na tela do seu dispositivo num formato padrão. O DOM é a interface que representa a forma ou estrutura com que o documento será lido e exibido por todos os navegadores das redes.<\/p>
É assim que o DOM define um padrão na internet. Essa interface permite que programas e scripts de sites sejam acessados de forma dinâmica para fazer adições, remoções ou atualizações do conteúdo, estrutura e estilo de um documento. <\/p>
O DOM define a estrutura lógica dos documentos em forma de árvore, a qual guia o navegador na representação e manipulação dos componentes da página. Assim sendo, abaixo indicamos como a “árvore DOM” é normalmente estruturada:<\/p>![\"Estrutura](\"https:\/\/lh5.googleusercontent.com\/SQ3qz32VvBhTPFTeGtWOzPVhcv-mfB7C8mj6k4C1IVOttNGWf71T9s8Pq9QY4F_AlMbEKMwgnMGh5XEQf2v8-UU-G6xZc984pnSwfJvKF-CxSEOsBafgKCkkg6tCWgH6Ni9bb_N8\")
<\/figure>Qual a Relação Entre DOM e JavaScript?<\/strong><\/h2>Na maioria dos casos, a interface DOM está relacionada com JavaScript. Mas que relação é essa?<\/p>
Vale começar pelo fato de que o JavaScript é uma linguagem de programação, ou seja, ela é utilizada para criar o script do site. Já o DOM, como vimos, é um modelo de representação por objetos.<\/p>
Isto é, ele define a estrutura em que o documento construído através do JavaScript será lido pelo navegador. <\/p>
Sem o DOM, a linguagem de programação — que vale lembrar, pode ser qualquer uma, não apenas JavaScript — não teria um modelo para representar seus objetos. Afinal, ela não teria uma noção da página web e de seus componentes.<\/p>
Assim, enquanto o DOM representa e estrutura e os componentes da página, o JavaScript acessa e manipula esses conteúdos. <\/p>
Quais os Usos e Vantagens do DOM<\/strong><\/h2>Uma das principais vantagens do DOM é possibilitar a criação de aplicações que alteram os dados de um site sem que seja necessário fazer uma atualização desta página.<\/p>
Ainda é utilizado para criação de interfaces de usuário avançadas. Assim, o DOM também permite a construção de páginas que podem ser customizadas pelo próprio usuário. <\/p>
Com o modelo de documento por objeto, é possível modificar conteúdos e elementos de páginas, além de navegar por sua estrutura. Desse modo, qualquer componente de um documento HTML ou XML pode ser acessado e modificado através do DOM. E é mais fácil trabalhar com ele do que diretamente com os códigos HTML, por exemplo.<\/p>
O DOM oferece a funcionalidade de mover os itens de uma página de forma simples e rápida, como se estivesse “arrastando” eles, por isso facilita os processos de desenvolvimento dos programadores.<\/p>
Além de facilitar, ele também expande o universo de possibilidades inovadoras dos desenvolvedores web, que podem criar até mesmo efeitos CSS<\/strong><\/a> sem precisar recarregar a página. Como o DOM pode ser manipulado de diversas formas, seus usos são extensos e suas vantagens significativas. Basta usar e abusar da criatividade!<\/p>Como Usar o DOM<\/strong><\/h2>Não há necessidade de instalar um programa, ou realizar tarefas complexas para usar o DOM. Do lado dos navegadores, ele já vem incluído. E do lado do documento, ele é acessado diretamente através dos scripts (por exemplo, direto no JavaScript).<\/p>
Ou seja, quando você cria um script, já pode começar a usar a API<\/a><\/strong> DOM. Assim vai poder manipular o próprio documento e seus componentes, que serão refletidos como elementos da página web.<\/p>Quando precisar atualizar algum componente da página, pode fazer utilizando o DOM. Assim, você não terá a necessidade de trabalhar direto com os códigos HTML ou CSS, pois o modelo de documento por objetos armazena a interpretação deste código no formato de árvore.<\/p>
O desenvolvedor, portanto, pode movimentar e manipular os elementos de forma simples pelo documento, sem nem mesmo precisar atualizar ou recarregar a página.<\/p>
Tipos de Dados Fundamentais<\/strong><\/h2>Como já vimos, toda página da web pode ser representada em estrutura de árvore. O topo dessa árvore é estruturado pelo modelo de documento por objetos e terá o documento e elemento raiz HTML.<\/p>
A partir dele, se ramificam os “elementos-filhos”, como Head<\/strong> e Body<\/strong>. Estes, por sua vez, também podem ter elementos-filhos, e todos os elementos podem possuir atributos.<\/p>Agora vamos conferir alguns dos dados e objetos fundamentais do modelo de documento por objetos:<\/p>
\n- Document: <\/strong>é o objeto raiz, representa o próprio documento HTML. <\/li>\n\n\n\n
- Node: <\/strong>é um nó, e representa uma nomenclatura mesmo: todo objeto em um documento é algum tipo de nó.<\/li>\n\n\n\n
- Element: <\/strong>o nó do tipo elemento representa as tags<\/em> do documento HTML, isto é, o objeto de elemento pode ter “nós-filhos”, como de texto e de atributos. <\/li>\n\n\n\n
- Attribute: <\/strong>este tipo de objeto representa um atributo contido num elemento HTML.<\/li>\n\n\n\n
- Text: <\/strong>é o texto, ele fica localizado entre os elementos e representa o conteúdo das tags<\/em>, ou elementos. Por exemplo:
<p>aqui está um texto<\/p><\/code>.<\/li>\n<\/ul>Todos estes dados da árvore DOM podem ser adicionados, removidos ou alterados pelo JavaScript. O DOM conta com diversos métodos que podem ser utilizados para fazer a ligação entre esses objetos.<\/p>
Dois exemplos de métodos são o createElement()<\/code>, que cria um novo elemento HTML, e o setAttribute()<\/code>, utilizado para configurar novos atributos para os elementos HTML. <\/p>![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/public\")
<\/a><\/figure>Conclusão<\/strong><\/h2>O DOM cumpre o objetivo de padronizar a representação de um documento em uma página web. Ele faz isso oferecendo uma estrutura em árvore, que organiza os elementos. A forma com que faz essa representação de páginas permite que o documento, seu estilo e conteúdo, sejam facilmente manipulados pelas linguagens de programação. <\/p>
Os principais usos dessa interface de programação estão na criação de páginas inteligentes e de aplicações dinâmicas. E suas vantagens estão em não precisar atualizar e recarregar a página da web inteira para fazer alguma modificação em seu conteúdo ou estilo.<\/p>
Apesar de ser um tópico complexo, você não precisa entender todos os detalhes do processo de funcionamento do DOM para poder utilizá-lo e aproveitar seus benefícios. Lembrando que modelo independe da linguagem de programação utilizada. Escolha a sua e aproveite as possibilidades de inovação que o Modelo de Documento por Objetos oferece!<\/p>\n","protected":false},"excerpt":{"rendered":"
Você já se perguntou como um navegador representa uma página na web? Bem, um documento é criado pelos desenvolvedores, cheio de códigos e elementos. Mas como isso se reflete na página de um site que visitamos? A resposta é simples: através do DOM. Essa tecnologia já está integrada nos navegadores de internet, e é ela […]<\/p>\n
Desse modo, o DOM possibilita a manipulação e modificação de elementos de um documento web ao conectar as linguagens de programação à página em questão. Ele é neutro em termos de linguagem, então pode ser executado com qualquer uma delas, ainda que seja mais popular utilizá-lo com o JavaScript<\/strong><\/a>.<\/p> Como toda página na web é um documento, os navegadores precisam fazer a leitura e a interpretação desses documentos para refletir seus conteúdos na tela do seu dispositivo num formato padrão. O DOM é a interface que representa a forma ou estrutura com que o documento será lido e exibido por todos os navegadores das redes.<\/p> É assim que o DOM define um padrão na internet. Essa interface permite que programas e scripts de sites sejam acessados de forma dinâmica para fazer adições, remoções ou atualizações do conteúdo, estrutura e estilo de um documento. <\/p> O DOM define a estrutura lógica dos documentos em forma de árvore, a qual guia o navegador na representação e manipulação dos componentes da página. Assim sendo, abaixo indicamos como a “árvore DOM” é normalmente estruturada:<\/p> Na maioria dos casos, a interface DOM está relacionada com JavaScript. Mas que relação é essa?<\/p> Vale começar pelo fato de que o JavaScript é uma linguagem de programação, ou seja, ela é utilizada para criar o script do site. Já o DOM, como vimos, é um modelo de representação por objetos.<\/p> Isto é, ele define a estrutura em que o documento construído através do JavaScript será lido pelo navegador. <\/p> Sem o DOM, a linguagem de programação — que vale lembrar, pode ser qualquer uma, não apenas JavaScript — não teria um modelo para representar seus objetos. Afinal, ela não teria uma noção da página web e de seus componentes.<\/p> Assim, enquanto o DOM representa e estrutura e os componentes da página, o JavaScript acessa e manipula esses conteúdos. <\/p> Uma das principais vantagens do DOM é possibilitar a criação de aplicações que alteram os dados de um site sem que seja necessário fazer uma atualização desta página.<\/p> Ainda é utilizado para criação de interfaces de usuário avançadas. Assim, o DOM também permite a construção de páginas que podem ser customizadas pelo próprio usuário. <\/p> Com o modelo de documento por objeto, é possível modificar conteúdos e elementos de páginas, além de navegar por sua estrutura. Desse modo, qualquer componente de um documento HTML ou XML pode ser acessado e modificado através do DOM. E é mais fácil trabalhar com ele do que diretamente com os códigos HTML, por exemplo.<\/p> O DOM oferece a funcionalidade de mover os itens de uma página de forma simples e rápida, como se estivesse “arrastando” eles, por isso facilita os processos de desenvolvimento dos programadores.<\/p> Além de facilitar, ele também expande o universo de possibilidades inovadoras dos desenvolvedores web, que podem criar até mesmo efeitos CSS<\/strong><\/a> sem precisar recarregar a página. Como o DOM pode ser manipulado de diversas formas, seus usos são extensos e suas vantagens significativas. Basta usar e abusar da criatividade!<\/p> Não há necessidade de instalar um programa, ou realizar tarefas complexas para usar o DOM. Do lado dos navegadores, ele já vem incluído. E do lado do documento, ele é acessado diretamente através dos scripts (por exemplo, direto no JavaScript).<\/p> Ou seja, quando você cria um script, já pode começar a usar a API<\/a><\/strong> DOM. Assim vai poder manipular o próprio documento e seus componentes, que serão refletidos como elementos da página web.<\/p> Quando precisar atualizar algum componente da página, pode fazer utilizando o DOM. Assim, você não terá a necessidade de trabalhar direto com os códigos HTML ou CSS, pois o modelo de documento por objetos armazena a interpretação deste código no formato de árvore.<\/p> O desenvolvedor, portanto, pode movimentar e manipular os elementos de forma simples pelo documento, sem nem mesmo precisar atualizar ou recarregar a página.<\/p> Como já vimos, toda página da web pode ser representada em estrutura de árvore. O topo dessa árvore é estruturado pelo modelo de documento por objetos e terá o documento e elemento raiz HTML.<\/p> A partir dele, se ramificam os “elementos-filhos”, como Head<\/strong> e Body<\/strong>. Estes, por sua vez, também podem ter elementos-filhos, e todos os elementos podem possuir atributos.<\/p> Agora vamos conferir alguns dos dados e objetos fundamentais do modelo de documento por objetos:<\/p> Todos estes dados da árvore DOM podem ser adicionados, removidos ou alterados pelo JavaScript. O DOM conta com diversos métodos que podem ser utilizados para fazer a ligação entre esses objetos.<\/p> Dois exemplos de métodos são o O DOM cumpre o objetivo de padronizar a representação de um documento em uma página web. Ele faz isso oferecendo uma estrutura em árvore, que organiza os elementos. A forma com que faz essa representação de páginas permite que o documento, seu estilo e conteúdo, sejam facilmente manipulados pelas linguagens de programação. <\/p> Os principais usos dessa interface de programação estão na criação de páginas inteligentes e de aplicações dinâmicas. E suas vantagens estão em não precisar atualizar e recarregar a página da web inteira para fazer alguma modificação em seu conteúdo ou estilo.<\/p> Apesar de ser um tópico complexo, você não precisa entender todos os detalhes do processo de funcionamento do DOM para poder utilizá-lo e aproveitar seus benefícios. Lembrando que modelo independe da linguagem de programação utilizada. Escolha a sua e aproveite as possibilidades de inovação que o Modelo de Documento por Objetos oferece!<\/p>\n","protected":false},"excerpt":{"rendered":" Você já se perguntou como um navegador representa uma página na web? Bem, um documento é criado pelos desenvolvedores, cheio de códigos e elementos. Mas como isso se reflete na página de um site que visitamos? A resposta é simples: através do DOM. Essa tecnologia já está integrada nos navegadores de internet, e é ela […]<\/p>\nQual a Relação Entre DOM e JavaScript?<\/strong><\/h2>
Quais os Usos e Vantagens do DOM<\/strong><\/h2>
Como Usar o DOM<\/strong><\/h2>
Tipos de Dados Fundamentais<\/strong><\/h2>
\n
<p>aqui está um texto<\/p><\/code>.<\/li>\n<\/ul>createElement()<\/code>, que cria um novo elemento HTML, e o setAttribute()<\/code>, utilizado para configurar novos atributos para os elementos HTML. <\/p><\/a><\/figure>Conclusão<\/strong><\/h2>