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.