JavaScript DOM: Acceso y manipulación de nodos

JavaScript
DOM
Modelo de Objetos del Documento
(Document Object Model)
Ing. Jorge García Cárdenas
Instructor ADSI, SENA CTM.

DOM
Modelo de Objetos del Documento

DOM
Tipos de Nodos
La especificación completa de DOM define 12 tipos de nodos, pero los más
comunes a usar en las páginas XHTML son:
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.

DOM
Tipos de Nodos. Ejemplo de representación.

DOM
Acceso directo a los Nodos
JavaScript permite acceder a cada uno de los elementos de una
página utilizando tan solo algunos métodos y propiedades, los
métodos son:
getElementById(), accede al primer elemento con un id
específico.
getElementsByName(), accede todos los elementos con un
nombre (name) específico.
getElementsByTagName(), accede todos los elementos con un
tagname (etiqueta HTML) específico.

DOM
getElementById(), su sintaxis es:
ggeett EElleemmeenntt BByy IIdd ((‘‘iidd’’))
‘id’ es el identificador del elemento a manipular.
Se usa así (no olvidar el punto de document):
ddooccuummeenntt.. ggeett EElleemmeenntt BByy IIdd ((‘‘aabbcc’’))

DOM
getElementById(), EJEMPLO: Mostrar un alert del código html (valor)
de un elemento con un ‘id’ específico.
<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í:
ggeett EElelemmeenntt BByy NNaammee ((‘‘nnaammee’’))
ddooccuummeenntt..
ss
ggeett EElelemmeenntt ss BByy NNaammee ((‘‘aappeelllildidoo’’))

DOM
getElementsByName(), EJEMPLO: Mostrar un alert del número de
elementos con un nombre específico.
<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:
ggeett EElelemmeenntt BByy TTaaggNNaammee ((‘‘ttaaggnnaammee’’))
‘tagname’ es el nombre de la etiqueta HTML del
elemento a manipular sin los simbolos <>.
Se usa así (ejemplo, la etiqueta <div>):
ddooccuummeenntt..
ss
ggeett EElelemmeenntt ss BByy TTaaggNNaammee ((‘‘ddiviv’’))

DOM
getElementsByTagName(), EJEMPLO: Mostrar un alert del número de
elementos con una etiqueta específica.
<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
Creación y Eliminación de Nodos
crear y eliminar "trozos" de la página web.

DOM
Eliminamos el Element
Eliminamos el Element
<STRONG>
<STRONG>
Creamos el
Element
<SELECT>
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!");
// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);
// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);

Gracias..!
Esta es la primera versión de este documento, lo que sigue es
eventos…
http://www.maestrosdelweb.com/editorial/dom/
Libro Introducción a JavaScript (http://librosweb.es)
http://www.w3schools.com

JavaScript DOM: Acceso y manipulación de nodos

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a JavaScript DOM: Acceso y manipulación de nodos

Similar a JavaScript DOM: Acceso y manipulación de nodos (20)

JavaScript DOM: Acceso y manipulación de nodos