44 lines
1.2 KiB
Markdown
44 lines
1.2 KiB
Markdown
---
|
|
title: HTML Dom
|
|
localeTitle: HTML Dom
|
|
---
|
|
## HTML Dom
|
|
|
|
Com o HTML DOM, o JavaScript pode acessar e alterar todos os elementos de um documento HTML.
|
|
|
|
Quando uma página da web é carregado, o navegador cria um **D** ocument **O** bject **M** odelo da página.
|
|
|
|
O modelo HTML DOM é construído como uma árvore de objetos:
|
|
|
|
Cada elemento no DOM também é chamado de nó.
|
|
|
|
```html
|
|
|
|
<html>
|
|
<head>
|
|
<title> My title </title>
|
|
</head>
|
|
<body>
|
|
<a href="#">My Link</a>
|
|
<h1> My header </h1>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
O DOM do HTML acima é o seguinte:
|
|
|
|
|
|
|
|
Com o modelo de objeto, o JavaScript obtém todo o poder necessário para criar HTML dinâmico:
|
|
|
|
* JavaScript pode mudar todos os elementos HTML da página
|
|
* JavaScript pode alterar todos os atributos HTML na página
|
|
* JavaScript pode mudar todos os estilos CSS na página
|
|
* JavaScript pode remover elementos e atributos HTML existentes
|
|
* JavaScript pode adicionar novos elementos e atributos HTML
|
|
* JavaScript pode reagir a todos os eventos HTML existentes na página
|
|
* JavaScript pode criar novos eventos HTML na página
|
|
|
|
#### Mais Informações:
|
|
|
|
[W3C - DOM HTML](https://www.w3schools.com/js/js_htmldom.asp) |