Dopo le modifiche apportate in jQuery 1.6.1, ho cercato di definire la differenza tra proprietà e attributi in HTML.

Guardando l'elenco nelle note di rilascio di jQuery 1.6.1 (nella parte inferiore), sembra che si possano classificare le proprietà e gli attributi HTML come segue:

• Proprietà: tutto ciò che ha un valore booleano o che viene calcolato UA come selectedIndex.

• Attributi: "Attributi" che possono essere aggiunti a un elemento HTML che non è né booleano né contenente un valore generato da UA.

Pensieri?

Quando si scrive il codice sorgente HTML, è possibile definire gli attributi sugli elementi HTML. Quindi, una volta che il browser analizza il codice, verrà creato un nodo DOM corrispondente. Questo nodo è un oggetto e quindi ha proprietà .

Ad esempio, questo elemento HTML:

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

ha 2 attributi ( typee value).

Una volta che il browser analizza questo codice, verrà creato un oggetto HTMLInputElement e questo oggetto conterrà dozzine di proprietà come: accetta, accessKey, align, alt, attributi, autofocus, baseURI, controllato, childElementCount, childNodes, children, classList, className, clientHeight, ecc.

Per un determinato oggetto nodo DOM, le proprietà sono le proprietà di quell'oggetto e gli attributi sono gli elementi della attributesproprietà di quell'oggetto.

Quando viene creato un nodo DOM per un determinato elemento HTML, molte delle sue proprietà si riferiscono ad attributi con nomi uguali o simili, ma non è una relazione uno a uno. Ad esempio, per questo elemento HTML:

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

il nodo DOM corrispondente avrà id, typee valueproprietà (tra gli altri):

• La idproprietà è una proprietà riflessa per l' idattributo: ottenere la proprietà legge il valore dell'attributo e l'impostazione della proprietà scrive il valore dell'attributo. idè una proprietà riflessa pura , non modifica o limita il valore.

• La typeproprietà è una proprietà riflessa per l' typeattributo: ottenere la proprietà legge il valore dell'attributo e l'impostazione della proprietà scrive il valore dell'attributo. typenon è una proprietà riflessa pura perché è limitata a valori noti (ad esempio, i tipi validi di un input). Se hai avuto <input type="foo">, allora theInput.getAttribute("type")ti dà "foo"ma theInput.typeti dà "text".

• Al contrario, la valueproprietà non riflette l' valueattributo. Invece, è il valore corrente dell'input. Quando l'utente modifica manualmente il valore della casella di input, la valueproprietà rifletterà questa modifica. Quindi, se l'utente immette "John"nella casella di input, quindi:

  theInput.value // returns "John"

  mentre:

  theInput.getAttribute('value') // returns "Name:"

  La valueproprietà riflette il contenuto di testo corrente all'interno della casella di input, mentre l' valueattributo contiene il contenuto di testo inizialevalue dell'attributo dal codice sorgente HTML.

  Quindi, se vuoi sapere cosa c'è attualmente nella casella di testo, leggi la proprietà. Se, tuttavia, vuoi sapere qual era il valore iniziale della casella di testo, leggi l'attributo. Oppure puoi usare la defaultValueproprietà, che è un puro riflesso valuedell'attributo:

  theInput.value                 // returns "John"
  theInput.getAttribute('value') // returns "Name:"
  theInput.defaultValue          // returns "Name:"

Ci sono diverse proprietà che riflettono direttamente il loro attributo ( rel, id), alcuni sono riflessi diretti con nomi leggermente diversi ( htmlForriflette la fordell'attributo, classNameriflette l' classattributo), molti che riflettono il loro attributo, ma con restrizioni / modifiche ( src, href, disabled, multiple), e così su. Le specifiche riguardano i vari tipi di riflessione.

Dopo aver letto la risposta di Sime Vidas , ho cercato di più e ho trovato una spiegazione molto semplice e di facile comprensione nei documenti angolari .

Attributo HTML vs. proprietà DOM

---

Gli attributi sono definiti da HTML. Le proprietà sono definite dal DOM (Document Object Model).

• Alcuni attributi HTML hanno mappatura 1: 1 sulle proprietà. idè un esempio.

• Alcuni attributi HTML non hanno proprietà corrispondenti. colspanè un esempio.

• Alcune proprietà DOM non hanno attributi corrispondenti. textContent è un esempio.

• Molti attributi HTML sembrano mappare le proprietà ... ma non nel modo in cui potresti pensare!

L'ultima categoria è confusa fino a quando non afferrerai questa regola generale:

Gli attributi inizializzano le proprietà del DOM e quindi vengono eseguiti. I valori delle proprietà possono cambiare; i valori degli attributi non possono.

Ad esempio, quando viene eseguito il rendering del browser <input type="text" value="Bob">, viene creato un nodo DOM corrispondente con una valueproprietà inizializzata su "Bob".

Quando l'utente immette "Sally" nella casella di input, la value proprietà dell'elemento DOM diventa "Sally". Ma l' value attributo HTML rimane invariato quando scopri che chiedi all'elemento di input di quell'attributo: input.getAttribute('value')restituisce "Bob".

L'attributo HTML valuespecifica il valore iniziale ; la value proprietà DOM è il valore corrente .

