Método [getElementById] 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…

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

Ahora intentaremos seleccionar ese elemento desde Javascript…

Selección

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

• 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:

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

style

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

Probemos con un botón:

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:

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

Y con unos botones quedaría asi:

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

Esto con botones quedaría de la siguiente manera:

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í:

Como ya hemos dicho la lista de cosas que podemos hacer es inmensa, aqui dejo 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.

 

Para ver un listado completo de lo que se puede hacer con este método de Javascript en esta misma página pulsa f12 para abrir el inspector de código de tu navegador y en la Consola escribe el siguiente código (te saldrán multitud de opciones para probar):

 

La siguiente imagen es solo una muestra de como se vé en Firefox:

Demo

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

See the Pen Método “getElementById” en Javascript by Josetxu (@josetxu) on CodePen.

ver demo grande