Atributos y propiedades en el DOM

La manipulación de atributos y propiedades del DOM en JavaScript permite cambiar dinámicamente elementos HTML. Con métodos como getAttribute() o propiedades como element.src, podés modificar enlaces, imágenes y contenidos en tiempo real para crear experiencias web más interactivas.

1. ¿Qué es el DOM?

El DOM (Document Object Model) es una representación en forma de objetos del documento HTML.

Cuando un navegador como Google, parsea (abre o lee) el documento HTML, el navegador crea este DOM, donde las etiquetas HTML (como <div>, <a>) se convierten en nodos (objetos JavaScript) de elemento, el texto en nodos de texto, nodos de atributos, etc. 

JavaScript puede acceder y manipular estos nodos del DOM para cambiar el contenido, la estructura o el estilo de una página web. 

¿Cómo funciona?

1. Parsing HTML: Cuando un navegador web carga una página, «lee» el código HTML y lo interpreta para entender su estructura. 
2. Creación del DOM: Este proceso de interpretación crea un modelo en memoria del documento: el DOM. 
3. Nodos:
   • Nodos de elemento: Cada etiqueta HTML (como <div>, <p>, <img>) se convierte en un nodo de tipo elemento. 
   • Nodos de texto: El texto dentro de las etiquetas se convierte en nodos de texto. 
   • Nodos de atributos: Los atributos (como href en <a> o src en <img>) son propiedades de los nodos de elemento. 
4. Acceso con JavaScript: Una vez que el DOM está construido, JavaScript puede usar el modelo de objetos del documento para interactuar con la página web. Puede:
   • Acceder: a nodos específicos. 
   • Leer: el contenido o los atributos de esos nodos. 
   • Modificar: el contenido HTML o las propiedades CSS, cambiando así la página. 

2. ¿Qué son los atributos HTML en el DOM?

En el contexto del Document Object Model (DOM), los atributos HTML son las declaraciones de texto iniciales que definen la configuración, estado, o información meta de un elemento HTML, y que son accesibles directamente en el objeto DOM a través de métodos específicos.

Piensa en los atributos como la receta original que el desarrollador escribió en el archivo .html. Cuando el navegador «cocina» esta receta y crea el objeto DOM (el plato final), los atributos siguen ahí, adheridos al objeto, representando la fuente de la configuración inicial.

Ejemplo HTML:

<input type="text" value="Valor Inicial" disabled>Lenguaje del código: HTML, XML (xml)

Aquí, type, value, y disabled son atributos.

2.1. Principales características de los atributos en el DOM

Aunque coexisten con las propiedades DOM, los atributos mantienen características propias que los diferencian y los hacen esenciales para ciertos casos de uso:

2.1.1. Son cadenas de texto (Strings)

Siempre son string: El valor de un atributo, incluso si representa un número o un booleano, siempre se almacena y se recupera como una cadena de texto.

• Ejemplo: Si tienes <input required>, el valor del atributo required es la cadena vacía o a veces required, pero al usar getAttribute('required'), siempre obtendrás un string.

2.1.2. Acceso mediante métodos específicos

La forma estándar y «pura» de interactuar con ellos es a través de los siguientes métodos:

• elem.hasAttribute(nombre) – para comprobar si existe.
• elem.getAttribute(nombre) – para obtener el valor.
• elem.setAttribute(nombre, valor) – para dar un valor.
• elem.removeAttribute(nombre) – para eliminar el atributo.
• elem.attributes es una colección de todos los atributos.

2.1.3. Representan la configuración inicial

Valores iniciales: Para muchos elementos, getAttribute() a menudo devuelve el valor original definido en el HTML, no el valor actual modificado por el usuario o por JavaScript.

• Caso típico: Si un usuario escribe «Juan» en un campo <input value="Invitado">, el input.value será "Juan", pero input.getAttribute('value') seguirá siendo "Invitado"

