apuntes: manejar el dom con javascript
TRANSCRIPT
Document Object ModelDOM
Document Object Model
● ¿Qué es el DOM?● Acceder a los nodos● Modificar los nodos● Crear nuevos nodos● Navegar en el documento
Document Object Model¿Qué es el DOM?
Document Object Model
El modelo de representación de documentos o DOM (Document Object Model) es la forma en que podemos representar un documento.
Document Object Model
Por "documento" no se refiere a un documento tipo Word, si no a una página en HTML.
Document Object Model
Podemos representar una página en el modelo DOM como un árbol genealógico, por ejemplo:
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>
Document Object Model
HTML
head
body
title
h1
p
ul
li
li
li
Document Object Model
ul
li
li
li
texto
texto
texto
atributo li
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_NODE
El nodo es del tipo ProcessingInstruction 7
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
DOMAcceder a los nodos
Acceder a los nodos
document.getElementById("identificador");
document.getElementsByTagName("etiqueta");
miElemento.nodeTypemiElemento.innerHTMLmiElemento.childNodes.length
DOMSeleccionar por clase
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+
DOMQuery Selector
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+
Seleccionar elementos por los selectores de CSS
Podemos seleccionar por clase, identificador, atributo o pseudoclase.
DOMModificar los nodos
Modificar los elementos DOM
miElemento.getAttribute("align");
miElemento.setAttribute("align","left");
DOMTrabajar con los atributos de los nodos
Trabajar con los atributos del nodo
Los métodos para modificar los nodos:• getAttribute()• setAttribute()• removeAttribute()• hasAttribute()
DOMModificar, tomar y remover texto de un nodo
Modificar, tomar y remover texto
Por medio del siguiente método, podemos modificar, recuperar su valor o remover texto con o sin etiquetas:
• innerHTML
DOMNavegar en el documento
Moviéndose alrededor del DOM
Los métodos para moverse a través del árbol DOM son:
● parentNode● previousSibling● nextSibling● firstChild● lastChild
DOMPrimer y último nodo
Moviéndose alrededor del DOM
Los métodos para moverse a través del árbol DOM son:
● parentNode● previousSibling● nextSibling● firstChild● lastChild
DOMCrear nodos
Crear elementos del DOM
1. Crear los elementos2. Añadir los elementos
document.createElement("li");miElemento.appendChild(nuevoElemento);nuevoElemento.innerHTML = "Texto";parent.insertBefore(newEle, existingEle);