Atributos y Propiedades

Dominar JavaScript requiere entender cómo interactúa con el Document Object Model (DOM). Este tutorial cubre los atributos y propiedades del DOM, y explica cómo leerlos, modificarlos y sincronizarlos para manipular páginas web de forma dinámica.

Introducción al DOM en JavaScript

El DOM representa una página web como un árbol jerárquico de objetos, lo que permite que lenguajes de programación como JavaScript interactúen con el contenido, el estilo y la estructura de la página. Cada elemento del documento HTML se refleja como un objeto en el DOM, y estos objetos tienen propiedades y atributos que pueden manipularse con JavaScript.

Diferencias entre Atributos y Propiedades

Aunque los términos "atributos" y "propiedades" se usan con frecuencia de forma intercambiable, tienen significados distintos en el contexto del DOM:

• Atributos: Se definen en el código HTML. Proporcionan información adicional sobre los elementos HTML. Los atributos siempre son string y se accede a ellos mediante métodos como getAttribute() y setAttribute().
• Propiedades: Son las características de los objetos del DOM que representan elementos HTML. Las propiedades pueden ser de cualquier tipo de dato, como boolean, string o número, y se accede a ellas directamente mediante la notación de punto.

En resumen: un atributo es lo que escribiste en el código fuente HTML; una propiedad es lo que el navegador lo convirtió y expone en el objeto JavaScript. Parecen lo mismo en casos simples como id, pero son dos cosas diferentes.

Nota sobre la sincronización: Para la mayoría de los atributos estándar (como id, class), cambiar el atributo actualiza la propiedad correspondiente y viceversa. Sin embargo, la sincronización no está garantizada en todos los casos, y algunos atributos importantes la rompen deliberadamente (consulta Cuándo falla la sincronización más abajo).

Ejemplo de código: Acceder a atributos y propiedades

<!-- snippet: html-result -->

<div id="demo" class="sample" data-level="1">Hello, World!</div>
<br />
<div>first getAttributes result (data-level): <span id="1"></span></div>
<div>className property: <span id="2"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("1");
  const span2 = document.getElementById("2");

  // Accessing an attribute
  let classAttribute = demoElement.getAttribute("data-level");  // Output: "1"
  span1.innerHTML = classAttribute;
  
  // Accessing a property
  // Note: 'class' is a reserved keyword in JS, so the property is named 'className'
  const classNameProperty = demoElement.className;  // Output: "sample"
  span2.innerHTML = classNameProperty;
</script>

Los Métodos de Atributo

Cada elemento expone cuatro métodos estándar para trabajar con atributos por nombre. Siempre manejan string, y se corresponden directamente con el código fuente HTML:

Los nombres de atributo son insensibles a mayúsculas (id e ID son lo mismo), y cada valor se lee como string, aunque parezca un número.

Establecer Atributos

Usa el método setAttribute() para añadir un nuevo atributo o cambiar el valor de un atributo existente en un elemento HTML.

Ejemplo de código: Establecer atributos

<!-- snippet: html-result -->

<div id="demo" class="sample">Hello, World!</div>
<br />
<div>className property after change: <span id="span1"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("span1");
  
  // Changing the attribute
  demoElement.setAttribute("class", "changed");
  // The property updates automatically due to attribute-property synchronization
  span1.innerHTML = demoElement.className;
</script>

Este fragmento de código cambia el atributo class del elemento div a "changed".

Eliminar Atributos

Para eliminar completamente un atributo de un elemento HTML, usa el método removeAttribute(). Esto es útil cuando deseas despojar a un elemento de un comportamiento o estilo específico definido por un atributo.

Combínalo con hasAttribute() para actuar de forma condicional:

if (demoElement.hasAttribute("disabled")) {
  demoElement.removeAttribute("disabled");
}

Reasignar Propiedades

Las propiedades de los elementos del DOM se pueden reasignar fácilmente de forma directa usando la notación de punto, lo que permite una manipulación más flexible de las características del elemento.

Ejemplo de código: Modificar propiedades

<!-- snippet: html-result -->