Diferencia clave: Por esta razón, la propiedad DOM (.value, .checked, .href) se considera la «fuente de verdad» del estado actual, mientras que el atributo mantiene la referencia a la configuración del HTML.

2.1.4. Son insensibles a mayúsculas/minúsculas (Generalmente)

Los nombres de los atributos HTML (por ejemplo, id, class, href) no distinguen entre mayúsculas y minúsculas en HTML. Puedes escribir <div CLASS="test"> y funcionará.

Sin embargo, en el DOM y JavaScript, la convención es utilizar minúsculas para los métodos de acceso: getAttribute('class').

2.1.5. Esenciales para atributos no estándar (data-*)

Atributos de datos: Los atributos personalizados (data-) son atributos HTML puros. Aunque JavaScript ofrece la propiedad element.dataset para un acceso más limpio (camelCase), la forma subyacente de manipularlos sigue siendo un manejo de atributos HTML.

Atributo HTML	Propiedad DOM asociada	Uso Recomendado
data-user-id	element.dataset.userId	Propiedad dataset (más limpio)
Cualquier atributo custom	N/A	Métodos getAttribute/setAttribute

2.2 Modificación a nivel de atributo HTML (Interfaz Attr)

Para modificar un elemento tratando la información exactamente como fue escrita en el HTML, usás la interfaz Attr del DOM a través de los métodos del objeto Element.

Estas son las propiedades y métodos principales para acceder y modificar el valor de cadena de texto de un atributo:

Función/Método	Descripción	Cuándo Usarlo
element.getAttribute('nombre')	Obtiene el valor del atributo especificado como una cadena de texto (String).	Cuando necesitas el valor tal cual está en el HTML, especialmente para atributos que no tienen una propiedad correspondiente obvia o para atributos data-*.
element.setAttribute('nombre', 'valor')	Crea un nuevo atributo o cambia el valor actual del atributo especificado.	Para configurar atributos personalizados (data-*) o para modificar atributos donde no importa la sincronización con el estado vivo (ej. id, tabindex).
element.removeAttribute('nombre')	Elimina completamente el atributo del elemento HTML.	Para «desactivar» atributos booleanos como disabled o readonly sin usar la propiedad.
element.hasAttribute('nombre')	Devuelve un booleano (true/false) indicando si el atributo existe en el HTML.	Para verificar la presencia de un atributo.

Ejemplo con Atributos:

const imagen = document.querySelector('img');

// 1. Obtener Atributo:
const srcInicial = imagen.getAttribute('src'); // Devuelve la cadena de texto del 'src' inicial

// 2. Modificar Atributo:
imagen.setAttribute('alt', 'Descripción de la nueva imagen');

// 3. Eliminar Atributo:
// imagen.removeAttribute('width'); // Quita el atributo width si existe
Lenguaje del código: JavaScript (javascript)

3. ¿Qué son las propiedades DOM?

Las propiedades DOM son valores asociados a los objetos JavaScript que representan los elementos HTML (recuerda, como dijimos en el punto 1, cuando un navegador carga el documento HTML, crea nodos (objetos DOM) de sus elementos).

Son, esencialmente, los miembros (variables y métodos) de los objetos que el navegador crea en la memoria al parsear el HTML.

Piensa en las propiedades DOM como la interfaz en tiempo real de un elemento. Cuando el navegador crea un objeto DOM para una etiqueta HTML, toma los atributos iniciales y los mapea a propiedades internas del objeto, creando una representación más rica y dinámica lista para ser manipulada con JavaScript.

3.1. Principales características de las propiedades DOM

Las propiedades DOM son la forma preferida para la manipulación dinámica debido a sus características superiores:

3.1.1. Tipos de datos correctos y variados

A diferencia de los atributos (que siempre son strings), las propiedades DOM mantienen el tipo de dato que tiene sentido para la interfaz:

• Booleanos: Propiedades como element.checked o element.disabled devuelven y aceptan true o false.
• Números: Propiedades como element.tabIndex manejan valores numéricos directamente.
• Objetos: Propiedades como element.style o element.classList no son strings, sino objetos complejos con sus propios métodos.

