DOM HTML Javascript

13,809 views

Published on

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

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
13,809
On SlideShare
0
From Embeds
0
Number of Embeds
319
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

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”);

×