Document Object Model (DOM)

Todo el material usado en estas transparencias se han obtenido de:
Web Programming Step by Step, 2 ed., Jessica Miller, Victoria Kirst, Marty Stepp. Lulu. 2012

El árbol DOM

• Los elementos de una página están organizados en una estructura de objetos en forma de árbol
  • el DOM tiene propiedades y métodos para recorrer el árbol

Tipos de nodos DOM

<p>
	This is a paragraph of text with a 
	<a href="/path/page.html">link in it</a>.
</p>

• nodos elemento (etiqueta HTML)
  • pueden tener hijos y/o atributos
• nodos texto (texto en elementos bloque)
• nodos atributo (par atributo/valor)
  • texto/atributos son hijos en un nodo elemento
  • no pueden tener hijos o atributos
  • normalmente no se muestran cuando se dibuja el árbol DOM

Propiedades de objeto DOM

<div id="main" class="foo bar">
	<p>Hello, <em>very</em> happy to see you!</p>
	<img id="icon" src="images/borat.jpg" alt="Borat" />
</div>

Propiedades de controles de formulario DOM

<input id="sid" type="text" size="7" maxlength="7" />
<input id="frosh" type="checkbox" checked="checked" /> Freshman?

Modificación del texto dentro de un elemento

let paragraph = document.getElementById("welcome");
paragraph.innerHTML = "Welcome to our site!";  // change text on page

los objetos de elementos DOM tiene las siguientes propiedades:

• innerHTML : texto y/o etiquetas HTML dentro de un nodo
• textContent : texto (no etiquetas HTML) dentro de un nodo
  • más simple que innerHTML
• value : el valor dentro de un control de formulario

Abuso de innerHTML

// bad style!
let paragraph = document.getElementById("welcome");
paragraph.innerHTML = "<p>text and <a href="page.html">link</a>";

• innerHTML puede insertar contenido arbitrario HTML en una página
• no obstante , puede llevar a errores y se considera de un estilo pobre
• nos abstenemos de usar innerHTML para insertar etiquetas HTML; se inserta solo texto plano

Cambio de estilos con DOM

<button id="clickme">Color Me</button>

window.onload = function() {
	document.getElementById("clickme").onclick = changeColor;
};
function changeColor() {
	let clickMe = document.getElementById("clickme");
	clickMe.style.color = "red";
}

• contiene las mismas propiedades como en CSS, pero con camelCasedNames
  • ejemplos: backgroundColor, borderLeftWidth, fontFamily

Errores comunes de estilo DOM

• olvidarse de escribir .style cuando se asignan estilos

  let clickMe = document.getElementById("clickme");
  clickMe.color = "red";
  clickMe.style.color = "red";
  

• las propiedades de estilo tiene letras mayúsculas likeThis, no like-this

  clickMe.style.font-size = "14pt";
  clickMe.style.fontSize = "14pt";
  

• las propiedades de estilo deben asignarse con strings, y unidades al final

  clickMe.style.width = 200;
  clickMe.style.width = "200px";
  clickMe.style.padding = "0.5em";
  

  • escribir exactamente lo que se pondría en CSS, pero entre comillas dobles

Estilo discreto

function okayClick() {
	this.style.color = "red";
	this.className = "highlighted";
}

.highlighted { color: red; }

• un código bien escrito JavaScript debe contener el menor CSS como sea posible
• usar JS para configurar clases/IDs CSS en elementos
• definir los estilos de esas clases/IDs en un fichero CSS

Recorrido del árbol DOM

cada objeto del árbol DOM tiene las siguientes propiedades:

• complete list of DOM node properties

Ejemplo de recorrido del árbol DOM

<p id="foo">This is a paragraph of text with a 
	<a href="/path/to/another/page.html">link</a>.</p>

Nodos elemento vs. texto

<div>
	<p>
		This is a paragraph of text with a 
		<a href="page.html">link</a>.
	</p>
</div>

• Q: Cuántos hijos tiene div?
• A: 3
  • un elemento nodo reperesentando <p>
  • dos nodos textos representando "\n\t" (antes/después del párrafo)

Seleccionando grupos de objetos DOM

• métodos en document y otros objetos DOM:

Obtención de todos los elementos de un tipo

resaltar todos los párrafos del documento:

let allParas = document.querySelectorAll("p");
for (let i = 0; i < allParas.length; i++) {
	allParas[i].style.backgroundColor = "yellow";
}

<body>
	<p>This is the first paragraph</p>
	<p>This is the second paragraph</p>
	<p>You get the idea...</p>
</body>

Selectores complejos

resaltar todos los párrafos dentro de la sección con ID "address":

// let addrParas = document.getElementById("address").getElementsByTagName("p");
let addrParas = document.querySelectorAll("#address p");
for (let i = 0; i < addrParas.length; i++) {
	addrParas[i].style.backgroundColor = "yellow";
}

<p>This won't be returned!</p>
<div id="address">
	<p>1234 Street</p>
	<p>Atlanta, GA</p>
</div>

Creación de nuevos nodos

// create a new <h2> node
let newHeading = document.createElement("h2");
newHeading.innerHTML = "This is a heading";
newHeading.style.color = "green";

• el solo hecho de crear un nodo no lo agrega a la página
• hay que añadir el nuevo nodo como hijo de un elemento existente en la página...

Modificando el árbol DOM

Cada objeto elemento DOM tiene estos métodos:

let p = document.createElement("p");
p.innerHTML = "Un resultado!";
document.getElementById("main").appendChild(p);

Eliminación de un nodo de la página

function slideClick() {
	let bullets = document.getElementsByTagName("li");
	for (let i = 0; i < bullets.length; i++) {
		if (bullets[i].innerHTML.indexOf("children") >= 0) {
			bullets[i].parentNode.remove(bullets[i]);
		}
	}
}

• cada objeto DOM tiene un método removeChild para eliminar sus hijos de la página

Piratería DOM versus innerHTML

Porqué no codificar el ejemplo anterior de la siguiente forma?

function slideClick() {
	document.getElementById("thisslide").innerHTML += "<p>A paragraph!</p>";
}

function slideClick() {
	this.innerHTML += "<p style='color: red; " +
			"margin-left: 50px;' " +
			"onclick='myOnClick();'>" +
			"A paragraph!</p>";
}