duduromeroa.com

#Javascript, #DOMJs, #webinteractiva, #Interfaces, #duduromeroa, #Guayaquil

Javascript | DOM | API

Programación para web 1.4: acceder a propiedades class e Id desde el DOM mediante JS.


George Póyla, matemático. Resolver problemas de diseño. www.duduromeroa.com

Por Eduardo Romero
| Guayaquil

Contacto duduromeroa@gmail.com

Aclaraciones
Dirijo este contenido para quienes ya cuentan con comprensión previa en HTML, CSS y JS. Para ampliar conceptos se propone una bibliografía en inglés al final de esta página.


Para resaltar algunos elementos de la sintaxis de JS, en algunos ejemplos de código se agregaron espacios entre caracteres. La sintaxis correcta NO usa esos espacios.


En algunos ejemplos expongo código y comentarios. También revisa el código fuente (click derecho desde mouse > Page Source). Allí también comento los códigos.






PROPIEDADES PARA ACCEDER A ELEMENTOS DEL DOM

Las siguientes propiedades apuntan a nodos y elementos HTML mediante identificadores de clase o de Id. Se revisarán las siguientes propiedades:

  • Id
  • className
  • style
  • value

PROPIEDAD Id

document.getElementById("..")

Permite apuntar a un nodo DOM Id de un único elemento HTML. Recordar que NO puede haber el mismo identificador Id en dos o más elementos HTML.

El apuntador desde JS de un elemento Id es el método getElementById ("identificadorId");. Eso significa que en el argumento y entre comillas SOLO debe ir el nombre identificador del ID, sin anteceder el signo '#'.

  • ..getElementById("nombre") solo apunta al nombre del identificador del Id (sin signo).
  • ..getElementById("#nombre") ¡ERROR!
  • En cambio, ..querySelector("#id"); permite más de un selector CSS (y no solo IDs). Pero el nombre identificador debe anteceder con el signo '#' o punto, según sea un Id o una clase.

Elemento con id="aquiId"

Elemento con class="aquiId"



PROPIEDAD className

Obtiene o define el identificador de clase de un elemento o nodo HTML.

Para captar una o más clases desde un elemento apuntado:

/* EN HTML */
<p id="nuevoIdx" class="claseA claseB"> Elemento con Id y clases </p>

/* EN JS */
// Aloja y apunta a elemento con Id
var apuntarAElementx = document.getElementById("nuevoIdx");

// Aloja la captación de la clase desde 'elemento.className'
var captarClase = apuntarAElementx.className;

// Muestra solo los NOMBRES las clases captadas
console.log(captarClase); 
// -> claseA claseB

Abajo, para definir el identificador de clase de un elemento:

/* EN HTML */
// Elemento con dos clases
<p id="nuevoIdx" class="claseA claseB"> Elemento con Id y clases </p>

/* EN JS */
// Aloja y apunta a elemento con Id
var apuntarAElementx = document.getElementById("nuevoIdx");

// Inserta nuevo nombre de clase
apuntarAElementx.className = "claseZZ";

// Muestra nuevo nombre de clase
console.log(apuntarAElementx.className);
// claseZZ

O, para definir dos o más clases:

En Javascript

// Inserta clases
apuntarAElementx.className = "claseZZ claseYY";

// Muestra nuevo nombre de clase
console.log(apuntarAElementx.className);
// claseZZ claseYY

O, para añadir una nueva clase SIN borrar la existente:

En Javascript

/* Inserta clases (OJO con el espacio para que no se junten) */
apuntarAElementx.className += " claseUU";

// Muestra nuevos nombres de clases
console.log(apuntarAElementx.className);
// claseA claseB claseUU

Y para remover una clase:

/* EN HTML */
// Elemento con dos clases
<p id="nuevoIdx" class="claseA claseB"> Elemento con Id y clases </p>
 
/* EN JS */
// Aloja y apunta a elemento con Id
var apuntarAElementx = document.getElementById("nuevoIdx");

/* En elemento elegido acceder a la lista de clases 
y remover la clase 'claseB' */
apuntarAElementx.classList.remove('claseB');

// Mostrar la clase que queda
console.log(apuntarAElementx.className);
// -> claseA

PROPIEDAD style

Accede o altera las reglas CSS de un elemento HTML. Abajo, para mostrar todas las propiedades de la interface 'CSSStyleDeclaration':

/* HTML */ 
// Elemento con dos clases
<p id="nuevoIdElemx"> Elemento con Id y clases </p>

/* EN CSS */ 
<style>
#nuevoIdElemx{
font-size: 2rem;
color: blue;
}
</style>

/* En Javascript */
// Aloja y apunta a elemento con ID
var captarElem = document.getElementById("nuevoIdElemx");

/* Muestra toda la lista de propiedades-objeto del elemento, 
agrupados bajo el título CSSStyleDeclaration.
La lista comprende 500 propiedades aprox */
console.log(captarElem.style);
// CSSStyleDeclaration..(500 propiedades en lista)

Para alterar el estilo de los elementos apuntados desde JS:

En Javascript

/* EN HTML */ 
// Elemento con dos clases 
<p id="nuevoIdElemx"> TITULAZO </p>

/* EN CSS */ 
<style>
/* Inicia con color azul */
#nuevoIdElemx{ color: blue; }
</style>

/* En Javascript */ 
// Aloja y apunta a elemento con ID
var captarElem = document.getElementById("nuevoIdElemx"); 

// 'TITULAZO' con color rojo
captarElem.style.color = "red";

// pero ahora tiene color negro
captarElem.style.color = "black";

// y se ve más grande
captarElem.style.fontSize = "2rem";

O para remover un estilo CSS (de un elemento HTML) desde JS:

// Color removido
captarElem.style.color = " ";

O para remover TODOS los estilos CSS y dejar solo los estilos dados desde las reglas CSS aplicadas fuera de JS:

captarElem.removeAttribute('style');

Sin embargo, si se desea borrar reglas CSS aplicadas a elementos HTML, pero estas reglas estan dadas desde hojas de estilo externas o desde clases o Ids, entonces es válido es alterar las reglas CSS invocando los nombres de los selectores class o id.

PROPIEDAD value

Obtiene un conjunto de valores de un elemento apuntado. En campos de ingreso de datos, value capta el valor actual del dato ingresado. Muy aprovechable combinando lenguajes de Base de datos como PHP.


BIBLIOGRAFÍA:
3ra edición. 2018. Marijn Haverbeke. No starch press.
Mozilla Foundation.
David Flanagan (2020). Editorial O'Reilly.
Ved Antani, Stoyan Stefanov (2017). Packt Publishing.
Editorial Packt.
Information and Computation. Elsevier.
ACM SIGCSE BulletinVolume 19Issue 1Feb