1.1 Principais conceitos de DOM
Document Object Model (DOM) é uma interface de programação para documentos web. Ela representa a estrutura do documento como uma árvore de nós, onde cada nó é uma parte do documento, como um elemento, texto, comentário e assim por diante. Entender o DOM e seus nós é um aspecto fundamental no trabalho com tecnologias web.
Principais conceitos de DOM
O que é o DOM?
DOM (Document Object Model) representa uma estrutura hierárquica que descreve o conteúdo de um documento HTML. Ele permite que programas e scripts acessem dinamicamente o conteúdo do documento e modifiquem sua estrutura, estilo e conteúdo.
Nós e elementos
No contexto do DOM, todas as partes do documento são vistas como nós (node). Existem vários tipos de nós:
- Nós de elemento: representam as tags HTML.
- Nós de texto: representam o texto dentro dos nós de elemento.
- Nós de comentários: representam comentários no HTML.
- Nós de documento: representam o próprio documento.
Árvore de nós
O DOM é uma estrutura em árvore, onde cada nó pode ter descendentes (nós filhos). O nó raiz é o objeto document, que representa todo o documento HTML.
Exemplo de estrutura DOM:
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Para este documento, a árvore DOM ficará assim:
document
└── html
├── head
│ └── title
│ └── #text: "Document Title"
└── body
├── h1
│ └── #text: "Hello, World!"
└── p
└── #text: "This is a paragraph."
1.2 Tipos de nós
1. Nós de elemento
Nós de elemento correspondem às tags HTML. Por exemplo, o nó para a tag <body> é chamado de nó de elemento.
Exemplo:
Neste exemplo, <body> e <h1> são nós de elemento.
<body>
<h1>Hello, World!</h1>
</body>
2. Nós de texto
Nós de texto contêm o texto dentro dos nós de elemento. Nós de texto são descendentes dos nós de elemento e contêm dados em forma de string.
Exemplo:
Neste exemplo, o texto "Hello, World!" é um nó de texto, descendente do nó <h1>.
<h1>Hello, World!</h1>
3. Nós de comentários
Nós de comentários representam comentários no HTML, começando com <!-- e terminando com -->.
Exemplo:
Neste exemplo, <!-- This is a comment --> é um nó de comentário.
<!-- This is a comment -->
<p>This is a paragraph.</p>
4. Nós de documento
O nó de documento é a raiz da árvore DOM e é o nó pai de todos os outros nós no documento.
Exemplo:
O objeto document no JavaScript representa o nó de documento:
console.log(document);
1.3 Interação com nós DOM
1. Obtendo informações sobre os nós
As propriedades do objeto nó permitem obter informações sobre um nó específico. Por exemplo, é possível saber o tipo de nó, seu nome e conteúdo.
Exemplo:
<html>
<head>
<title>Meu site</title>
</head>
<body>
<h1>Olá, mundo!</h1>
</body>
</html>
const heading = document.querySelector('h1');
console.log(heading.nodeName); // Vai mostrar: H1
console.log(heading.nodeType); // Vai mostrar: 1 (Nó de elemento)
console.log(heading.textContent); // Vai mostrar: "Olá, mundo!"
2. Alterando o conteúdo dos nós
O conteúdo dos nós pode ser alterado usando as propriedades e métodos do DOM.
Exemplo:
const paragraph = document.querySelector('p');
paragraph.textContent = 'Updated text content';
3. Trabalhando com nós filhos
Cada nó DOM pode ter nós filhos, que podem ser acessados e modificados.
Exemplo:
<html>
<head>
<title>Meu site</title>
</head>
<body>
<ul>
<li>Sobre nós</li>
<li>Carreira</li>
<li>Contatos</li>
</ul>
</body>
</html>
const list = document.querySelector('ul');
const firstItem = list.firstElementChild;
const lastItem = list.lastElementChild;
console.log(firstItem.textContent); // Vai mostrar o texto do primeiro elemento da lista
console.log(lastItem.textContent); // Vai mostrar o texto do último elemento da lista
1.4 Propriedades úteis
1. Propriedades nodeName e nodeType
nodeNameretorna o nome do nónodeTyperetorna o tipo de nó (por exemplo, 1 para nós de elemento, 3 para nós de texto)
Exemplo:
<html>
<head>
<title>Meu site</title>
</head>
<body>
<h1>Olá, mundo!</h1>
</body>
</html>
const element = document.querySelector('h1');
console.log(element.nodeName); // Vai mostrar: H1
console.log(element.nodeType); // Vai mostrar: 1
2. Propriedades textContent e innerHTML
textContentretorna ou define o conteúdo de texto do nóinnerHTMLretorna ou define o conteúdo HTML do nó
Exemplo:
<html>
<head>
<title>Meu site</title>
</head>
<body>
<p>Realmente <b>interessante</b> e <b>útil</b> parágrafo!</p>
</body>
</html>
const element = document.querySelector('p');
console.log(element.textContent); // Vai mostrar o conteúdo de texto do parágrafo
console.log(element.innerHTML); // Vai mostrar o conteúdo HTML do parágrafo
3. Propriedades parentNode, childNodes, firstChild e lastChild
parentNoderetorna o nó paichildNodesretorna uma coleção de todos os nós filhosfirstChildretorna o primeiro nó filholastChildretorna o último nó filho
Exemplo:
<html>
<head>
<title>Meu site</title>
</head>
<body>
<ul>
<li>Sobre nós</li>
<li>Carreira</li>
<li>Contatos</li>
</ul>
</body>
</html>
const element = document.querySelector('ul');
console.log(element.parentNode); // Vai mostrar o nó pai
console.log(element.childNodes); // Vai mostrar a coleção de nós filhos
console.log(element.firstChild); // Vai mostrar o primeiro nó filho
console.log(element.lastChild); // Vai mostrar o último nó filho
GO TO FULL VERSION