English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial básico de JavaScript

Objetos de JavaScript

Funciones de JavaScript

JS HTML DOM

BOM del navegador JS

Tutorial básico de AJAX

Manual de referencia de JavaScript

JS HTML DOM (Modelo de Objetos de Documento)

Modelo de objeto de documentoque generalmente se conoce comoDOMes una parte importante para que el sitio web sea interactivo.

Modelo de objeto de documentoRepresenta el documento HTML que se muestra en una ventana.

Es una interfaz que permite a JavaScript manejar el contenido, la estructura y el estilo del sitio web.

HTML DOM (Modelo de objeto de documento)

Después de cargar la página web, el navegador creará elModelo de objeto de documento.

HTML DOMÁrbol construido por el modeloobjetos.

El siguiente ejemplo explica lo que es DOM:

  <html>
  <head>
  <title>Ejemplo</title>
  </head>  
  <h1>Página de ejemplo</h1>
  <p>Esta es una página de ejemplo</p>
  </html>

La representación DOM del código anterior es la siguiente:

HTML DOM es el estándar de HTMLobjetosyInterfaz de programación. Define:

  • Los elementos HTML comoobjetos

  • de todos los elementos HTMLpropiedades

  • acceso a todos los elementos HTMLmétodos

  • de todos los elementos HTMLEventos

En otras palabras:HTML DOM es el estándar para obtener, cambiar, agregar o eliminar elementos HTML.

DOM y JavaScript

A través del modelo de objetos, JavaScript obtuvo todas las funciones necesarias 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 responder a todos los eventos HTML existentes en la página

  • JavaScript puede crear nuevos eventos HTML en la página

Qué aprenderá

En el siguiente capítulo de este tutorial, aprenderá:

  • Cómo encontrar un elemento HTML

  • Cómo cambiar el contenido de un elemento HTML

  • Cómo agregar y eliminar elementos HTML

  • Cómo cambiar el estilo (CSS) de un elemento HTML

  • Cómo agregar y eliminar atributos HTML

  • Cómo navegar el árbol DOM