DOM JavaScript

JavaScript
DOM
Modelo de Objetos del Documento
(Document Object Model)
Ing. Jorge Garca Crdenas
Instructor ADSI, SENA CTM.
DOM
Modelo de Objetos del Documento
DOM
Tipos de Nodos
La especificacin completa de DOM define 12 tipos de nodos, pero los ms
comunes a usar en las pginas XHTML son:

Document, nodo raz del que derivan todos los dems 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 pgina XHTML.

DOM
Tipos de Nodos. Ejemplo de representacin.
DOM
Acceso directo a los Nodos
JavaScript permite acceder a cada uno de los elementos de una
pgina utilizando tan solo algunos mtodos y propiedades, los
mtodos son:

getElementById(), accede al primer elemento con un id
especfico.

getElementsByName(), accede todos los elementos con un
nombre (name) especfico.

getElementsByTagName(), accede todos los elementos con un
tagname (etiqueta HTML) especfico.
DOM
getElementById(), su sintaxis es:

id es el identificador del elemento a manipular.

Se usa as (no olvidar el punto de document):

get Element By Id (id)
document. get Element By Id (abc)
DOM
getElementById(), EJEMPLO: Mostrar un alert del cdigo html (valor)
de un elemento con un id especfico.
<html>
<head>
<script type="text/javascript">
function obtenerValor()
{
var x=document.getElementById("el_encabezado");
alert(x.innerHTML);
}
</script>
</head>
<body>

<h1 id="el_encabezado" onclick="obtenerValor()">Click aqu!</h1>

</body>
</html>
DOM
getElementsByName(), su sintaxis es:

name es el nombre del elemento a manipular.

Se usa as:

get Element By Name (name)
document.
s
get Element By Name (apellido) s
DOM
getElementsByName(), EJEMPLO: Mostrar un alert del nmero de
elementos con un nombre especfico.
<html>
<head>
function obtenerElementos()
{
var x=document.getElementsByName(z");
alert(x.length);
}
</script>
</head>
<body>
<input name=z " type="text" size="20" /><br />
<input name=z" type="text" size="20" /><br />
<input name=z" type="text" size="20" /><br /><br />
<input type="button" onclick="obtenerElementos()" value=Cuantos
elementos se llaman 'x'?" />
La variable x, se
convierte en un
array.

x[0]
x[1]
x[2]
DOM
getElementsByTagName(), su sintaxis es:

tagname es el nombre de la etiqueta HTML del
elemento a manipular sin los simbolos <>.
Se usa as (ejemplo, la etiqueta <div>):

get Element By TagName (tagname)
document.
s
get Element By (div) s TagName
DOM
getElementsByTagName(), EJEMPLO: Mostrar un alert del nmero de
elementos con una etiqueta especfica.
<html>
<head>
function obtenerElementos()
{
var x=document.getElementsByTagName("input");
alert(x.length);
}
</script>
</head>
<body>
<input type="text" size="20 name= " nombre" /><br />
<input type="text" size="20" name= " apellido" /><br />
<input type="text" size="20" name= " telefono" /><br /><br />
<input type="button" onclick="obtenerElementos()" value=Cuantos
elementos se llaman 'x'?" />
La variable x, se
convierte en un
array.
x[0]
x[1]
x[2]
x[3]
DOM
Creacin y Eliminacin de Nodos
crear y eliminar "trozos" de la pgina web.
DOM
Eliminamos el Element
<STRONG>
Creamos el
Element
<SELECT>
DOM
1. createElement(etiqueta)

2. createTextNode(contenido)

3. nodoPadre.appendChild(nodoHijo)

4. removeChild(parrafo)
DOM
createElement(etiqueta)
var parrafo = document.createElement("p");

var lista = document.createElement("select");

var imagen = document.createElement("img");

var tabla = document.createElement("table");

DOM
Ejemplo:
// Crear nodo de tipo Element
var parrafo = document.createElement("p");

// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");

// Aadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);

// Aadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
Gracias..!
Esta es la primera versin de este documento, lo que sigue es
eventos
http://www.maestrosdelweb.com/editorial/dom/
Libro Introduccin a JavaScript (http://librosweb.es)
http://www.w3schools.com

DOM JavaScript

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

DOM JavaScript

Hochgeladen von

Copyright:

Verfügbare Formate

JavaScript

Das könnte Ihnen auch gefallen