• Josetxu.com
  • Perfil
  • Portafolio
  • Iconos
  • Demos
  • Blog
Blog · Josetxu.com

Método [getElementById] de Javascript

Publicada en 7 jun 2015 de Josetxu

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…


getElementById

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

XHTML
1
<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:

JavaScript
1
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:

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

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

XHTML
1
2
<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 :

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

Probemos con un botón:

XHTML
1
2
<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:

CSS
1
2
.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 :

JavaScript
1
2
document.getElementById('test3').className='ta_right';
document.getElementById('test3').className='code_rojo';

Y con unos botones quedaría asi:

XHTML
1
2
3
<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).

JavaScript
1
2
3
4
5
6
7
8
9
10
11
//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:

XHTML
1
2
3
4
<div id="test4">Texto Aleatorio</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í:

JavaScript
1
2
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, 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):

JavaScript
1
document.getElementById('test5').

 

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

javascript-list

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

Compatibilidad en navegadores
Soportado por todos los navegadores.
Navegador ► ▼ Característica
getElementById() ✔ ✔ ✔ ✔ ✔
Publicado en: Javascript | Etiquetas: Métodos |
« Imagen aleatoria con PHP
» Diseño responsive con [@media] queries de CSS3

Artículos Relacionados

  • Crear pestañas de contenido o ‘tabs’ fácilmente con javascriptCrear pestañas de contenido o ‘tabs’ fácilmente con javascript
  • Afinador de Guitarra – Online Guitar TunerAfinador de Guitarra – Online Guitar Tuner
  • Funciones básicas en Javascript: [alert()] y [prompt()]Funciones básicas en Javascript: [alert()] y [prompt()]
  • Efecto “Before / After” Responsive Efecto “Before / After” Responsive
  • Efecto Mouse ParallaxEfecto Mouse Parallax
josetxu Josetxu López

Diseñador y programador web multidisciplinar y autodidacta.
Investigo las posibilidades que nos ofrece la tecnología aprendiendo algo nuevo cada día. La curiosidad y la paciencia me han enseñado casi todo lo que sé...

Buscar

Categorías

  • CSS (7)
  • CSS3 (7)
  • HTML (4)
  • HTML5 (3)
  • Javascript (8)
  • JQuery (1)
  • PHP (6)

Etiquetas

Animación Audio Básico Captcha Clases Constructores Formularios Funciones Iconos Imagen JSON Métodos Responsive

Recientes

Crear pestañas de contenido o 'tabs' fácilmente con javascript
Crear pestañas de contenido o 'tabs' fácilmente con javascript
Funciones básicas en PHP: [include()] y [require()]
Funciones básicas en PHP: [include()] y [require()]
Iconos con CSS
Iconos con CSS
Aplicar estilos CSS a campos [radio] y [checkbox]
Aplicar estilos CSS a campos [radio] y [checkbox]

Utilidades

Color Picker w3c Selector de color Google Fonts google Fuentes de Google Can I use @Fyrd Soporte por navegadores Gimp gimp Manipulación de imágenes Notepad++ notepad++ Editor de código W3C Validator w3c Validador de código Highcharts highchartsGráficas en Javascript

Aviso

La información contenida en este blog es solo orientativa . No soy profesor, solo un tio curioso que quiere compartir lo aprendido durante estos años.

CyberChimps WordPress Themes

josetxu.comJosetxu.com Perfil | Portafolio | Iconos | Demos | Blog 2000 - 2020 © josetxu.com
▲