17
JavaScript DOM Modelo de Objetos del Documento (Document Object Model) Ing. Jorge García Cárdenas Instructor ADSI, SENA CTM.
| Date post: | 12-Jun-2015 |
| Category: |
Software |
| Upload: | jorge-garcia-c |
| View: | 448 times |
| Download: | 3 times |
JavaScriptDOM
Modelo de Objetos del Documento
(Document Object Model)
Ing. Jorge García CárdenasInstructor ADSI, SENA CTM.
DOMModelo de Objetos del Documento
DOMTipos 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.
DOMTipos de Nodos. Ejemplo de representación.
DOMAcceso 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.
DOMAcceso directo a los Nodos
getElementById(), su sintaxis es:
‘id’ es el identificador del elemento a manipular.
Se usa así (no olvidar el punto de document):
getget ElementElement ByBy IdId (‘id’)(‘id’)
document.document. getget ElementElement ByBy IdId (‘abc’)(‘abc’)
DOMAcceso directo a los Nodos
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>
DOMAcceso directo a los Nodos
getElementsByName(), su sintaxis es:
‘name’ es el nombre del elemento a manipular.
Se usa así:
getget ElementElement ByBy NameName (‘name’)(‘name’)
document.document.
ss
getget ElementElement ByBy NameName (‘apellido’)(‘apellido’)ss
DOMAcceso directo a los Nodos
getElementsByName(), EJEMPLO: Mostrar un alert del número de elementos con un nombre específico.
<html><head><script type="text/javascript">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]
DOMAcceso directo a los Nodos
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>):
getget ElementElement ByBy TagNameTagName (‘tagname’)(‘tagname’)
document.document.
ss
getget ElementElement ByBy (‘div’)(‘div’)ss TagNameTagName
DOMAcceso directo a los Nodos
getElementsByTagName(), EJEMPLO: Mostrar un alert del número de elementos con una etiqueta específica.
<html><head><script type="text/javascript">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]
DOMCreación y Eliminación de Nodos
crear y eliminar "trozos" de la página web.
DOMCreación y Eliminación de Nodos
Eliminamos el Element<STRONG>
Eliminamos el Element<STRONG>
Creamos el Element<SELECT>
Creamos el Element<SELECT>
crear y eliminar "trozos" de la página web.
DOMCreación y Eliminación de Nodos
crear y eliminar "trozos" de la página web.
1. createElement(etiqueta)
2. createTextNode(contenido)
3. nodoPadre.appendChild(nodoHijo)
4. removeChild(parrafo)
DOMCreación y Eliminación de Nodos
createElement(etiqueta)
var parrafo = document.createElement("p");
var lista = document.createElement("select");
var imagen = document.createElement("img");
var tabla = document.createElement("table");
DOMCreación y Eliminación de Nodos
Ejemplo:
// Crear nodo de tipo Elementvar parrafo = document.createElement("p");
// Crear nodo de tipo Textvar contenido = document.createTextNode("Hola Mundo!");
// Añadir el nodo Text como hijo del nodo Elementparrafo.appendChild(contenido);
// Añadir el nodo Element como hijo de la paginadocument.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