3.1.2. Reflejan el estado actual (Tiempo real)

Esta es su característica más crucial: las propiedades DOM reflejan el valor actual del elemento, incluso después de la interacción del usuario.

• Ejemplo con value: Si el usuario escribe «Nueva York» en un campo de texto, la propiedad input.value devolverá «Nueva York», a diferencia de getAttribute('value') que podría devolver el valor por defecto escrito en el HTML.
• Ejemplo con URLs: Propiedades como element.href o element.src devuelven la URL completa y resuelta (absoluta), incluso si el atributo HTML solo contenía un valor relativo (page.html).

3.1.3. Son la interfaz estándar de JavaScript

Sintaxis sencilla: Se accede y se modifica directamente usando la notación de punto, lo que las hace más rápidas de escribir y leer que los métodos de atributo:

// Acceso y Modificación con Propiedad
element.id = 'nuevoID';
element.id; // 'nuevoID'Lenguaje del código: JavaScript (javascript)

Alto Rendimiento: Generalmente, manipular las propiedades DOM es más rápido que usar los métodos setAttribute() y getAttribute(), especialmente en operaciones repetitivas.

3.1.4. Distinción entre mayúsculas/minúsculas (CamelCase)

Los nombres de las propiedades DOM sí distinguen entre mayúsculas y minúsculas y siguen la convención camelCase en JavaScript.

• El atributo HTML es tabindex.
• La propiedad DOM es element.tabIndex.
• El atributo HTML es class.
• La propiedad DOM relacionada para modificar clases es el objeto element.classList.

3.2. Modificación a nivel de propiedad del objeto DOM (El Estándar)

Estas son tu interfaz principal y favorita. Siempre que una propiedad DOM exista para un atributo, úsa la propiedad.

Son más rápidas, tienen el tipo de dato correcto (booleanos, números) y reflejan el estado actual y en tiempo real del elemento.

Propiedades clave que debes manejar:

Propiedad	Tipo de Dato	Observación Clave
element.id	string	Lee/Escribe el atributo id.
element.className	string	Lee/Escribe la clase como un string. (Mejor usa classList para modificar).
element.href	string	En enlaces, devuelve la URL completa y resuelta, no solo el valor del HTML.
element.src	string	En imágenes o scripts, también devuelve la URL completa y resuelta.
element.value	string	El valor actual en tiempo real de un <input>, <textarea>, o <select>. ¡Es la más importante!
element.checked	boolean	El estado booleano de un checkbox o radio button. (¡Mejor que getAttribute('checked')!)
element.disabled	boolean	El estado de desactivación. true o false.

Ejemplo de acceso y modificación con propiedades:

const myLink = document.getElementById('my-anchor');
const myInput = document.getElementById('age-input');

// 1. Acceso (Lectura)
console.log(myLink.href);   // Muestra la URL completa: "https://www.ejemplo.com/pagina"

// 2. Modificación (Escritura)
myLink.href = 'https://www.otrodominio.com/nuevo'; // El DOM y la interfaz se actualizan.
myInput.value = '25'; // Establece el nuevo valor del campo de entrada.
myInput.disabled = true; // Deshabilita el input. ¡Usando un booleano, no un string!Lenguaje del código: JavaScript (javascript)

EN RESUMEN: Las propiedades DOM son la capa de JavaScript optimizada para la interactividad. Permiten que tu código acceda y modifique el estado dinámico del elemento de la manera más natural y eficiente para el lenguaje.

4. Atributos (Métodos) vs. Propiedades (Directas)

La principal diferencia radica en si se interactúa con el valor escrito en el HTML o con el estado dinámico en la memoria (el objeto DOM).

