¿Por qué deberían las propiedades de HTML DOM reflejarse también en los atributos HTML DOM?

En este artículo se dice que uno de los motivos importantes para que las propiedades de HTML se reflejen de nuevo en el DOM es que los selectores de CSS dependen de los atributos, pero ¿por qué? Esto podría hacerse sin la reflexión basada en la especificación.

Para las personas que no saben de lo que estoy hablando, lea a continuación:

En los navegadores, los selectores de CSS dependen de los atributos para funcionar.

#myButton[someAttribute] { opacity: 0.5; font-weight: bold } 

Entonces, en nuestro JavaScript si cambiamos la propiedad de un elemento, eventualmente tenemos que reflejarlo en el HTML DOM así como así:

 // we have changed some property myButton.someAttribute= true; // but this is not adequate, we need to reflect as well myButton.setAttribute('someAttribute', ''); 

así que obtenemos esto:

  

no este botón no reflejado:

  

No todas las propiedades DOM se asignan a los atributos. Las que reflejan los atributos hacia y desde los atributos , lo hacen para mantener la paridad con el lenguaje del documento, en este caso, HTML, que solo tiene un concepto de atributos, que como ha señalado correctamente se basa en Selectores .

Si los selectores de atributos se asignan directamente a las propiedades de DOM sin que DOM discrimine entre las propiedades de los atributos y otros tipos de propiedades, los selectores de atributos como los siguientes coincidirán, aunque ninguno de ellos exista como atributos en HTML:

 [classList] [className] [dataset] [offsetLeft] [offsetTop] [offsetWidth] [offsetHeight] 

… así como también [someAttribute] elementos coincidentes con su someAttribute inexistente como propiedad incluso cuando no lo refleje con setAttribute() .

De hecho, esta es exactamente la razón por la que label[htmlFor] coincide incorrectamente con los elementos de label[for] en Internet Explorer 7, aunque el atributo for en HTML simplemente se solicita, no htmlFor : el DOM usa htmlFor para compensar el hecho de que es una palabra reservada en muchos idiomas, incluido JavaScript, el principal lenguaje de scripting DOM, que evita que se use como identificador de propiedad.

Los atributos y propiedades DOM no son equivalentes, pero están relacionados.

Los atributos están destinados a ser utilizados para inicializar las propiedades de DOM. Cuando se analiza el HTML, todos los atributos se usan para inicializar las propiedades DOM correspondientes. Si más adelante modifica un atributo con setAttribute o removeAttribute , también se actualiza la propiedad correspondiente (similar a recargar el HTML con el nuevo atributo).

Pero no va por el otro camino. La actualización de una propiedad no cambia el atributo correspondiente. Esta es la razón por la que puede asignar el .value una entrada, y ver esto reflejado en la pantalla del navegador, pero cuando mira el elemento en Developer Tools todavía ve el atributo value="whatever" . En algunos casos, esto tiene beneficios especiales: cuando hace clic en el botón Reset de un formulario, restablece todas las propiedades de value sus atributos de value .

EN MI HUMILDE OPINIÓN; Algunos atributos tienen una asignación de 1: 1 con sus respectivas propiedades en el DOM. La reflexión se realiza automáticamente para atributos comunes como id . También puede definir sus propios atributos (su HTML se considerará no válido, pero puede usar el doctype para validarlos). Supongo que debido a esta incertidumbre creada por los atributos deshonestos. Preferían asignar solo el atributo: propiedad que tiene un comportamiento y uso predecibles. Aún puede usar sus atributos personalizados en su CSS pero está en modo manual. Tienes que mantener tu s ** t juntos y reflejarlos tú mismo. Esta mentalidad del lejano oeste (libertad) es una de las cosas que hizo que la tecnología web fuera tan popular y fácil de usar. Puedes hacer las cosas como mejor te parezca. No lo recomiendo por razones de mantenimiento, pero podrías.

Su ejemplo utiliza un button , pero el artículo está utilizando la propiedad disabled pero con algo más que un botón. En un button , el navegador reflejará automáticamente los cambios en la propiedad disabled en el atributo, y viceversa, pero esto no ocurre con todos los elementos. Cambia tu ejemplo para usar un div y verás que necesitarías coordinar los dos manualmente si así lo deseas.

O para atributos personalizados, use data- atributos en su lugar. Si delete la propiedad de my_element.dataset , estoy bastante seguro de que el atributo también se eliminará.

Esto es para mantener el HTML y el DOM sincronizados, porque en algún momento los selectores de CSS verificarán el elemento DOM y dependerán de que los atributos sean precisos.

Si el DOM no es preciso, entonces el CSS tampoco será preciso. ¿Qué pasa si HTML no se molestó en reflejar los atributos en el DOM?

Digamos que el texto de un campo de entrada es inicialmente negro, y desea que el texto sea rojo cuando está desactivado. Ahora digamos que el usuario hizo algo y una función que usted escribió deshabilitó el campo de entrada a través de javascript.

Si HTML no reflejaba ese atributo ‘disabled’ de nuevo en el DOM, CSS NUNCA CONOCERía que el elemento estaba deshabilitado.

Entonces, el color del texto nunca se cambiaría a rojo. Recuerde, CSS verifica y confía en los atributos DOM. Si HTML no cambia los atributos DOM, para todos los cuidados de CSS, nada ha cambiado, por lo que todo seguirá igual.

Para una analogía menos técnica, digamos que CSS es Batman, HTML es el Departamento de Policía de Gotham, un Atributo es la señal de murciélago, y el DOM es el cielo.

Batman (css) comprueba constantemente el cielo (dom) para ver si el Departamento de Policía de Gotham está mostrando su luz (atributo) de bat-luz (html). Si hubo algún evento (un atributo cambiado) que sucedió en Gotham, donde el Departamento de Policía de Gotham (html) necesitaba ayuda de Batman (css), pero simplemente no se molestaron en enviarle una actualización a través del cielo (dom) con el bat-signal (actualización de atributos), Batman nunca sabría que hay un trabajo que debe hacerse.

Quiero decir que es un súper héroe increíble, así que eventualmente lo descubriría, pero lamentablemente, CSS no es Batman.

El artículo habla sobre elementos personalizados y toma el ejemplo de un elemento

con su comportamiento natural para algunas propiedades, como oculto o disabled .

Entonces, antes que nada, no tome la oración que menciona como una orden de su dios, porque no lo es.

Simplemente, si tiene una aplicación con algo de CSS que usa la propiedad disasbled para un estilo específico, tenga en cuenta que, si desea:

  1. crear algunos elementos personalizados
  2. manipular sus atributos a través de Javascript, incluido el disasbled
  3. vea el css aplicado para propiedad disasbled de elementos personalizados que está manipulando

Entonces, sí, deberás reflejar de nuevo a DOM

Bueno, esta es la primera pregunta que estoy respondiendo, pero lo intentaré de cualquier manera.

Para ser honesto, es un poco difícil decir lo que estás preguntando, pero si estás buscando reflejar los cambios de la propiedad HTMLElement en el DOM (a través de los atributos). Entonces aquí está el código (usando HTMLElement ):

 // Defines a new property on an Object. Object.defineProperty(HTMLElement.prototype, "someAttribute", { // Configurable configurable: true, // Enumerable enumerable: true, /* Getter (Allows you get the value like this => element.someAttribute // returns the value of "someAttribute" ) */ get: function() { return this.getAttribute("someAttribute") }, /* Setter (Allows you to modify/ update the value like this => element.someAttribute = "lorem ipsum" ) */ set: function(data) { this.setAttribute("someAttribute", data) } }) 

Espero que esto haya respondido tu pregunta.