DOM

O Document Object Model (DOM) é uma estrutura em árvore que representa os elementos de uma página HTML, onde 'document' é a raiz. Para acessar e manipular elementos, métodos como getElementById e querySelector são utilizados, sendo este último mais recomendado atualmente. O DOM permite interações com o conteúdo da página, como modificar texto ou HTML dos elementos.

Enviado por

laelmarques046

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato TXT, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

3 visualizações2 páginas

DOM

Enviado por

laelmarques046

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato TXT, PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 2

Document Object Model

( Modelo de Objeto para Documento)

- É um conjunto de objetos dentro do navegador que dá acesso aos componentes

internos do seu website.

A árvore DOM começa pela raíz (window), a janela do website.

Nesta árvore, existem Mães e Filhos e Irmãos.

Ex: window é Mãe de location, document e history. Logo, estes que foram mencionados
são os Filhos de window.
Seguindo esse ramo, veremos que document é Mãe de html, e assim por diante.
Além de que, dois elementos que compartilham a mesma Mãe são irmãos.

######
Para pegar algum elemento usa-se:
getElementBy

Depois de By utilize a identificação:

* Id: Seleciona um único elemento pelo seu id.
* ClassName: Seleciona múltiplos elementos por sua(s) classe(s) CSS.
* TagName: Seleciona múltiplos elementos pelo seu nome de tag HTML.

#[Esses métodos não são mais tão utilizados atualmente, hoje em dia, e recomendado
usar o querySelector

######
# querySelector

Como funciona:
* Recebe um seletor CSS: O método querySelector() aceita como argumento uma string
que representa um seletor CSS válido. Esse seletor pode ser:
* Nome de tag: "p" (seleciona o primeiro parágrafo)
* Classe: ".minha-classe" (seleciona o primeiro elemento com a classe "minha-
classe")
* ID: "#meu-id" (seleciona o primeiro elemento com o ID "meu-id")
* Atributo: "[data-valor='exemplo']" (seleciona o primeiro elemento com o
atributo data-valor igual a "exemplo")
* Seletores combinados: "div.container > p.destaque" (seleciona o primeiro
parágrafo com a classe "destaque" que é filho direto de uma div com a classe
"container")
* Qualquer outro seletor CSS válido.
* Busca no DOM: O navegador percorre a estrutura do Document Object Model (DOM) do
documento HTML, começando pelo elemento no qual o método querySelector() foi
chamado (geralmente document, para buscar em todo o documento).
* Retorna o primeiro elemento correspondente: Assim que o navegador encontra o
primeiro elemento que corresponde ao seletor CSS fornecido, ele retorna esse
elemento como um objeto JavaScript.
* Retorna null se não encontrar: Se nenhum elemento no DOM corresponder ao seletor
CSS especificado, o método querySelector() retorna o valor null.
Sintaxe:
const primeiroElemento = document.querySelector("seletor CSS");
Existe, também:
querySelectorAll()
#######

- textContent: Lida puramente com texto. Se você atribuir HTML a ele, será tratado
como uma string literal e exibido exatamente como foi escrito (incluindo as tags <
e >). Ao ler, ele retorna a concatenação de todo o texto dentro do elemento e seus
filhos.

- innerHTML: Lida com HTML. Ao atribuir uma string, ela é interpretada como código
HTML e renderizada no elemento. Ao ler, ele retorna uma string representando o
código HTML interno do elemento.

----

# Analogia:
Pense em uma casa (o document). Dentro da casa, existem cômodos (os elementos
HTML). Um dos cômodos é a sala de estar (um elemento <div>, por exemplo). A sala de
estar tem características (o objeto style da div), como a cor da parede (color
dentro do style). Para mudar a cor da parede, você precisa primeiro ir até a sala
de estar (selecionar o elemento div) e então mudar a cor (acessar e modificar a
propriedade color do objeto style dessa div).

# Em resumo:
* O DOM é a representação em árvore da sua página HTML.
* document é a raiz dessa árvore.
* Para manipular um elemento, você primeiro o seleciona usando métodos como
getElementById ou querySelector.

DOM

Enviado por

DOM

Enviado por

Document Object Model

( Modelo de Objeto para Documento)

- É um conjunto de objetos dentro do navegador que dá acesso aos componentes

A árvore DOM começa pela raíz (window), a janela do website.

Nesta árvore, existem Mães e Filhos e Irmãos.

Depois de By utilize a identificação:

Você também pode gostar

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.