Trabajando Con DOM

Trabajando con DOM
Qué es?
El modelo de objeto de documento (DOM) es una interfaz de programación para los documentos HTML
y XML. Facilita una representación estructurada del documento con el fin de modificar, tanto su
estructura, estilo y contenido.
El DOM transforma el documento en un grupo de nodos y objetos estructurados que tienen

propiedades y métodos. Esencialmente, conecta las páginas web a scripts o lenguajes de programación.
DOM transforma todos los documentos HTML en un conjunto de elementos llamados nodos, que están
interconectados y que representan los contenidos de las páginas web y las relaciones entre ellos.
La unión de todos los nodos se llama "árbol de nodos".
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página sencilla</title>
</head>
<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>
DOM proporciona dos métodos alternativos para acceder a un nodo específico: acceso a
través de sus nodos padre y acceso directo.
Las funciones que proporciona DOM para acceder a un nodo a través de sus nodos padre
consisten en acceder al nodo raíz de la página y después a sus nodos hijos y a los nodos
hijos de esos hijos y así sucesivamente hasta el último nodo de la rama terminada por el
nodo buscado.
Sin embargo, cuando se quiere acceder a un nodo específico, es mucho más rápido acceder
directamente a ese nodo y no llegar a él descendiendo a través de todos sus nodos padre.
Es decir,
A partir de ese nodo raíz, cada etiqueta HTML se transforma en un nodo de tipo "Elemento".
La conversión de etiquetas en nodos se realiza de forma jerárquica. Del nodo raíz solamente
pueden derivar los nodos HEAD y BODY. A partir de esta derivación inicial, cada etiqueta
HTML se transforma en un nodo que deriva del nodo correspondiente a su "etiqueta padre".
¿Qué es el DOM de HTML?

El DOM de HTML es un modelo de objeto estándar y una interfaz de programación para
HTML.
Se define:
Los elementos HTML como objetos.
Las propiedades de todos los elementos HTML.
Los métodos para acceder a todos los elementos HTML.
Los eventos para todos los elementos HTML.
En otras palabras: el DOM de HTML es un estándar sobre cómo obtener, cambiar, agregar o
eliminar elementos HTML.
En el DOM, todos los elementos HTML se definen como objetos.

La interfaz de programación son las propiedades y métodos de cada objeto.
Una propiedad es un valor que puede obtener o establecer (como cambiar el contenido de
un elemento HTML).
Un método es una acción que puede hacer (como agregar o eliminar un elemento HTML).
Tipos de nodos
La especificación completa de DOM define 12 tipos de nodos, aunque las páginas

XHTML habituales se pueden manipular manejando solamente cuatro o cinco tipos de
nodos. Aquí están los 5 más comunes:
 Document, nodo raíz del que derivan todos los demás nodos del árbol.
 Element, representa cada una de las etiquetas XHTML. Se trata del único nodo que
puede contener atributos y el único del que pueden derivar otros nodos.
 Attr, se define un nodo de este tipo para representar cada uno de los atributos de las
etiquetas XHTML, es decir, uno por cada par atributo=valor.
 Text, nodo que contiene el texto encerrado por una etiqueta XHTML.
 Comment, representa los comentarios incluidos en la página XHTML.
Acceso a nodos del árbol DOM
Una vez construido el árbol, ya es posible manipular de forma sencilla la página:

acceder al valor de un elemento, establecer el valor de un elemento, mover un
elemento de la página, crear y añadir nuevos elementos, etc.
getElementsByTagName()
Obtiene todos los elementos de la página HTML cuya etiqueta sea igual que el
parámetro que se le pasa a la función, por ejemplo:
var parrafos = document.getElementsByTagName("p");
getElementsByTagName devuelve un arreglo con todos los los nodos que cumplen
con el parámetro indicado.
Así, el primer párrafo de la página de la siguiente manera:

var parrafos = document.getElementsByTagName("p");
var primerParrafo = parrafos[0];
var enlaces = primerParrafo.getElementsByTagName("a");

Podemos obtener los nodos de cualquier tipo de etiqueta: div, span, p, label, input, h1, h2,
etc.
Para poder entender mejor vamos a digitar el siguiente Código:

Este será el resultado:
Al hacer clic en cualquier parte del formulario se genera la acción porque se está
usando
<Form onclick="cambiarAspecto('label')">
Mejor si ponemos la acción en el Botón Cancelar y cambiamos el nombre del botón por “Probar” así:
<input type="reset" value="Probar" onclick="cambiarAspecto('label')">
getElementById()
Esta es la función más utilizada cuando se desarrollan aplicaciones web dinámicas ya que permite
acceder directamente a un nodo y poder leer o modificar sus propiedades.
La función getElementById() devuelve el elemento HTML cuyo atributo id coincide con el parámetro
indicado en la función. Como el atributo id debe ser único en toda la página, la función devuelve
únicamente el nodo deseado.
var cabecera = document.getElementById("cabecera");

<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
Ejemplo:
El resultado debe ser:
Al hacer clic en validar, se hace la llamada a la fución y dependiendo si está vacío o no se muestran los
mensajes en un alert.

Trabajando Con DOM

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Trabajando Con DOM

Cargado por

Copyright:

Formatos disponibles

Trabajando con DOM

El DOM transforma el documento en un grupo de nodos y objetos estructurados que tienen

La unión de todos los nodos se llama "árbol de nodos".

¿Qué es el DOM de HTML?

En el DOM, todos los elementos HTML se definen como objetos.

La especificación completa de DOM define 12 tipos de nodos, aunque las páginas

Acceso a nodos del árbol DOM

Una vez construido el árbol, ya es posible manipular de forma sencilla la página:

var parrafos = document.getElementsByTagName("p");

Así, el primer párrafo de la página de la siguiente manera:

var primerParrafo = parrafos[0];

var enlaces = primerParrafo.getElementsByTagName("a");

Para poder entender mejor vamos a digitar el siguiente Código:

<input type="reset" value="Probar" onclick="cambiarAspecto('label')">

var cabecera = document.getElementById("cabecera");

También podría gustarte