44 lines
1.3 KiB
Markdown
44 lines
1.3 KiB
Markdown
|
---
|
||
|
|
title: HTML Dom
|
||
|
|
localeTitle: HTML Dom
|
||
|
|
---
|
||
|
|
## HTML Dom
|
||
|
|
|
||
|
|
Con el DOM de HTML, JavaScript puede acceder y cambiar todos los elementos de un documento HTML.
|
||
|
|
|
||
|
|
Cuando se carga una página web, el navegador crea una **DOCUMENTO** **O** bject **M** odelo de la página.
|
||
|
|
|
||
|
|
El modelo HTML DOM se construye como un árbol de Objetos:
|
||
|
|
|
||
|
|
Cada elemento en el DOM también se llama un nodo.
|
||
|
|
|
||
|
|
```html
|
||
|
|
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title> My title </title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<a href="#">My Link</a>
|
||
|
|
<h1> My header </h1>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
El DOM para el HTML anterior es el siguiente:
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
Con el modelo de objetos, JavaScript obtiene todo el poder que necesita para crear HTML dinámico:
|
||
|
|
|
||
|
|
* JavaScript puede cambiar todos los elementos HTML en la página
|
||
|
|
* JavaScript puede cambiar todos los atributos HTML en la página
|
||
|
|
* JavaScript puede cambiar todos los estilos CSS en la página
|
||
|
|
* JavaScript puede eliminar elementos y atributos HTML existentes
|
||
|
|
* JavaScript puede agregar nuevos elementos y atributos HTML
|
||
|
|
* JavaScript puede reaccionar a todos los eventos HTML existentes en la página
|
||
|
|
* JavaScript puede crear nuevos eventos HTML en la página
|
||
|
|
|
||
|
|
#### Más información:
|
||
|
|
|
||
|
|
[W3C - HTML DOM](https://www.w3schools.com/js/js_htmldom.asp)
|