apuntes: manejar el dom con javascript

Post on 12-Feb-2017

173 Views

Category:

Internet

4 Downloads

Preview:

Click to see full reader

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

top related