Característica	Métodos de Atributo (getAttribute, etc.)	Propiedades DOM Directas (element.value, etc.)
Objetivo	Acceder/Modificar el valor literal en el código HTML.	Acceder/Modificar el estado actual y dinámico del objeto DOM en memoria.
Tipo de Dato	Siempre string.	Maneja el tipo de dato correcto (string, boolean, number, object).
Reflejo de Estado	A menudo refleja el valor inicial del HTML (especialmente en inputs).	Siempre refleja el valor actual y en tiempo real (después de la interacción del usuario).
Casos de Uso	Atributos personalizados (data-*), atributos que no tienen propiedad directa (colspan).	Casi todos los casos estándar: valores de formularios, URLs, ID, clases.

4.1. Métodos de atributo: Accediendo al HTML puro

Estos métodos interactúan directamente con la tabla de atributos del elemento, tal como se define en el código HTML.

Método	Propósito	Diferencia Clave con Propiedades DOM
element.getAttribute(nombre)	Leer el valor literal del atributo.	Ignora el estado dinámico. En un <input>, siempre devuelve el valor inicial (si lo tiene), no lo que el usuario escribió.
element.setAttribute(nombre, valor)	Escribir o crear un atributo en el HTML del elemento.	Siempre establece el valor como un string. Es necesario para atributos personalizados (data-*) o para forzar la escritura de un atributo HTML.
element.removeAttribute(nombre)	Eliminar completamente el atributo del elemento HTML.	No tiene un equivalente directo con propiedades. Se usa para eliminar configuraciones binarias (disabled, required).
element.hasAttribute(nombre)	Verificar si el atributo existe en el HTML.	Las propiedades no tienen un método equivalente directo; generalmente se comprueba si la propiedad no es null o undefined.

4.2. Propiedades DOM directas: Accediendo al estado dinámico

Estas son propiedades del objeto JavaScript que encapsulan la funcionalidad del elemento de una manera mucho más útil para la lógica de la aplicación.

Propiedad	Propósito	Diferencia Clave con Métodos de Atributo
element.propiedad (Lectura)	Leer el estado actual.	Devuelve el valor en tiempo real (lo que el usuario ve o modificó) con el tipo de dato correcto.
element.propiedad = valor (Escritura)	Establecer el estado actual.	Usa el tipo de dato correcto (true/false para checked/disabled, no string). Más rápido y limpio.

4.3. Ejemplos que marcan sus diferencias:

4.3.1. Ejemplo usando un input: value (Propiedad) vs. value (Atributo)

El elemento <input> de un formulario es único porque tiene un estado interno que cambia constantemente con la interacción del usuario.

Ejemplo usando el atributo HTML: input.getAttribute('value')

Este método ignora cualquier interacción del usuario y solo consulta el texto original de tu código HTML.

Código y resultado:

<input id="myInput" value="Inicial">

const input = document.getElementById('myInput');

// 1. El usuario interactúa: Escribe "Cambiado por el usuario"

// 2. Lectura del Atributo
console.log(input.getAttribute('value')); 
// ❌ Salida: "Inicial"
Lenguaje del código: JavaScript (javascript)

Explicación: La configuración inicial

• value="Inicial" es un atributo de HTML. Su propósito es definir el valor predeterminado o inicial que tendrá el campo cuando la página se cargue.
• input.getAttribute('value') le dice al navegador: «Dame el valor literal que está escrito en el atributo HTML.»
• Resultado: El navegador te devuelve "Inicial". El cambio que hizo el usuario en la pantalla ("Cambiado por el usuario") se registra en la Propiedad DOM, no en el atributo HTML. El atributo permanece estático, como una nota permanente sobre la configuración de origen del campo.

Ejemplo usando La Propiedad DOM: input.value

Esta propiedad es el mecanismo que JavaScript utiliza para acceder y modificar el estado del campo tal como aparece actualmente en la pantalla.

Código y resultado

<input id="myInput" value="Inicial">

const input = document.getElementById('myInput');

// 1. El usuario interactúa: Escribe "Cambiado por el usuario"

// 2. Lectura de la Propiedad DOM
console.log(input.value); 
// ✅ Salida: "Cambiado por el usuario"
Lenguaje del código: JavaScript (javascript)

