Para poder modificar elementos del documento HTML, primero tenemos que acceder a ellos, vamos a ver con qué métodos y propiedades podemos hacerlo.
Métodos y propiedades de acceso
Método getElementById()
Se trata del método más común, accederemos directamente a un nodo a través de su id. Concretamente devuelve el elemento que posee el atributo «id» con el valor especificado.
<div id="titulo">
<h1>Capítulo primero</h1>
</div>
<script type="text/javascript">
var tituloTexto = document.getElementById("titulo");
</script>
// 21.1
Primero invocamos al objeto, que en este caso es document, y seguidamente a su método getElementById. Como parámetro le pasamos el id del elemento que queremos que nos devuelva.
Método getElementsByTagName()
Este método devuelve todos los elementos del documento con una etiqueta especifica (<div>, <p>, <h1>, . . ).
El valor que nos devuelve es un array con todos los elementos que coinciden ordenados según aparecen en el documento. Si queremos acceder a uno de ellos en concreto debemos proceder como ya vimos en el capítulo de los arrays.
<div>
<h2>Capítulo primero</h2>
<h2>Capítulo segundo</h2>
</div>
<script type="text/javascript">
var tituloSegundo = document.getElementsByTagName("h2")[1];
</script>
// 21.2
En este último ejemplo accederemos al elemento que está en la posición 1 de la lista que nos devuelve «getElementsById».
También podemos usar este método de forma recursiva para acceder a un elemento que está dentro de otro
<div>
<h2>Capítulo primero</h2>
</div>
<div>
<h2>Capítulo segundo</h2>
</div>
<script type="text/javascript">
var divSegundo = document.getElementsByTagName("div")[1];
var tituloDivSegundo = divSegundo.getElementsByTagName("h2")[0];
</script>
// 21.3
(Chrome-1, IE-6, Firefox-3, Safari-3.0 en adelante)
Método getElementsByClassName()
Este método devuelve un array con todos los elementos que posean el atributo clase con un valor igual al nombre especificado.
<div>
<a class="clase1">enlace</a>
</div>
<script type="text/javascript">
var enlacesClase1 = document.getElementsByClassName("clase1");
</script>
// 21.4
(Chrome-4, IE-9, Firefox-3, Safari-3.1en adelante)
Método getElementsByName()
Devuelve un array con todos los elementos que posean el atributo “name” con un valor igual al nombre especificado.
<div>
Edad:<input type="text" name="edad">
</div>
<script type="text/javascript">
var campoEdad = document.getElementsByName("edad");
</script>
// 21.5
El atributo «name» comenzó a estar en desuso en HTML5, se mantiene para formularios.
Método querySelector()
Devuelve el primer elemento que coincida con un selector CSS especificado. El selector o selectores CSS se pasan como parámetros.
<div>
<h3>Este es el primer título H3</h3>
<h3>Este es el segundo H3</h3>
</div>
<script>
document.querySelector("h3").style.color = "pink";
</script>
// 21.6
Pero este método es capaz de mucho más, ya que puede utilizar todo el potencial de los selectores CSS, veamos más ejemplos.
<div>
<h3>Este es el primer título H3</h3>
<h3 class="clase1">Este es el segundo H3</h3>
</div>
<script>
document.querySelector("h3.clase1").style.color = "pink";
</script>
// 21.7
En este último ejemplo hemos seleccionado el elemento referenciandolo a través del valor de su atributo «class».
Vamos ahora con otro ejemplo utilizando el atributo «id» y el tipo de elemento.
<div id="primer_div">
<h3>Este es el primer título</h3>
<p>Este es el primer párrafo</p>
</div>
<div id="segundo_div">
<h3>Este es el segundo título</h3>
<p>Este es el segundo párrafo</p>
</div>
<script>
document.querySelector("#segundo_div h3").style.color = "pink";
</script>
// 20.8
Este último método admite más de un parámetro que deberemos separar con comas. Aunque utilizemos más de un parámetro, el método tan solo devolverá una coincidencia, la primera que encuentre.
(Chrome-4, IE-8, Firefox-3.5, Safari-3.2) en adelante
Método querySelectorAll()
Este método funciona como querySelector() con la diferencia de que este no devuelve solamente el primer elemento que coincida sino todos ellos. La manera en que nos devuelve las coincidencias es a través de un array, así que para recuperar una de ellas deberemos hacerlo con ayuda de los corchetes [].
<div>
<h3>Este es el primer título H3</h3>
<h3>Este es el segundo H3</h3>
</div>
<script>
var titulo = document.querySelectorAll("h3");
titulo[1].style.color = "orange";
</script>
// 20.9
Al igual que querySelector también admite varios parámetros.
(Chrome-4, IE-9, Firefox-3.5, Safari-3.2)
Propiedad parentNode
Devuelve el nodo padre del nodo que le especifiquemos.
var nodoPadre = document.getElementById("nodoHijo").parentNode;
Propiedad childNodes
Devuelve una lista de nodos hijos de un nodo determinado, como un objeto nodeList. (no devuelve los elementos HTML sino los nodos). Se puede acceder a un nodo concreto de la lista utilizando el índice como en los arrays.
<ul id="padre">
<li>Ford</li>
<li>Maserati</li>
<li>Seat</li>
</ul>
<script>
var nodoPadre = document.getElementById("padre");
var segundoHijo = nodoPadre.childNodes[3];
nodoPadre.removeChild(segundoHijo);
</script>
// 21.10
Los espacios en blanco los considera texto y por lo tanto nodos, también los comentarios los considera nodos. Por lo tanto en este ejemplo con el índice [3] estaremos accediendo al nodo <li>Maserati</li>.
Si quieres excluir nodos de texto y comentarios debes usar la propiedad «children». La exclusión de nodos de texto y comentarios con «children» no funciona con versiones anteriores a ie 9.
Propiedad firstChild
Devuelve el primer nodo hijo de un nodo especificado, como un objeto nodo. El nodo hijo puede ser un nodo “element”, un nodo “text” o un nodo “comment”. Por lo tanto deberemos tener en cuenta los espacios entre elementos HTML.
<ul id="padre"><li>Ford</li><li>Maserati</li><li>Seat</li></ul>
<script>
var nodoPadre = document.getElementById("padre");
var nodoHijo1 = nodoPadre.firstChild;
nodoPadre.removeChild(nodoHijo1);
</script>
// 21.11
En este último caso hemos colocado las diferentes etiquetas de la lista <ul> sin espacios entre ellas, de esta manera el primer nodo hijo de «nodoPadre» será <li>Ford<li/> en vez del espacio que le precede.
Si lo que queremos es acceder al primer «nodo element» e ignorar los nodos de tipo «text» o «comment», deberemos utilizar la propiedad «firstElementChild». El único inconveniente es que al igual que «children», esa característica solo funciona a partir de ie 9.
También disponemos de la propiedad «lastChild» que funciona de la misma manera que «firstChild» pero accediendo al último nodo hijo. Si queremos que solo tenga en cuenta los nodos «element» deberemos utilizar la propiedad «lastElementChild» (limitada también a la versión ie 9 y posteriores).
Con los métodos y propiedades que hemos visto en este capítulo, podremos acceder a los diferentes elementos del DOM. En el próximo veremos como crear nuevos elementos.
Ir a Javascript para novatos 22ª parte
Dejar una opinión