DOM HTML Javascript
•
8 recomendaciones•6,183 vistas
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
![DOM ,[object Object]](https://image.slidesharecdn.com/dom-100506120550-phpapp02/85/DOM-HTML-Javascript-1-320.jpg)
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a DOM HTML Javascript
Similar a DOM HTML Javascript (20)
Último
Último (19)
DOM HTML Javascript
- 5. Por extensión, DOM también se puede utilizar para manipular documentos XHTML y HTML.
- 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.
- 7. DOM <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Página sencilla</title> </head> <body> <p>Esta página es <strong>muy sencilla</strong></p> </body> </html>
- 8. DOM
- 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. Attr: representa el par nombre-de-atributo/valor.
- 12. Text: almacena el contenido del texto que se encuentra entre una etiqueta de apertura y una de cierre.
- 15. firstChild, lastChild, nextSibling, previousSibling
- 16. AppendChild(), removeChild(), replaceChild(), insertBefore()
- 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("p"); var texto = document.createTextNode("Este p no estaba en el HTML original"); p.appendChild(texto); document.body.appendChild(p);
- 26. DOM Agregar nodos Ej. 2: var con = document.getElementById(”contenido”); var p = document.createElement("p"); var texto = document.createTextNode("Donde va este p en relacion al div contenido?"); p.appendChild(texto); //con.appendChild(p); //p dentro del div document.body.insertBefore(p , div); //p antes del div
- 27. DOM Agregar nodos Ej. 3: var con = document.getElementById(”contenido”); var p = document.createElement("p"); var texto = document.createTextNode("p alineado"); p.appendChild(texto); p.setAttribute("align", "center"); con.appendChild(p);
- 28. DOM Reemplazar nodos Ej: var padre = document.getElementById(”padre”); var hijo1 = document.getElementById("hijo1"); var hijo2 = document.createElement("h3"); var texto = document.createTextNode("H3 nuevo"); hijo2.appendChild(texto); padre.replaceChild(hijo2,hijo1);
- 29. DOM Eliminar nodos Ej: var con = document.getElementById(”contenido”); var p = document.getElementById(”paraborrar”); con.removeChild(p);
- 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”);