Dom PDF

DOM
(Document Object Model)

El Modelo de Objetos de Documento o DOM, es la interfaz que te
permite acceder y manipular, mediante la programacin, los contenidos
de una pgina web (o documento).
Proporciona una representacin estructurada, orientada a objetos, de
los elementos individuales y el contenido de una pgina, con mtodos
para recuperar y fijar las propiedades de dichos objetos.
Adems, proporciona mtodos para agregar y eliminar dichos objetos,
permitindote crear contenido dinmico.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pgina sencilla</title>
</head>

<body>

<p>Esta pgina es <strong>muy sencilla</strong></p>

</body>
</html>

Antes de poder utilizar las funciones de DOM, los navegadores convierten
automticamente la pgina HTML anterior en la siguiente estructura de rbol
de nodos:
<table>
<tbody>
<tr>
<td>Pais</td>
<td>Departamento</td>
</ tr >
< tr >
<td>Provincia</td>
<td>Distrito</td>
</ tr >
</tbody>
</table>
El DOM que representa esta tabla es de este modo:
JavaScript y la manipulacin del DOM
Acceder
getElementById()
getElementsByTagName()
getElementsByName()
Crear
createElement()
createTextNode
innerHTML
Eliminar removeChild
Leer y Escribir Atributos
getAttribute()
setAttribute()
JAVASCRIPT Y MANIPULACION DEL DOM
El Modelo de Objetos del Documento (DOM) permite ver el mismo
documento de otra manera, describiendo el contenido del documento
como un conjunto de objetos que un programa Javascript puede actuar
sobre ellos.
ACCEDIENDO A LOS ELEMENTOS
Javascript permite acceder a cada uno de los elementos de una pgina
utilizando tan slo algunos mtodos y propiedades.
getElementById
Para encontrar de manera rpida y fcil un elemento se tiene el mtodo
getElementById.
El mismo permite un acceso inmediato a cualquier elemento tan slo
conociendo el valor de su atributo id.
Ejemplo:
<p>
<a id=contacto href=contactos.html>Contctenos</a>
</p>

Puede usarse el atributo id del elemento a para acceder al mismo:
var elementoContacto = document.getElementById(contacto);

Ahora el valor de la variable elementoContacto est referida al
elemento [a] y cualquier operacin sobre la misma afectar el
hiperenlace.
El mtodo getElementById es adecuado para operar sobre un elemento
en especfico.
getElementsByTagName
Este retorna todos los elementos de un mismo tipo. Asumiendo la
siguiente lista desordenada:
<ul>
<li><a href=editorial.html>Editorial</a></li>
<li><a href=semblanza.html>Autores</a></li>
<li><a href=noticias.html>Noticias</a></li>
<li><a href=contactos.html>Contctenos</a></li>
</ul>
Puede obtenerse todos los hipervnculos de la siguiente manera:
var hipervinculos= document.getElementsByTagName(a);

El valor de la variable hipervinculos es una coleccin de elementos
[a]. Las colecciones son arreglos pudindose acceder a cada
elemento a travs de la ya conocida notacin con corchetes.
USANDO INNERHTML
En aplicaciones complejas donde es necesario crear varios elementos a
la vez, el cdigo JavaScript generado puede ser extenso recurrindose a
la propiedad innerHTML.

Por ejemplo, puede crearse fcilmente una tabla con mltiples celdas e
insertarla luego en la pgina con innerHTML:

var tabla = <table border=0>;
tabla += <tr><td>Celda 1</td><td>Celda 2</td><td> Celda
3</td></tr>;
tabla += </table>;

document.getElementById(datos).innerHTML = tabla;
ELIMINANDO UN ELEMENTO O NODO DE TEXTO
Se pueden eliminar nodos existentes y nuevos. El mtodo removeChild
permite eliminar nodos hijos a cualquier nodo con tan slo pasarle las
referencias del nodo hijo [a] eliminar y su correspondiente padre. Para
mejor compresin retmese el ejemplo anterior:

<p id=mwEnlaces>
<a id=editor href=editorial.html>Editorial</a>
</p>

El mtodo removeChild ser usado para eliminar el hipervnculo del
elemento padre prrafo:

var ancla = document.getElementById(editor);
var padre = ancla.parentNode;
var hijoRemovido = padre.removeChild(ancla);
Existen varios elementos en un documento HTML que pueden ser
accedidos de otras maneras.
El elemento body de un documento puede accederse a travs de la
forma document.body.
El conjunto de todos los formularios en un documento puede
encontrase en document.forms.
El conjunto de todas las imgenes sera mediante document.images.

Actualmente la mayora de los navegadores soportan estos mtodos
an as es recomendable el uso del mtodo
getElementsByTagName.

Ejemplo para acceder al elemento body:

var body = document.getElementsByTagName(body)*0+;
CREANDO ELEMENTOS Y TEXTOS
La creacin de nodos es posible mediante el uso de dos mtodos
disponibles en el objeto document. Dichos mtodos son:

createElement(Tipo cadena): Crea un nuevo elemento del tipo
especificado y devuelve un referencia a dicho elemento.

createTextNode(Cadena de texto): Crea un nuevo nodo de texto con
el contenido especificado en la cadena de texto.

El siguiente ejemplo muestra cmo se crea un nuevo elemento de
prrafo vaco:
var nuevoEnlace = document.createElement(a);

var nodoTexto = document.createTextNode(cajamarca);
La variable nuevoEnlace ahora referencia un nuevo enlace listo para
ser insertado en el documento. El texto que va dentro del elemento
[a] es un nodo de texto hijo, por lo que debe ser creado por
separado.

Dom PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Dom PDF

Încărcat de

Drepturi de autor:

Formate disponibile

DOM

(Document Object Model)

S-ar putea să vă placă și