Método getElemetById de Javascript

El método getElementById nos permite seleccionar un elemento del DOM para hacerle cosas. Una vez seleccionado podemos modificar sus propiedades.

  • Podemos modificar el HTML del elemento.
  • Modificar el CSS.
  • Modificar atributos.
  • Añadir o quitar clases.
  • Y más…

Ver Demo

Empezando

Supongamos que tenemos un elemento div con un id asociado (durante este articulo iremos cambiando el nombre del id para evitar problemas de ids duplicados):

<div id="test1">Texto Original</div>
Texto Original

Ahora intentaremos seleccionar ese elemento desde Javascript

Selección

En Javascript con getElementById podemos seleccionar ese elemento de la siguiente manera:

document.getElementById('test1');
  • Hay que empezar por document para indicar que nos referimos al documento HTML.
  • Con getElementById indicamos como vamos a seleccionar el elemento (por su id).
  • Entre los paréntesis indicamos el id del elemento elegido (test1).

Así de fácil, pero… esto así solo no hace nada, ahora que tenemos el elemento seleccionado podemos modificar sus atributos y propiedades.

Atributos y Propiedades

La lista de cosas que podemos hacer es inmensa, veamos algunos ejemplos:

innerHTML

Podemos modificar el contenido HTML del elemento con innerHTML:

document.getElementById('test1').innerHTML ="Texto Alternativo";

Si creamos un botón para aplicar el Javascript tendríamos algo así:

<div id="test1">Texto Original</div>
<input type="button" value="Cambiar HTML" onclick="document.getElementById('test1').innerHTML = 'Texto Alternativo';"/>
Texto Original

style

También es posible añadir estilos CSS (directamente en linea) al elemento con el atributo style :

document.getElementById('test2').style.background='#ff6600';
document.getElementById('test2').style.color='#ffffff';

Probemos con un botón:

<div id="test2">CSS Original</div>
<input type="button" value="Cambiar CSS" onclick="document.getElementById('test2').style.background='#ff6600'; document.getElementById('test2').style.color='#ffffff';"/>
CSS Original

className

O podemos añadir una clase CSS al elemento con className.
Supongamos que tenemos en nuestra hoja de estilos la clase .ta_right que alinea el texto a la derecha, y la clase .code-rojo que colorea el texto de rojo:

.ta_right { text-align:right; }
.code-rojo { color:#e23d22; }

Añadiremos estas clases a un elemento HTML para cambiar la alineación y el color del texto :

document.getElementById('test3').className='ta_right';
document.getElementById('test3').className='code-rojo';

Y con unos botones quedaría así:

<div id="test3">Texto Alineado</div>
<input type="button" onclick="document.getElementById('test3').className='ta_right';" value="Añadir Alineación">
<input type="button" onclick="document.getElementById('test3').className='code-rojo';" value="Añadir Color">
Texto Alineado

Hay que remarcar que lo que hacemos aquí es modificar el atributo class, así que si el elemento no tiene ninguna clase o queremos remplazar la clase existente no habrá ningún problema, pero si el elemento ya tiene una clase y queremos añadirle otra más hay que tenerlo en cuenta. Una solución rápida puede ser obtener la clase inicial del elemento y ordenar que el atributo class sea igual a la clase inicial más la clase que queramos incluir (acordándonos de respetar los espacios entre nombres de clases).

//añadir clase para alinear a la derecha 
document.getElementById('test4').className='ta_right';
 
//vaciar el atributo class
document.getElementById('test4').className='';
 
//obtener la clase inicial del elemento
var x = document.getElementById('test4').className;
 
//añadir clase (texto rojo) a las ya existentes 
document.getElementById('test4').className= x + ' code-rojo';

Esto con botones quedaría de la siguiente manera:

<div id="test4">Texto del elemento TEST4</div>
<input type="button" value="Añadir Clase" onclick="var x = document.getElementById('test4').className; document.getElementById('test4').className=x+' code-rojo'"/> 
<input type="button" value="Cambiar Clase" onclick="document.getElementById('test4').className='ta_right';"/>
<input type="button" value="Vaciar Clase" onclick="document.getElementById('test4').className='';"/>
Texto del elemento TEST4

 
class=««

Un error de este script es que si pulsamos varias veces seguidas el botón Añadir Clase la clase .code-rojo se añade una vez por cada click. Para arreglar eso deberíamos comprobar que la cadena code-rojo no se encuentra entre las clases del elemento antes de añadirla. Se podría usar indexOf que devuelve la posición de una cadena de texto dentro de otra cadena, si la cadena existe devolverá un numero que indica la posición del inicio de la cadena, si no devolverá un -1 indicando que la cadena no existe. Así pues podríamos decir:

“Si la cadena code-rojo no existe (es igual a -1) o la cadena no está definida (es igual a undefined)… añáde la cadena al atributo class

El código del atributo onclick del botón Añadir Clase quedaría así:

var myx = document.getElementById('test5').className;
if((myx.indexOf("code-rojo")==-1)||(myx.indexOf("code-rojo")=='undefined')) {document.getElementById('test5').className= myx + ' code-rojo';"}
Elemento TEST5

 
class=««

Como ya hemos dicho la lista de cosas que podemos hacer es inmensa, aquí van algunas propuestas:

  • attributes devuelve un array con todos los atributos del elemento y sus valores.
  • className modifica el valor del atributo class.
  • hidden modifica el valor del atributo hidden.
  • innerHTML devuelve el contenido HTML del elemento.
  • lastChild devuelve el último hijo del elemento.
  • nodeName devuelve el nombre del nodo (div, p, span, etc…).
  • onclick modifica el valor del atributo onclick.
  • onmouseenter modifica el valor del atributo onmouseenter (al entrar en el perímetro).
  • onmouseleave modifica el valor del atributo onmouseleave (al salir del perímetro).
  • parentNode devuelve el padre del elemento seleccionado.
  • removeAttribute elimina un atributo específico.
  • style añade estilos en linea al elemento mediante el atributo style.
  • title modifica el valor del atributo title.

Demo

Aqui os dejo una demo donde, con unas pequeñas funciones, podréis ver claramente la utilidad de este método de Javascript.

Compatibilidad en navegadores
GLOBAL

Datos de CANIUSE.COM