Apuntes: Manejar el DOM con JavaScript
-
Upload
francisco-javier-arce-anguiano -
Category
Internet
-
view
173 -
download
4
Transcript of Apuntes: Manejar el DOM con JavaScript
![Page 1: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/1.jpg)
Document Object ModelDOM
![Page 2: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/2.jpg)
Document Object Model
● ¿Qué es el DOM?● Acceder a los nodos● Modificar los nodos● Crear nuevos nodos● Navegar en el documento
![Page 3: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/3.jpg)
Document Object Model¿Qué es el DOM?
![Page 4: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/4.jpg)
Document Object Model
El modelo de representación de documentos o DOM (Document Object Model) es la forma en que podemos representar un documento.
![Page 5: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/5.jpg)
Document Object Model
Por "documento" no se refiere a un documento tipo Word, si no a una página en HTML.
![Page 6: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/6.jpg)
Document Object Model
Podemos representar una página en el modelo DOM como un árbol genealógico, por ejemplo:
![Page 7: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/7.jpg)
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>
![Page 8: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/8.jpg)
Document Object Model
HTML
head
body
title
h1
p
ul
li
li
li
![Page 9: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/9.jpg)
Document Object Model
ul
li
li
li
texto
texto
texto
atributo li
![Page 10: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/10.jpg)
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
![Page 11: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/11.jpg)
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
![Page 12: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/12.jpg)
DOMAcceder a los nodos
![Page 13: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/13.jpg)
Acceder a los nodos
document.getElementById("identificador");
document.getElementsByTagName("etiqueta");
miElemento.nodeTypemiElemento.innerHTMLmiElemento.childNodes.length
![Page 14: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/14.jpg)
DOMSeleccionar por clase
![Page 15: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/15.jpg)
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+
![Page 16: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/16.jpg)
DOMQuery Selector
![Page 17: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/17.jpg)
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+
![Page 18: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/18.jpg)
Seleccionar elementos por los selectores de CSS
Podemos seleccionar por clase, identificador, atributo o pseudoclase.
![Page 19: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/19.jpg)
DOMModificar los nodos
![Page 20: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/20.jpg)
Modificar los elementos DOM
miElemento.getAttribute("align");
miElemento.setAttribute("align","left");
![Page 21: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/21.jpg)
DOMTrabajar con los atributos de los nodos
![Page 22: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/22.jpg)
Trabajar con los atributos del nodo
Los métodos para modificar los nodos:• getAttribute()• setAttribute()• removeAttribute()• hasAttribute()
![Page 23: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/23.jpg)
DOMModificar, tomar y remover texto de un nodo
![Page 24: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/24.jpg)
Modificar, tomar y remover texto
Por medio del siguiente método, podemos modificar, recuperar su valor o remover texto con o sin etiquetas:
• innerHTML
![Page 25: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/25.jpg)
DOMNavegar en el documento
![Page 26: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/26.jpg)
Moviéndose alrededor del DOM
Los métodos para moverse a través del árbol DOM son:
● parentNode● previousSibling● nextSibling● firstChild● lastChild
![Page 27: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/27.jpg)
DOMPrimer y último nodo
![Page 28: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/28.jpg)
Moviéndose alrededor del DOM
Los métodos para moverse a través del árbol DOM son:
● parentNode● previousSibling● nextSibling● firstChild● lastChild
![Page 29: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/29.jpg)
DOMCrear nodos
![Page 30: Apuntes: Manejar el DOM con JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052705/58a04fae1a28ab39648b6a1d/html5/thumbnails/30.jpg)
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);