Skip to main content
1 de 2
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

Esta es una pregunta interesante! Para entender la respuesta necesitamos diferenciar entre dos conceptos que tienden a confundirse:

En un documento HTML/XML los elementos que lo componen se declaran entre los símbolos < y >, es lo que llamamos generalmente etiquetas. Estos elementos pueden contener otros elementos dentro, en el cuerpo (body), pero también pueden tener atributos:

<mi-etiqueta atributo1="valor1">
  <otra-etiqueta />
</mi-etiqueta>

Cuando trabajas con un documento HTML/XML en Javascript, lo que generalmente haces es trabajar con su DOM: una representación de ese documento donde cada elemento es un objeto. Por tanto, cada atributo de un elemento se mapea a una propiedad de un objeto. Podríamos decir que el documento HTML se usa para inicializar el árbol DOM.

Por tanto tenemos un documento donde hay elementos con atributos y un árbol donde hay objetos con propiedades.

Entonces, ¿cuál es la diferencia real entre atributos y propiedades? Veamos un ejemplo en funcionamiento:

const elemento = document.getElementById("identificador");
console.log("atributo href", elemento.getAttribute("href"));
console.log("propiedad href:", elemento.href);
console.log("propiedad class:", elemento.class);
console.log("propiedad className:", elemento.className);
 console.log("atributo style", elemento.getAttribute("style"));
console.log("propiedad style:", elemento.style);
<a id="identificador" href="/url" class="clase1 clase2" style="border:solid black 1px">Texto</a>

Como puedes ver, hay cierto "procesamiento" de los valores de los atributos. Y, aunque en general cualquier cambio en las propiedades se refleja en los atributos y viceversa (usando .setAttribute(...)), esto no es 100% así, como vamos a ver:

Frameworks como Angular usan un truco para manejar los estilos de cada componente de manera individual sin riesgo de afectar a otras partes del documento. Imagina que definimos un componente que está compuesto de div y queremos que tenga el fondo negro:

div {
  background-color: black;
  color: yellow;
}
<div>
Mi componente 1
</div>

Ahora, sin saber que ese componente existe, otro desarrollador crea para la misma página otro que quiere con fondo blanco. Los estilos colisionarían! La solución es usar atributos "inventados" con valores aleatorios que se generan para cada componente para añadir una mayor especifidad a la regla de CSS:

const tres= document.getElementById("tres");

tres.componente2_a9df="1";

setTimeout(() => {
  tres.setAttribute("componente1_3tt34", "1");
}, 3000);
div[componente1_3tt34] {
  background-color: black;
  color: yellow;
}

div[componente2_a9df] {
  background-color: white;
  color: blue
}
div {
  width: 50%;
  height: 50px;
}
<div componente1_3tt34>
Mi componente 1
</div>

<div componente2_a9df>
Mi componente 2
</div>

<div id="tres">
Mi componente 3
</div>

Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92