DOM HTML Javascript

13.875 visualizaciones

Publicado el

Presentación del DOM (Document Object Model) de documentos HTML con Javascript. Resumen de las características más importantes y ejemplos sencillos de como utilizarlas. A través del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML

Publicado en: Tecnología
0 comentarios
7 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
13.875
En SlideShare
0
De insertados
0
Número de insertados
327
Acciones
Compartido
0
Descargas
0
Comentarios
0
Recomendaciones
7
Insertados 0
No insertados

No hay notas en la diapositiva.

DOM HTML Javascript

  1. 1. DOM <ul><li>Profesor: Efraín Herrera jiménez
  2. 2. Email: efrainh@gmail.com
  3. 3. Fuente: http://www.librosweb.es/ajax/capitulo4.html </li></ul>
  4. 4. DOM <ul><li>DOM o Document Object Model es un conjunto de utilidades específicamente diseñadas para manipular documentos XML.
  5. 5. Por extensión, DOM también se puede utilizar para manipular documentos XHTML y HTML.
  6. 6. Técnicamente, DOM es una API de funciones que se pueden utilizar para manipular las páginas XHTML de forma rápida y eficiente. </li></ul>
  7. 7. DOM <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Página sencilla</title> </head> <body> <p>Esta página es <strong>muy sencilla</strong></p> </body> </html>
  8. 8. DOM
  9. 9. DOM Tipos de nodos <ul><li>Document: es el nodo raíz de todos los documentos HTML y XML. Todos los demás nodos derivan de él.
  10. 10. Element: representa el contenido definido por un par de etiquetas de apertura y cierre (<etiqueta>...</etiqueta>) o de una etiqueta abreviada que se abre y se cierra a la vez (<etiqueta/>). Es el único nodo que puede tener tanto nodos hijos como atributos.
  11. 11. Attr: representa el par nombre-de-atributo/valor.
  12. 12. Text: almacena el contenido del texto que se encuentra entre una etiqueta de apertura y una de cierre. </li></ul>
  13. 13. DOM Propiedades y métodos de nodos <ul><li>nodeName, nodeValue, nodeType
  14. 14. ChildNodes, attributes
  15. 15. firstChild, lastChild, nextSibling, previousSibling
  16. 16. AppendChild(), removeChild(), replaceChild(), insertBefore()‏
  17. 17. createAttribute(), createElement(), createTextNode()‏
  18. 18. getAttribute(), setAttribute(), removeAttribute()‏ </li></ul>
  19. 19. DOM Acceso directo a los nodos <ul><li>getElementById()‏
  20. 20. getElementsByName()‏
  21. 21. GetElementsByTagName()‏ </li></ul>
  22. 22. DOM Acceso directo a los nodos - GetElementsByTagName()‏ <ul><li>Obtiene todos los elementos de la página XHTML cuya etiqueta sea igual que el parámetro que se le pasa a la función. Ej: </li></ul>var parrafos = document.getElementsByTagName(&quot;p&quot;); for(var i=0; i<parrafos.length; i++) { var parrafo = parrafos[i]; }
  23. 23. DOM Acceso directo a los nodos - GetElementsByName() *se debe manejar con cuidado en IE <ul><li>Obtiene todos los elementos de la página XHTML cuyo atributo name coincida con el parámetro que se le pasa a la función. Ej: </li></ul><input type=”text” name=”ciudad” value=”Cartagena” /> var city = document.getElementsByName(&quot;ciudad&quot;); alert(city.value);
  24. 24. DOM Acceso directo a los nodos - GetElementById()‏ <ul><li>Devuelve el elemento XHTML cuyo atributo id coincide con el parámetro indicado en la función. Como el atributo id debe ser único para cada elemento de una misma página, la función devuelve únicamente el nodo deseado. Ej: </li></ul><div id=”contenido”>...</div> var con = document.getElementById(&quot;contenido&quot;);
  25. 25. DOM Agregar nodos Se crea el elemento, se crean sus nodos hijos (atributos o texto), se le asocian los hijos y por último se asocia el nuevo elemento al documento xhtml. Ej: var p = document.createElement(&quot;p&quot;); var texto = document.createTextNode(&quot;Este p no estaba en el HTML original&quot;); p.appendChild(texto); document.body.appendChild(p);
  26. 26. DOM Agregar nodos Ej. 2: var con = document.getElementById(”contenido”); var p = document.createElement(&quot;p&quot;); var texto = document.createTextNode(&quot;Donde va este p en relacion al div contenido?&quot;); p.appendChild(texto); //con.appendChild(p); //p dentro del div document.body.insertBefore(p , div); //p antes del div
  27. 27. DOM Agregar nodos Ej. 3: var con = document.getElementById(”contenido”); var p = document.createElement(&quot;p&quot;); var texto = document.createTextNode(&quot;p alineado&quot;); p.appendChild(texto); p.setAttribute(&quot;align&quot;, &quot;center&quot;); con.appendChild(p);
  28. 28. DOM Reemplazar nodos Ej: var padre = document.getElementById(”padre”); var hijo1 = document.getElementById(&quot;hijo1&quot;); var hijo2 = document.createElement(&quot;h3&quot;); var texto = document.createTextNode(&quot;H3 nuevo&quot;); hijo2.appendChild(texto); padre.replaceChild(hijo2,hijo1);
  29. 29. DOM Eliminar nodos Ej: var con = document.getElementById(”contenido”); var p = document.getElementById(”paraborrar”); con.removeChild(p);
  30. 30. DOM Atributos getAttribute(), setAttribute(), removeAttribute() Ej: <div id=”contenido” align=”center”>Texto.....</div> var con = document.getElementById(”contenido”); var alineacion = con.getAttribute(”align”); con.setAttribute(”align”,”right”); con.removeAttribute(”align”);

×