javascript - todas - ¿Cuál es la diferencia entre propiedades y atributos en HTML?

que es un valor en html (3)

Después de los cambios realizados en jQuery 1.6.1, he estado tratando de definir la diferencia entre propiedades y atributos en HTML.

Mirando la lista en las notas de la versión de jQuery 1.6.1 (cerca de la parte inferior), parece que se pueden clasificar las propiedades y atributos de HTML de la siguiente manera:

Propiedades: Todo lo que tiene un valor booleano o que se calcula como UA, como selectedIndex.
Atributos: ''Atributos'' que se pueden agregar a un elemento HTML que no es booleano ni contiene un valor generado por la AU.

¿Pensamientos?

Al escribir código fuente HTML, puede definir atributos en sus elementos HTML. Luego, una vez que el navegador analiza su código, se creará un nodo DOM correspondiente. Este nodo es un objeto, y por lo tanto tiene propiedades .

Por ejemplo, este elemento HTML:

<input type="text" value="Name:">

Tiene 2 atributos ( type y value ).

Una vez que el navegador analiza este código, se HTMLInputElement un objeto HTMLInputElement , y este objeto contendrá docenas de propiedades como: aceptar, clave de acceso, alinear, alt, atributos, autofocus, baseURI, comprobado, childElementCount, childNodes, children, classList, className, clienteAlto, etc.

Para un objeto de nodo DOM dado, las propiedades son las propiedades de ese objeto y los atributos son los elementos de la propiedad de attributes de ese objeto.

Cuando se crea un nodo DOM para un elemento HTML determinado, muchas de sus propiedades se relacionan con atributos con el mismo nombre o similar, pero no es una relación uno a uno. Por ejemplo, para este elemento HTML:

<input id="the-input" type="text" value="Name:">

el nodo DOM correspondiente tendrá propiedades de id , type y value (entre otras):

La propiedad id es una propiedad reflejada para el atributo id : Al obtener la propiedad, se lee el valor del atributo y al establecer la propiedad se escribe el valor del atributo. id es una propiedad reflejada pura , no modifica ni limita el valor.
La propiedad type es una propiedad reflejada para el atributo type : Al obtener la propiedad, se lee el valor del atributo y al establecer la propiedad se escribe el valor del atributo. type no es una propiedad reflejada pura porque está limitada a valores conocidos (por ejemplo, los tipos válidos de una entrada). Si tenía <input type="foo"> , entonces el theInput.getAttribute("type") le da "foo" pero el theInput.type le da "text" .
En contraste, la propiedad de value no refleja el atributo de value . En cambio, es el valor actual de la entrada. Cuando el usuario cambia manualmente el valor del cuadro de entrada, la propiedad de value reflejará este cambio. Entonces, si el usuario ingresa "John" en el cuadro de entrada, entonces:
theInput.value // returns "John"
mientras:
theInput.getAttribute(''value'') // returns "Name:"
La propiedad de value refleja el contenido de texto actual dentro del cuadro de entrada, mientras que el atributo de value contiene el contenido de texto inicial del atributo de value del código fuente HTML.
Entonces, si desea saber qué hay actualmente dentro del cuadro de texto, lea la propiedad. Sin embargo, si desea saber cuál fue el valor inicial del cuadro de texto, lea el atributo. O puede usar la propiedad defaultValue , que es un reflejo puro del atributo de value :
theInput.value // returns "John" theInput.getAttribute(''value'') // returns "Name:" theInput.defaultValue // returns "Name:"

Hay varias propiedades que reflejan directamente su atributo ( rel , id ), algunas son reflexiones directas con nombres ligeramente diferentes ( htmlFor refleja el atributo for , className refleja el atributo de la class ), muchas de las cuales reflejan su atributo pero con restricciones / modificaciones ( src , href , disabled , multiple ), etc. La especificación abarca los distintos tipos de reflexión.

Las respuestas ya explican cómo los atributos y las propiedades se manejan de manera diferente, pero realmente me gustaría señalar que esto es totalmente insano . Incluso si es hasta cierto punto la especificación.

Es una locura, tener algunos de los atributos (por ejemplo , id, class, foo, bar ) para retener solo un tipo de valor en el DOM, mientras que algunos atributos (por ejemplo , verificados, seleccionados ) para retener dos valores; es decir, el valor "cuando se cargó" y el valor del "estado dinámico". (¿No se supone que el DOM debe representar el estado del documento en toda su extensión?)

Es absolutamente esencial que dos campos de entrada , por ejemplo, un texto y una casilla de verificación se comporten de la misma manera . Si el campo de entrada de texto no conserva un valor separado "cuando se cargó" y el valor "actual, dinámico", ¿por qué la casilla de verificación? Si la casilla de verificación tiene dos valores para el atributo marcado , ¿por qué no tiene dos para sus atributos de clase e id ? Si espera cambiar el valor de un campo de texto * entrada *, y espera que el DOM (es decir, la "representación serializada") cambie, y refleje este cambio, ¿por qué no esperaría lo mismo de un campo de entrada de escribir casilla de verificación en el atributo marcado?

La diferenciación de "es un atributo booleano" simplemente no tiene ningún sentido para mí, o es, al menos no una razón suficiente para esto.

así estos están especificados por el w3c qué es un atributo y qué es una propiedad http://www.w3.org/TR/SVGTiny12/attributeTable.html

pero actualmente el attr y el prop no son tan diferentes y hay casi lo mismo

Pero prefieren prop para algunas cosas.

Resumen de uso preferido
El método .prop () debe usarse para atributos / propiedades booleanas y para propiedades que no existen en html (como window.location). Todos los demás atributos (los que puede ver en el html) pueden y deben ser manipulados con el método .attr ().

Bueno, en realidad no tienes que cambiar algo si usas attr o prop o ambos, ambos funcionan, pero vi en mi propia aplicación que la prop funcionaba donde atrr no lo hice, así que tomé mi 1.6 app prop =)