<div id="demo" class="sample">Hello, World!</div>
<br />
<div>className property after change: <span id="span1"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("span1");

  // Changing the property
  // Note: 'class' is a reserved keyword in JS, so the property is named 'className'
  demoElement.className = "changed";
  span1.innerHTML = demoElement.className;
</script>

Este ejemplo cambia la propiedad className del elemento div, demostrando cómo se pueden usar las propiedades para controlar las características de los elementos de forma dinámica.

Cuándo Falla la Sincronización Atributo–Propiedad

El cómodo mapeo uno a uno tiene excepciones que debes conocer, o pasarás horas depurando.

La propiedad value de los inputs

El atributo value contiene el valor inicial (por defecto) definido en el HTML. La propiedad value contiene el valor actual que el usuario está escribiendo. Una vez que el usuario edita el campo, ambos divergen: la propiedad cambia, el atributo no.

// <input id="name" value="initial">
const input = document.getElementById("name");
// user types "Alice" into the field...

input.getAttribute("value"); // "initial"  — still the HTML default
input.value;                 // "Alice"     — the live, current value

La misma idea aplica a <input type="checkbox">: el atributo checked es el estado por defecto, mientras que la propiedad checked indica si está marcado en este momento.

La propiedad href de los enlaces

Para un <a href="/page">, getAttribute("href") devuelve exactamente lo que escribiste ("/page"), pero la propiedad href devuelve la URL absoluta completamente resuelta ("https://example.com/page").

// <a id="link" href="/page">
const link = document.getElementById("link");
link.getAttribute("href"); // "/page"
link.href;                 // "https://example.com/page"

Regla general: usa los métodos de atributo cuando necesites el valor exacto tal como fue escrito; usa la propiedad cuando necesites el valor activo y procesado por el navegador.

Atributos Boolean

Algunos atributos HTML — disabled, checked, required, readonly, selected — son boolean: su mera presencia significa true, independientemente del valor. disabled="" y disabled="false" deshabilitan el elemento igualmente.

En JavaScript, la propiedad correspondiente es un boolean real, que es la forma más limpia de alternarlos:

button.disabled = true;   // adds the attribute, disables the button
button.disabled = false;  // removes the attribute, enables it

Evita usar setAttribute("disabled", false) — como el atributo está presente, el elemento permanece deshabilitado. En su lugar, establece la propiedad.

Atributos de Datos Personalizados

Los desarrolladores pueden definir atributos personalizados con el prefijo data-, que es la forma estándar y preparada para el futuro de adjuntar información extra a un elemento sin inventar atributos no estándar. Se leen y escriben a través de la propiedad dataset en lugar de getAttribute.

La nomenclatura convierte entre kebab-case en HTML y camelCase en JavaScript: data-author se convierte en dataset.author, y data-order-status se convierte en dataset.orderStatus. También puedes escribir en dataset para crear o actualizar el atributo data-* subyacente.

Ejemplo de código: Atributos de datos personalizados

<!-- snippet: html-result -->

<div id="demo" data-author="Jane Doe" data-year="2022">Information Panel</div>
<br />
<div>author: <span id="1"></span></div>
<div>year: <span id="2"></span></div>
<script>
  const element = document.getElementById("demo");
  const span1 = document.getElementById("1");
  const span2 = document.getElementById("2");
  span1.innerHTML = element.dataset.author;
  span2.innerHTML = element.dataset.year;
</script>

Conclusión

Entender eficazmente los atributos y propiedades del DOM te permite manipular los elementos de la página de forma dinámica y crear aplicaciones más ricas e interactivas. Recuerda la distinción fundamental: los atributos son los valores string de tu código fuente HTML, mientras que las propiedades son los valores activos y tipados en el objeto DOM — y algunos atributos (value, href, los boolean) mantienen deliberadamente ambos separados.

Para profundizar, explora estos capítulos relacionados:

• Modificar el documento — crear, insertar y eliminar elementos.
• Propiedades de nodo: tipo, etiqueta y contenidos — leer y cambiar el texto y el HTML de los elementos.
• Trabajar con estilos en el DOM — manipular CSS mediante style y className.

Práctica