MÉTODOS PARA ACCEDER A NODOS DE LA ESTRUCTURA DEL DOM HTML
Los métodos son acciones que se ejecutan para alterar el estado o las propiedades de algo (Antani y Stefanov[4]). En el contexto de Javascript existen métodos que apuntan a los nodos ó elementos de la estructura HTML. Cada método presenta una sintaxis ligeramente diferente y un comportamiento igual de único, aunque parezca que hacen lo mismo:
- Para apuntar a UN nodo con un atributo id="" se usa
document.getElementById() - Para apuntar a MUCHOS nodos con atributo class="" se usa
document.getElementsByClassName() - Para apuntar a UN nodo con cualquier atributo (class o id) pero apuntarlo desde el argumento del método se usa
document.querySelector('');, donde en el argumenti va el punto (para apuntar a una clase) o el signo # (para apuntar a un id) - Nótese cómo la palabra
Elementse muestra diferente para cada método (es plural cuando se trata de clases).
MÉTODO
document.getElementById("..")
Permite apuntar a un nodo DOM con atributo 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"
MÉTODO
document.getElementsByClassName("..")
Permite apuntar a una colección de nodos DOM con atributo class="...". Recordar que un conjunto de elementos HTML con una sola clase es posible en la estructura del HTML.
En HTML
<body>
<!-- ELEMENTO CON CLASE -->
<p class="parrafo"> Hola</p>
<script>
// Apunta a un solo elemento
var apuntarClase = document.getElementsByClassName('parrafo')[0];
// Al hacer click sobre la palabra Hola, se altera en color y tamaño
apuntarClase.addEventListener('click', function () {
apuntarClase.style.color = "red";
apuntarClase.style.fontSize = "2rem";
});
</script>
</body>
MÉTODO
document.querySelector('');
Permite apuntar a un elemento (sea clase o id) en la estructura del DOM.
En HTML
<body>
<!-- ELEMENTO CON CLASE -->
<p class="parrafo"> Hola</p>
<script>
// Apunta a un solo elemento indicado en el argumento del método
// punto para identificar una clase
const elemento = document.querySelector('.parrafo');
elemento.addEventListener('click', () => {
elemento.style.color = 'red';
elemento.style.fontSize = '2rem';
});
</script>
</body>
Y para apuntar a un id desde document.querySelector('');:
En HTML
<body>
<!-- ELEMENTO CON CLASE -->
<p id="parrafo"> Guayaquil</p>
<script>
// Apunta a un solo elemento indicado en el argumento del método
// punto para identificar una clase
const elemento = document.querySelector('#parrafo');
elemento.addEventListener('click', () => {
elemento.style.color = 'red';
elemento.style.fontSize = '2rem';
});
</script>
</body>
MÉTODO 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.