jQuery: prop vs attr ... aclaración

Question

Tenga en cuenta que esto no es un duplicado de .prop() vs .attr(); esa pregunta se refiere a la funcionalidad básica de prop vs attr, mientras que esta pregunta es específica a sus diferencias como setters.

Al intentar reducir lo que debería establecerse usando .prop(), frente a lo que se debe establecer mediante .attr() al crear un elemento nuevo, en las pruebas con jQuery 1.7.2, encuentro que el apuntalamiento es aproximadamente 2.5 veces más rápido, por lo que parece preferible.

La única lista de cosas para ajustar utilizando attr que pude encontrar da estos para attr:

tecla de acceso, alinear, fondo, bgcolor, clase, contenteditable, contextual, los datos-XXXX, que pueden arrastrarse, altura , oculto, ID, artículo, itemprop, corrección ortográfica, estilo, sujeto, tabindex, título, valign, anchura

1. es este completa (es decir, todo lo que no en esa lista - como mínimo, máximo, paso, etc. - debería usar prop)?

2. En prueba, algunas de ellas parecen funcionar bien cuando se configuran con prop. Prueba de la lista anterior, no he tenido problemas con la configuración siguiente con prop:

   id, class, alinear, contenteditable, que pueden arrastrarse, oculto, corrección ortográfica, tabindex, título

3. hay alguna razón, para esa lista de "cosas para establecer con attr que aún funcionan cuando se establece con prop", ¿por qué todavía se debe establecer con attr? Si no es así, entonces el rendimiento 250% más rápido cuando se crea un básica <div id="foo" class="bar" draggable="true" title="zipzap"> parece bueno para mí ... :)

Answer 1

No puedo encontrar ninguna lista completa en línea. Todos los que dan cualquier clase de lista solo copian el parcial dado en la publicación del blog de jQuery 1.6. Respecto al # 3, Starx sortof dirigió esto en su comentario a una respuesta aquí. http://timmywillison.com/ entra en detalles con una discusión decente. Las especificaciones MDN y W3C también mencionan que hay varias interfaces de atributos donde se pueden establecer como si fueran propiedades (https://developer.mozilla.org/en/DOM/element), aunque MDN no enumera realmente cuáles son.MDN menciona que usar las interfaces de propiedad como setters es más frágil que usar getAttribute:

"Si bien la mayoría de los elementos HTML y XML comparten estas interfaces, existen más interfaces especializadas para objetos particulares enumerados en la especificación HTML DOM. Sin embargo, tenga en cuenta que estas interfaces HTML son "solo para documentos [HTML 4.01] y [XHTML 1.0] y no se garantiza que funcionen con ninguna versión futura de XHTML." El borrador de HTML 5 indica que apunta a la compatibilidad con versiones anteriores de estos HTML interfaces pero dice de ellos que "algunas características que anteriormente estaban en desuso, escasamente respaldadas, raramente usadas o consideradas innecesarias han sido eliminadas". Uno puede evitar el conflicto potencial moviéndose completamente a los métodos de atributo DOM XML como getAttribute(). "

Sin embargo, parece seguro asumir por ahora que cualquier página de tipo de documento HTML5 renderizada en Firefox y Chrome ya se encuentra en un entorno donde ya se han eliminado las interfaces 'obsoletas, poco compatibles', etc.

Por lo tanto, he probado todos los atributos, así como las propiedades sin atributos mencionados en los blogs de jQuery, contra cada tipo de elemento HTML, usando valores booleanos, de cadena e int.

Usando 1.7.2 y 1.8pre, llámese .prop() o attr(), jQuery internamente siempre utilizar realmente .prop para:

async, autofocus, autoplay, checked, controls, defer, disabled, hidden, loop, 
multiple, open, readonly, required, scoped, selected 

Para elementos HTML (no teniendo en cuenta la ventana, documento , etc aquí), jQuery no va a fijar cualquiera de los siguientes atributos a menos que utilice .attr():

accept-charset, accesskey, bgcolor, buffered, codebase, contextmenu, datetime, 
default, dirname, dropzone, form, http-equiv, icon, ismap, itemprop, kind, 
language, list, location, manifest, nodeName, nodeType, novalidate, pubdate, 
radiogroup, seamless, selectedIndex, sizes, srclang, style, tagName 

Y, por último, jQuery fijará la siguiente lista de atributos, ya sea con .prop() o .attr () En la primera lista anterior, jQuery siempre usa .prop(), independientemente de si usa .attr() o .prop(). Para los atributos en esta lista, jQuery usa lo que sea que use. Si usa .prop(), jQuery usa .prop() y vica versa. En cualquier caso, el resultado es el mismo. Por lo tanto, ignorando cualquier consideración semántica potencial, solo con respecto a que prop() es ~ 2,5 veces más rápido que .attr(), la publicación de blog de jQuery 1.6.1 sugiere que se use .attr(), pero se puede usar .prop() en su lugar , con un aumento significativo en el rendimiento:

accept, action, align, alt, autocomplete, border, challenge, charset, cite, 
class, code, color, cols, colspan, contenteditable, coords, data, defaultValue, 
dir, draggable, enctype, for, headers, height, hidden, high, href, hreflang, 
id, keytype, label, lang, low, max, maxlength, media, method, min, name, 
optimum, pattern, ping, placeholder, poster, preload, readonly, rel, required, 
reversed, rows, rowspan, sandbox, scope, shape, size, span, spellcheck, src, 
srcdoc, start, step, summary, tabindex, target, title, type, usemap, value, 
width, wrap 

Answer 2

tratar de entender esto en términos simples.

.attr() da el atributo de un elemento. Ese atributo cuando se cargó en la página.

.prop(), da la propiedad del elemento,

• esto puede ser el estado de un elemento, como en el caso de casillas de verificación, o bien puede ser activada o desactivada.
• O, se puede modificar el atributo de un elemento, desde el estado predeterminado.

Este question tiene todas las diferencias que necesita saber. En general, cuando se trabaja con la parte de manipulación DOM, necesita propiedad en lugar de atributos. El answer de T.J. realmente aclara el concepto.