Apuntes: Manejar el DOM con JavaScript
•
0 recomendaciones•747 vistas
Por medio de JavaScript podremos dominar completamente el DOM o Document Object Model de una página Web
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Apuntes: Manejar el DOM con JavaScript
Similar a Apuntes: Manejar el DOM con JavaScript (20)
Más de Francisco Javier Arce Anguiano
Más de Francisco Javier Arce Anguiano (20)
Último
Último (18)
Apuntes: Manejar el DOM con JavaScript
- 2. Document Object Model ● ¿Qué es el DOM? ● Acceder a los nodos ● Modificar los nodos ● Crear nuevos nodos ● Navegar en el documento
- 3. Document Object Model ¿Qué es el DOM?
- 4. Document Object Model El modelo de representación de documentos o DOM (Document Object Model) es la forma en que podemos representar un documento.
- 5. Document Object Model Por "documento" no se refiere a un documento tipo Word, si no a una página en HTML.
- 6. Document Object Model Podemos representar una página en el modelo DOM como un árbol genealógico, por ejemplo:
- 7. Document Object Model <html> <head> <title>Untitled Document</title> </head> <body> <h1>Esta es un página HTML</h1> <p>Las iniciales DOM significan:</p> <ul> <li>Documento</li> <li>Objeto</li> <li>Modelo</li> </ul> </body> </html>
- 10. Document Object Model Constante (Tipo de nodo) Significado (hipervínculo al foro W3C) Valor ELEMENT_NODE El nodo es del tipo Element 1 ATTRIBUTE_NODE El nodo es del tipo Attr 2 TEXT_NODE El nodo es del tipo Text 3 CDATA_SECTION_NODE El nodo es del tipo CDATASection 4 ENTITY_REFERENCE_NODE El nodo es del tipo EntityReference 5 ENTITY_NODE El nodo es del tipo Entity 6 PROCESSING_INSTRUCTION_N ODE El nodo es del tipo ProcessingInstruction 7
- 11. Document Object Model Constante (Tipo de nodo) Significado (hipervínculo al foro W3C) Valor COMMENT_NODE El nodo es del tipo Comment 8 DOCUMENT_NODE El nodo es del tipo Document 9 DOCUMENT_TYPE_NODE El nodo es del tipo DocumentType 10 DOCUMENT_FRAGMENT_NODE El nodo es del tipo DocumentFragment 11 Fuente: W3C
- 12. DOM Acceder a los nodos
- 13. Acceder a los nodos document.getElementById("identificador"); document.getElementsByTagName("etiqueta"); miElemento.nodeType miElemento.innerHTML miElemento.childNodes.length
- 15. Seleccionar nodos por clase Contamos con la instrucción: getElementsByClassName() La cual nos reporta un arreglo o “nodeList” con los elementos que tienen esta clase. Esta instrucción es soportada por el IE9+
- 17. Seleccionar elementos por los selectores de CSS Contamos con las instrucciones: querySelector() querySelectorAll() El primero reporta sólo un elemento y el segundo un arreglo o ‘nodeList’ Esta instrucción es soportada por el IE8+
- 18. Seleccionar elementos por los selectores de CSS Podemos seleccionar por clase, identificador, atributo o pseudoclase.
- 20. Modificar los elementos DOM miElemento.getAttribute("align"); miElemento.setAttribute("align","left");
- 21. DOM Trabajar con los atributos de los nodos
- 22. Trabajar con los atributos del nodo Los métodos para modificar los nodos: • getAttribute() • setAttribute() • removeAttribute() • hasAttribute()
- 23. DOM Modificar, tomar y remover texto de un nodo
- 24. Modificar, tomar y remover texto Por medio del siguiente método, podemos modificar, recuperar su valor o remover texto con o sin etiquetas: • innerHTML
- 25. DOM Navegar en el documento
- 26. Moviéndose alrededor del DOM Los métodos para moverse a través del árbol DOM son: ● parentNode ● previousSibling ● nextSibling ● firstChild ● lastChild
- 27. DOM Primer y último nodo
- 28. Moviéndose alrededor del DOM Los métodos para moverse a través del árbol DOM son: ● parentNode ● previousSibling ● nextSibling ● firstChild ● lastChild
- 29. DOM Crear nodos
- 30. Crear elementos del DOM 1. Crear los elementos 2. Añadir los elementos document.createElement("li"); miElemento.appendChild(nuevoElemento); nuevoElemento.innerHTML = "Texto"; parent.insertBefore(newEle, existingEle);