propiedades y atributos - lizethcas/javascript-universe GitHub Wiki

• value – Contiene el contenido de texto actual de los elementos del formulario.
• checked – Almacena el estado de la casilla de verificación o del botón de radio (true/false).
• name – Almacena el valor especificado en el atributo name del HTML.
• src – Representa la ruta a la imagen en una etiqueta <img>.

Ejemplo

<img class="image" src="https://picsum.photos/id/9/320/240" alt="A laptop" width="300" />

Javascript

const image = document.querySelector(".image");
console.log(image.src); // https://picsum.photos/id/9/320/240
console.log(image.alt); // A laptop

image.src = "https://picsum.photos/id/13/640/480";
image.alt = "River bank";

elem.textContent devuelve el contenido textual dentro de un elemento. Se puede leer y escribir. No importa lo que se pase a textContent, los datos siempre se escribirán como texto.

Ejemplo

<article class="article">
  <h2 class="article-title">Welcome to Hawaii!</h2>
  <p class="article-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident quaerat nemo veritatis quasi eius eum aliquid, nobis dolore nisi, magnam eaque iusto, necessitatibus atque laborum quam tempora ducimus dicta ipsam.</p>
</article>

Javascript

const textEl = document.querySelector(".article-text");
console.log(textEl.textContent); // text inside p.article-text

const titleEl = document.querySelector(".article-title");
titleEl.textContent = 'Welcome to Bahamas!';

La propiedad classList almacena un objeto que permite trabajar fácilmente con las clases de un elemento HTML. Es muy útil para agregar, quitar o verificar clases dinámicamente.

• elem.classList.contains('cls')
  Devuelve true o false dependiendo de si el elemento tiene la clase 'cls'.

• elem.classList.add('cls')
  Añade la clase 'cls' a la lista de clases del elemento.

• elem.classList.remove('cls')
  Elimina la clase 'cls' de la lista de clases del elemento.

• elem.classList.toggle('cls')
  Si el elemento no tiene la clase 'cls', la añade; si la tiene, la elimina.

• elem.classList.replace('oldClass', 'newClass')
  Sustituye la clase 'oldClass' por la clase 'newClass'.

Ejemplo

HTML:

<a class="link is-active" href="">A random link</a>

Javascript:

const link = document.querySelector(".link");
console.log(link.classList); // Muestra la lista de clases actuales del elemento con clase "link"

const hasActiveClass = link.classList.contains("is-active");
console.log(`hasActiveClass - ${hasActiveClass}`); // Imprime true o false dependiendo si el elemento tiene la clase "is-active"

link.classList.add("special");
console.log(link.classList); // Muestra la lista de clases después de agregar "special"

link.classList.remove("is-active");
console.log(link.classList); // Muestra la lista de clases después de eliminar "is-active"

link.classList.toggle("is-active");
console.log(link.classList); // Si "is-active" no está, la agrega; si está, la elimina. Muestra el resultado

link.classList.replace("special", "regular");
console.log(link.classList); // Reemplaza la clase "special" por "regular" y muestra la lista actualizada

La propiedad innerHTML permite obtener o establecer el contenido HTML de un elemento. A diferencia de textContent, innerHTML interpreta el contenido como HTML, lo que significa que puede incluir etiquetas HTML que serán renderizadas.

const element = document.querySelector('.container');
element.innerHTML = '<h1>Título</h1><p>Contenido</p>';

1. Rendimiento:

   • Cada vez que se modifica innerHTML, el navegador debe reparsear y reconstruir el DOM.
   • Esto puede ser costoso en términos de rendimiento, especialmente con grandes cantidades de contenido.

2. Eventos:

   • Los elementos creados con innerHTML pierden sus manejadores de eventos.
   • Se requiere volver a asignar los event listeners después de modificar el contenido.

1. textContent:

   • Usa textContent cuando solo necesites manipular texto plano.
   • Es más seguro y rápido que innerHTML.

2. createElement() y métodos DOM:

   • Para crear elementos de forma segura:

   const div = document.createElement('div');
   const text = document.createTextNode('Contenido seguro');
   div.appendChild(text);

3. Template literals:

   • Para contenido dinámico simple:

   const name = 'Usuario';
   element.textContent = `Hola, ${name}!`;

El cambio de elem.innerHTML eliminará completamente y volverá a crear todos los descendientes del elemento elem. Si el elemento no está inicialmente vacío, habrá costes adicionales para serializar el marcado existente, lo cual es malo.

Ejemplo

<article class="article">
 <h2>Article title</h2>
</article>

Javascript

const article = document.querySelector(".article");
const htmlString = `<p class="article-text">Nullam quis ante. Vestibulum dapibus nunc ac augue. In consectetuer turpis ut velit.</p>
  <a class="link" href="#">Read more...</a>`;

// Replace += with = operator. See the difference? 
// Article title is lost because we overwrite element content.
article.innerHTML += htmlString;

Un método moderno para añadir una línea de tags HTML antes, después o dentro de un elemento. Resuelve el problema del innerHTML de la re-serialización del contenido de los elementos cuando se agrega el marcado al marcado existente.

elem.insertAdjacentHTML(position, string);

-beforebegin: Antes elem -afterbegin: Dentro elem, antes de todos los hijos. -beforeend: Dentro elem, después de todos los hijos. -afterend: DDespués elem.

Eejemplo: HTML:

<ul class="list">
  <li class="list-item">HTML</li>
  <li class="list-item">CSS</li>
  <li class="list-item">JavaScript</li>
</ul>

Javascript:

const list = document.querySelector(".list");

const newTechnologies = ["React", "TypeScript", "Node.js"];
const markup = newTechnologies
 .map((technology) => `<li class="list-item new">${technology}</li>`)
 .join("");

list.insertAdjacentHTML("beforeend", markup);
list.insertAdjacentHTML("beforebegin", "<h2>Popular technologies</h2>");

Siguiente: Creación y eliminación de elementos

Siguiente: Siguiente: Eventos