---

L' disabledattributo è un altro esempio peculiare. La disabledproprietà di un pulsante è falsedi default, quindi il pulsante è abilitato. Quando aggiungi l' disabledattributo, la sua sola presenza inizializza la disabledproprietà del pulsante in truemodo che il pulsante sia disabilitato.

L'aggiunta e la rimozione disableddell'attributo disabilita e abilita il pulsante. Il valore dell'attributo è irrilevante, motivo per cui non è possibile abilitare un pulsante scrivendo<button disabled="false">Still Disabled</button>.

L'impostazione della disabled proprietà del pulsante disabilita o abilita il pulsante. Il valore della proprietà è importante.

L'attributo HTML e la proprietà DOM non sono la stessa cosa, anche quando hanno lo stesso nome.

Le risposte spiegano già come gli attributi e le proprietà sono gestiti in modo diverso, ma vorrei davvero sottolineare quanto sia completamente folle . Anche se è in qualche misura la specifica.

È pazzesco avere alcuni degli attributi (ad es. Id, class, foo, bar ) per conservare solo un tipo di valore nel DOM, mentre alcuni attributi (ad esempio spuntati, selezionati ) per mantenere due valori; cioè, il valore "quando è stato caricato" e il valore di "stato dinamico". (Il DOM non dovrebbe rappresentare lo stato del documento nella sua massima misura?)

È assolutamente essenziale che due campi di input , ad esempio un testo e una casella di controllo, si comportino allo stesso modo . Se il campo di immissione del testo non mantiene un valore "quando è stato caricato" separato e il valore "corrente, dinamico", perché la casella di controllo? Se la casella di controllo ha due valori per l' attributo controllato , perché non ne ha due per gli attributi class e id ? Se ti aspetti di cambiare il valore di un campo * input * di testo e prevedi che il DOM (ovvero la "rappresentazione serializzata") cambi e rifletta questo cambiamento, perché mai non ti aspetteresti lo stesso da un campo di input di digitare la casella di controllo sull'attributo controllato?

La differenziazione di "è un attributo booleano" non ha alcun senso per me, o almeno non è una ragione sufficiente per questo.

bene questi sono specificati dal w3c cos'è un attributo e cos'è una proprietà http://www.w3.org/TR/SVGTiny12/attributeTable.html

ma attualmente attr e prop non sono così diversi e ci sono quasi gli stessi

ma preferiscono prop per alcune cose

Riepilogo dell'utilizzo preferito

Il metodo .prop () dovrebbe essere usato per attributi / proprietà booleane e per proprietà che non esistono in HTML (come window.location). Tutti gli altri attributi (quelli che puoi vedere nell'html) possono e devono continuare a essere manipolati con il metodo .attr ().

bene in realtà non devi cambiare qualcosa se usi attr o prop o entrambi, entrambi funzionano ma ho visto nella mia applicazione che prop ha funzionato dove atrr non ha fatto quindi ho preso la mia 1.6 app prop =)

Differenze proprietà e attributi HTML:

Diamo un'occhiata alle definizioni di queste parole prima di valutare quale sia la differenza in HTML:

Definizione inglese:

• Gli attributi si riferiscono a informazioni aggiuntive di un oggetto.
• Le proprietà descrivono le caratteristiche di un oggetto.

Nel contesto HTML:

Quando il browser analizza l'HTML, crea una struttura di dati ad albero che sostanzialmente è una rappresentazione in memoria dell'HTML. La struttura dei dati dell'albero contiene nodi che sono elementi e testo HTML. Attributi e proprietà correlati a questo è il seguente modo:

• Gli attributi sono informazioni aggiuntive che possiamo inserire nell'HTML per inizializzare alcune proprietà DOM.
• Le proprietà si formano quando il browser analizza l'HTML e genera il DOM. Ciascuno degli elementi nel DOM ha il proprio set di proprietà che sono tutte impostate dal browser. Alcune di queste proprietà possono avere il loro valore iniziale impostato dagli attributi HTML. Ogni volta che cambia una proprietà DOM che ha influenza sulla pagina renderizzata, la pagina verrà immediatamente renderizzata nuovamente

È anche importante rendersi conto che la mappatura di queste proprietà non è 1 a 1. In altre parole, non tutti gli attributi che diamo su un elemento HTML avranno una proprietà DOM simile.

Inoltre hanno diversi elementi DOM proprietà diverse. Ad esempio, un <input>elemento ha una proprietà value che non è presente su una <div>proprietà.

Esempio:

Prendiamo il seguente documento HTML:

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  <!-- charset is a attribute -->
  <meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
  <title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>

Quindi ispezioniamo <div>, nella console JS:

 console.dir(document.getElementById('foo'));

Vediamo le seguenti proprietà DOM (chrome devtools, non tutte le proprietà mostrate):

• Possiamo vedere che l'id dell'attributo nell'HTML è ora anche una proprietà id nel DOM. L'id è stato inizializzato dall'HTML (anche se potremmo modificarlo con javascript).
• Possiamo vedere che l'attributo di classe nell'HTML non ha proprietà di classe corrispondente ( classè una parola chiave riservata in JS). Ma in realtà 2 proprietà classListe className.