Explicación: El estado en tiempo real

• input.value es una propiedad DOM. Es una parte del objeto JavaScript del <input> que está diseñada específicamente para almacenar el contenido actual del campo de texto.
• Mecanismo de Sincronización: El navegador está constantemente sincronizando el texto que el usuario está escribiendo en el campo visible con el valor de la propiedad input.value.
• Resultado: La propiedad input.value refleja la realidad actual de la interfaz: "Cambiado por el usuario". Si usas esta propiedad para establecer el valor (input.value = "Nuevo" ), ese nuevo valor también aparecerá inmediatamente en la pantalla.

Conclusión y la Regla de Oro de los Formularios 🥇

Cuando trabajas con formularios, tu objetivo es casi siempre manipular lo que el usuario está viendo o ha ingresado. Por lo tanto:

Para la lógica de formularios, la Propiedad DOM element.value es la fuente de verdad que debes usar para leer y escribir. NUNCA uses getAttribute() o setAttribute() para los valores de los inputs.

4.3.2. Ejemplo con las URLs: Propiedad vs. Atributo

1. Preparación (El Contexto HTML)

Imaginemos que tu página está alojada en la siguiente ruta: https://www.ejemplo.com/usuarios/perfil.html

Y en el código HTML tienes este enlace:

<a id="miLink" href="./pagina-relativa.html">Ir a otra página</a>Lenguaje del código: HTML, XML (xml)

2. Acceso Mediante el Atributo (Valor Literal)

Cuando usas el método de atributo, obtienes exactamente lo que está escrito en el HTML: el valor literal y relativo.

const miLink = document.getElementById('miLink');

// 1. Lectura del Atributo
let atributoHref = miLink.getAttribute('href');

console.log("Valor del Atributo (Literal):", atributoHref);
// Salida: "./pagina-relativa.html"
Lenguaje del código: JavaScript (javascript)

Explicación:

• miLink.getAttribute('href'): Accede a la tabla de atributos del elemento DOM y devuelve el valor que fue escrito por el desarrollador en el HTML.
• Significado: Es útil si, por alguna razón, solo necesitas saber cómo se escribió el enlace originalmente (por ejemplo, para validaciones internas), pero es inútil si necesitas hacer una petición a esa URL.

3. Acceso Mediante la Propiedad DOM (Valor Resuelto)

Cuando usas la propiedad DOM directa, el navegador te ofrece el valor resuelto. Ha tomado la ruta relativa y la ha combinado con el origen de la página para crear una URL absoluta (completa).

const miLink = document.getElementById('miLink');

// 2. Lectura de la Propiedad DOM
let propiedadHref = miLink.href;

console.log("Valor de la Propiedad (Absoluta):", propiedadHref);
// Salida: "https://www.ejemplo.com/usuarios/pagina-relativa.html"
Lenguaje del código: JavaScript (javascript)

Explicación:

• miLink.href: Accede a la propiedad del objeto DOM. El navegador internamente calcula la URL completa utilizando la ubicación actual del documento.
• Significado: Es el valor listo para ser usado por JavaScript, ya sea para abrir la URL, realizar una petición fetch, o pasarla a otra función. Esto te ahorra la tarea de tener que construir la URL absoluta tú mismo.

4. Conclusión: ¿Por qué la Propiedad Gana?

En este caso, la Propiedad DOM es un servicio que te ofrece el navegador:

Tarea	Atributo (getAttribute)	Propiedad (.href)
Acceso al Valor	Obtiene el input del desarrollador.	Obtiene la salida procesada y lista para la web.
Uso en Lógica	Requiere lógica adicional para resolver la ruta.	No requiere trabajo adicional. Es la URL final.
Simplicidad	Más verboso (.getAttribute(...)).	Más simple y directo (.href).

La misma lógica se aplica a las propiedades element.src (para imágenes, scripts) y a otros elementos que contienen referencias a recursos externos. La Propiedad DOM siempre te dará la URL absoluta y canónica.