trasteando con el DOM 1: seleccionar nodos

Primera entrada de una serie dedicada a conocer el api del DOM.

Tarsila do Amaral

archivado en: JavaScript / 26 septiembre, 2014 / taller:

Para mis amigos Rafa y Fernando.

Aunque hoy en día con jQuery es muy fácil trabajar con el DOM, es interesante profundizar sobre el tema y saber cómo funciona el API por dos razones: es más eficaz y rápido hacer algunas cosas directamente con JavaScript y, segunda, en ocasiones, jQuery se queda corta.

Empezamos viendo los tipos de nodo que existen, una parte algo pesada pero que resulta útil.

1). Tipos de nodo

Como es sabido, una página web está formada por una serie de nodos que se van ramificando jerárquicamente de forma arbórea. Existen distintos tipos de nodo. Los principales son:

  • DOCUMENT_NODE (como window.document, que incluye toda la página web)
  • ELEMENT_NODE (<body>, <p>, <h3>...)
  • ATRIBUTE_NODE (class="tal", id="tal")
  • TEXT_NODE (el texto, incluidos los saltos de carro y los espacios en blanco)
  • DOCUMENT_FRAGMENT_NODE (document.createDocumentFragment())
  • DOCUMENT_TYPE_NODE (<!DOCTYPE html>)

Todos los nodos derivan del objeto nodo, del cual heredan sus propiedades y métodos. Así, cada nodo, es decir, cada elemento de una página web, como un titular etiquetado con el par de tags <h3>soy un titular</h3>, tiene las siguientes propiedades:

  • Node.attributes: colección de los atributos del nodo.
  • Node.baseURI: la url.
  • Node.childNodes: nodos que contiene el nodo.
  • Node.firstChild: primer nodo que contiene el nodo.
  • Node.lastChild: último  nodo que contiene el nodo.
  • Node.localName
  • Node.namespaceURI
  • Node.nextSibling: el nodo hermano que encuentra justo después.
  • Node.nodeName: el nombre del nodo (ej. div)
  • Node.nodeType: el tipo de nodo.
  • Node.nodeValue: el contenido del nodo (cuando es un texto o un comentario).
  • Node.ownerDocument
  • Node.parentElement: el elemento que lo contiene (y ya veremos qué es un elemento y qué un nodo).
  • Node.parentNode: el nodo que lo contiene.
  • Node.prefix
  • Node.previousSibling: el nodo hermano que encuentra justo antes.
  • Node.textContent: selecciona el texto del nodo.

Como son propiedades, podemos acceder a ellas mediante la notación de puntos característica de JavaScript. Así, por ejemplo, si tenemos este fragmento...

<div id="principal">

<h3 id="titular">El pasaje estándar Lorem Ipsum, usado desde el año 1500.</h3>

<p id="desarrollo">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ..."</p>

...esta sentencia ejecutada por consola nos permitiría saber qué tipo de nodo es.

desarrollo.nodeType;

// 1

Si alguien hace la prueba, verá que la sentencia da como resultado un número, un 1. ¿Por qué?

Esto es por que cada tipo de nodo se identifica por un número. Podemos saber con qué numero se corresponde cada nodo de una página con un bucle sencillo:

for(var key in Node){

console.log(key,' = '+Node[key]);

};

  • ELEMENT_NODE = 1
  • ATTRIBUTE_NODE = 2
  • TEXT_NODE = 3
  • CDATA_SECTION_NODE = 4
  • ENTITY_REFERENCE_NODE = 5
  • ENTITY_NODE = 6
  • PROCESSING_INSTRUCTION_NODE = 7
  • COMMENT_NODE = 8
  • DOCUMENT_NODE = 9
  • DOCUMENT_TYPE_NODE = 10
  • DOCUMENT_FRAGMENT_NODE = 11
  • NOTATION_NODE = 12

Otra propiedad que nos permite identificar un nodo es nodeName, que indica el tipo de tag seleccionado.

titular.nodeName;

// "H3"

Esto quedará más claro más adelante.

2). Seleccionar nodos

2.1. Selección de un nodo

Para seleccionar un nodo en concreto contamos con dos métodos del objeto document, que es un objeto global que abarca toda una página web, por explicarlo de una manera un tanto burda. Estos son:

  • document.getElementById(id);
  • document.querySelector('selector').

Como se deduce del nombre, el primero permite seleccionar elementos indicando su id. Lo normal es guardar la selección en una variable (objeto). Por ejemplo, de este fragmento:

<div id="principal">

<h3 id="titular">El pasaje estándar Lorem Ipsum, usado desde el año 1500.</h3>

<p id="desarrollo">"Lorem ipsum dolor sit amet, consectetur..."</p>

</div>

podríamos seleccionar el titular así:

<script>

var nodoSeleccionado = document.getElementById("titular");

console.log(nodoSeleccionado);

</script>

La segunda manera de seleccionar un nodo en concreto es más flexible, ya que se puede emplear cualquier selector  de CSS.

<ul id="lista">

<li>item 1</li>

<li>item 2</li>

</ul>

...

var nodoSeleccionado =  document.querySelector('#lista > li');

2.2. Selección de varios nodos

Para seleccionar varios nodos tenemos tres métodos:

  • document.getElementsByTagName()
  • document.getElementsByClassName()
  • document.querySelectorAll()

El primero, claro está, selecciona los nodos a partir del atributo name y el segundo a partir de la clase. Con el tercero podemos usar cualquier tipo de selector.

var nodoSeleccionados = document.getElementsByClassName('parrafosVerdes');

var nodoSeleccionados = document.querySelectorAll('h3');

Cuando seleccionamos varios nodos de esta manera, el resultado no es un array, como cabría esperar, sino un tipo de objeto especial denominado nodeList, una lista o colección de nodos. Este objeto tiene una sola propiedad, length, que indica el número de nodos de la colección, y un método, item(), que devuelve un nodo de la colección, aunque se puede obtener el mismo resultado indicando la posición del nodo entre corchetes. Es decir, esto es lo mismo:

var nodoSeleccionados = document.querySelectorAll('h3')

var nodoUno = nodoSeleccionados[0];

var nodoDos = nodoSeleccionados.item(0);

Como decía, una lista de nodos no es un array, pero sí podemos recorrerlo como tal. Así, por ejemplo, si tenemos este contenido HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p class="colorado">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p class="colorado">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

Con javaScript podríamos seleccionar todos los párrafos y colorear los que tengan la clase «colorado»:

var todosParrafos = document.querySelectorAll('p');

for (var i=0, len=todosParrafos.length; i < len; i++) {

if ( todosParrafos[i].classList.contains('colorado') ) {

todosParrafos[i].setAttribute('style', 'color:#900;');

}

}

ver ejemplo en plunker

Bueno, de momento vamos a dejarlo aquí.

 

|| Tags:

valoración de los lectores sobre trasteando con el DOM 1: seleccionar nodos

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (4 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.