Gestión de nodos DOM — JS: API del DOM

• Atributos
• Propiedades

La mayor parte de la API del DOM se centra en las propiedades de elementos específicos. En esta lección, solo veremos las propiedades más básicas para mostrar cómo funcionan en general.

En la práctica diaria, los programadores consultan constantemente la documentación para conocer las propiedades y métodos de los nodos y poder controlarlos.

Así se ve atributo HTML="valor":

Así se ve propiedad del DOM:valor:

Atributos

Cada etiqueta HTML tiene atributos. Algunos son comunes a todas las etiquetas, otros son específicos de etiquetas particulares:

<a id="aboutPage" href="/pages/about" class="simple">Acerca de</a>

En el ejemplo anterior, los atributos id y class se pueden usar con cualquier etiqueta. El atributo href solo se puede usar con algunas etiquetas, como la etiqueta <a>.

Cuando el navegador carga el HTML, se construye el DOM basado en él. Durante el procesamiento, cada etiqueta se convierte en un nodo y los atributos se convierten en propiedades de ese nodo. Por lo general, los nombres de los atributos y las propiedades de los nodos son iguales:

// <a id="aboutPage" href="/pages/about" class="simple">Acerca de</a>
const el = document.querySelector('#aboutPage');
el.id; // aboutPage
el.href; // https://codica.la/nosotros

Existen algunas excepciones. Por ejemplo, el atributo class se corresponde con la propiedad className. Hay algunas formas adicionales de trabajar con clases.

Puede haber cualquier cantidad de clases, que se especifican como una cadena de texto normal. Por lo tanto, si necesitamos cambiar esa lista, tendremos que trabajar con cadenas de texto, lo cual es muy incómodo.

Aquí es cómo se puede hacer con el árbol DOM:

// El elemento con esta id tiene una clase "simple"
const el = document.querySelector('#aboutPage');
el.classList.add('page');
el.classList.remove('simple');
// Después de todos los cambios
el.className; // page

También hay métodos adicionales:

• El método el.classList.contains("class") verifica si el elemento tiene la clase especificada y devuelve true o false.
• El método el.classList.toggle("class") verifica si la clase está presente. Si está presente, la elimina; si no está presente, la agrega.

La nomenclatura no es la única diferencia entre atributos y propiedades. Hay muchas más diferencias y no siempre son obvias. Aquí hay algunas de ellas:

1. El atributo siempre es una cadena de texto, pero la propiedad no siempre lo es. Por ejemplo:

   <textarea rows="5"></textarea>
   

   El valor de la propiedad rows del elemento correspondiente en el árbol DOM será un número.

2. Los atributos no distinguen entre mayúsculas y minúsculas:

   <a Id="aboutPage" hrEf="/pages/about" CLASS="simple">Acerca de</a>
   

   No se recomienda escribir así, pero es útil saber este hecho.

3. El atributo siempre está presente en HTML y, por lo tanto, se puede acceder a él a través de innerHTML. Sin embargo, muchas propiedades no tienen atributos correspondientes. Por ejemplo, la etiqueta <a> tiene la propiedad hash, pero no tiene un atributo correspondiente.

Como vimos anteriormente, el atributo y la propiedad no son lo mismo. Por lo tanto, hay un conjunto de métodos para controlar los atributos:

• el.hasAttribute(name) - verifica si el atributo está presente.
• el.getAttribute(name) - obtiene el valor del atributo.
• el.setAttribute(name, value) - establece el atributo.
• el.removeAttribute(name) - elimina el atributo.
• el.attributes - devuelve una lista de atributos HTML.

// Los métodos funcionan con los atributos HTML
el.getAttribute('class');

Ten en cuenta que estos métodos trabajan con los atributos y sus nombres, no con las propiedades. También permiten no solo extraer los atributos, sino también cambiarlos. Surge una pregunta lógica: ¿cambiará el atributo si cambiamos la propiedad y viceversa?

Por lo general, la sincronización funciona de la siguiente manera: cuando se cambia el atributo, la propiedad se actualiza automáticamente.

Pero hay excepciones. No se debe concluir de estas tesis que se debe intentar trabajar a través de los atributos. Por el contrario, se debe intentar trabajar con las propiedades del árbol DOM. Los atributos solo se deben usar para leer el estado que estaba en el DOM en el momento de la inicialización, es decir, al analizar el HTML:

<a id="aboutPage" href="/pages/about" class="simple">Acerca de</a>

const el = document.querySelector('#aboutPage');
el.setAttribute('class', 'page');
el.className; // page
el.getAttribute('class'); // page

A diferencia de las propiedades, el valor del atributo siempre coincide con lo que vemos en HTML. Sin embargo, las propiedades a veces se normalizan:

<!-- En este momento, el navegador está abierto en https://app.codica.la -->
<a id="link-to-courses" href="/courses">Cursos</a>

const el = document.querySelector('#link-to-courses');
el.href; // https://app.codica.la/courses
el.getAttribute('href'); // /courses

Los atributos no estándar nunca se convierten en propiedades de los elementos del árbol DOM correspondientes. Por ejemplo, si agregamos el atributo href a la etiqueta p, será ignorado. Sin embargo, aún podremos extraerlo usando getAttribute.

Para trabajar con propiedades personalizadas en HTML, hay un atributo especial reservado llamado data-*. En lugar del asterisco, puede haber cualquier palabra:

<a href="#" data-toggle="tab">Mis proyectos</a>

Estos atributos se utilizan activamente en complementos de JavaScript y permiten no depender de las clases. Están disponibles en los elementos del DOM a través de la propiedad especial dataset:

console.log(el.dataset.toggle); // => tab

Dentro del objeto dataset, el nombre de cada propiedad es la cadena después de data- en el atributo. Si el nombre contiene un guión, se elimina y la siguiente letra se convierte en mayúscula:

<a href="#" data-nav-toggle="tab">Mis proyectos</a>

console.log(el.dataset.navToggle); // => tab

Propiedades

Dependiendo del tipo de elemento, cambia el conjunto de propiedades, además de aquellas heredadas de Node y Element.

Para conocer la lista de estas propiedades, podemos consultar la especificación. Están descritas en un formato especial que es fácil de entender:

// HTMLLinkElement – simplemente el nombre de la interfaz
// HTMLElement – tipo padre del cual se heredan propiedades y métodos
// attribute – designación de un atributo específico, su tipo y nombre
interface HTMLLinkElement : HTMLElement {
  // La última palabra en cada línea es el nombre de la propiedad en el objeto
  attribute USVString href;
  attribute DOMString? crossOrigin;
  attribute DOMString rel;
  attribute RequestDestination as; // (default "")
  readonly attribute DOMTokenList relList;
  attribute DOMString media;
  attribute DOMString nonce;
  attribute DOMString integrity;
  attribute DOMString hreflang;
  attribute DOMString type;
}

Al igual que con la navegación por el árbol DOM, no es necesario memorizar todas las particularidades del comportamiento de los atributos y propiedades. Por lo general, la comprensión llega con la práctica durante los experimentos mediante prueba y error.