Atributos y Propiedades

Dominar JavaScript requiere comprender cómo interactúa con el Modelo de Objetos del Documento (DOM). Este tutorial cubre los atributos y propiedades del DOM, explicando cómo leer, modificar 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 en el documento HTML se refleja como un objeto en el DOM, y estos objetos tienen propiedades y atributos que pueden manipularse mediante JavaScript.

Diferencias entre Atributos y Propiedades

Aunque los términos "atributos" y "propiedades" a menudo se usan indistintamente, tienen significados distintos en el contexto del DOM:

• Atributos: Estos se definen en el código HTML. Proporcionan información adicional sobre los elementos HTML. Los atributos son siempre cadenas de texto y se acceden mediante métodos como getAttribute() y setAttribute().
• Propiedades: Estas son las características de los objetos del DOM que representan elementos HTML. Las propiedades pueden ser de cualquier tipo de dato, como booleano, cadena o número, y se acceden directamente mediante la notación de punto.

Nota sobre la sincronización: Para ciertos atributos (como class, id, value y checked), los cambios en el atributo actualizan automáticamente la propiedad correspondiente, y viceversa. Sin embargo, esta sincronización bidireccional no está garantizada para todos los atributos.

Ejemplo de código: Acceso a atributos y propiedades

---

<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>

Result

Try it Yourself »

Manipulación de elementos del DOM

Comprender cómo manipular elementos del DOM es crucial para el desarrollo web dinámico. JavaScript ofrece varios métodos para interactuar tanto con atributos como con propiedades.

Establecer atributos

Utiliza el método setAttribute() para agregar un nuevo atributo o cambiar el valor de un atributo existente en un elemento HTML.

Ejemplo de código: Establecer atributos

---

<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>

Result

Try it Yourself »

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, utiliza el método removeAttribute(). Esto es útil cuando deseas quitar de un elemento un comportamiento o estilo específico definido por un atributo.

Ejemplo:demoElement.removeAttribute("class");

Reasignar propiedades

Las propiedades de los elementos del DOM pueden reasignarse fácilmente directamente mediante 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

---

<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>

Result

Try it Yourself »

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

Atributos de datos personalizados

Los desarrolladores también pueden definir atributos de datos personalizados con el prefijo data-, lo cual es especialmente útil para almacenar información adicional que no tiene ninguna representación visual.

Ejemplo de código: Atributos de datos personalizados

---

<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>

Result

Try it Yourself »

Conclusión

Comprender y utilizar de manera efectiva los atributos y propiedades del DOM puede mejorar significativamente tus capacidades como desarrollador de JavaScript. Al dominar estos conceptos, podrás manipular elementos de páginas web de forma dinámica y crear aplicaciones web más ricas e interactivas. Este conocimiento es crucial para cualquier desarrollador que busque avanzar en el campo del desarrollo web.

Práctica

¿Cuáles de las siguientes afirmaciones describen con precisión las diferencias entre atributos y propiedades en el DOM, según se explica en el tutorial de JavaScript?

Los atributos se definen en el HTML y solo pueden ser cadenas, mientras que las propiedades son representaciones de JavaScript de estos atributos y pueden ser de cualquier tipo.El método `getAttribute()` puede recuperar cualquier valor de atributo HTML como una cadena, mientras que el acceso directo a la propiedad puede devolver el atributo en su tipo original.Los atributos en el DOM pueden ser tanto cadenas como otros tipos, al igual que las propiedades.Todas las propiedades en el objeto DOM se sincronizan automáticamente con sus atributos correspondientes cuando se cambia cualquiera de ellos.Usar `setAttribute()` para modificar un atributo de un elemento DOM actualiza automáticamente la propiedad correspondiente si existe.