getAttribute () rispetto alle proprietà dell'oggetto Element?

Espressioni come Element.getAttribute("id")e Element.idrestituiscono la stessa cosa.

Quale dovrebbe essere usato quando abbiamo bisogno degli attributi di un oggetto HTMLElement?

C'è qualche problema cross browser con questi metodi come getAttribute()e setAttribute()?

O qualche impatto sulle prestazioni tra l'accesso diretto alle proprietà degli oggetti e l'utilizzo di questi metodi di attributo?

getAttributerecupera l' attributo di un elemento DOM, mentre el.idrecupera la proprietà di questo elemento DOM. Non sono la stessa cosa.

La maggior parte delle volte, le proprietà DOM sono sincronizzate con gli attributi.

Tuttavia, la sincronizzazione non garantisce lo stesso valore . Un classico esempio è tra el.hrefe el.getAttribute('href')per un elemento di ancoraggio.

Per esempio:

<a href="/" id="hey"></a>
<script>
var a = document.getElementById('hey')
a.getAttribute('href') // "/"
a.href // Full URL except for IE that keeps '/'
</script>

Questo comportamento si verifica perché secondo il W3C , la proprietà href deve essere un collegamento ben formato. La maggior parte dei browser rispetta questo standard (indovina chi non lo fa?).

C'è un altro caso per il input's checkedproprietà. La proprietà DOM restituisce trueo falsementre l'attributo restituisce la stringa "checked"o una stringa vuota.

E poi, ci sono alcune proprietà che sono sincronizzate solo unidirezionali . Il miglior esempio è la valueproprietà di un inputelemento. Cambiare il suo valore tramite la proprietà DOM non cambierà l'attributo (modifica: controlla il primo commento per maggiore precisione).

Per questi motivi, ti suggerirei di continuare a utilizzare le proprietà DOM e non gli attributi, poiché il loro comportamento differisce tra i browser.

In realtà, ci sono solo due casi in cui è necessario utilizzare gli attributi:

1. Un attributo HTML personalizzato, perché non è sincronizzato con una proprietà DOM.
2. Per accedere a un attributo HTML integrato, che non è sincronizzato dalla proprietà, e sei sicuro di aver bisogno dell'attributo (ad esempio, l'originale valuedi un inputelemento).

Se vuoi una spiegazione più dettagliata, ti consiglio caldamente di leggere questa pagina . Ci vorranno solo pochi minuti, ma rimarrai deliziato dalle informazioni (che ho riassunto qui).

getAttribute('attribute') normalmente restituisce il valore dell'attributo come una stringa, esattamente come definito nel sorgente HTML della pagina.

Tuttavia, element.attributepotrebbe restituire un valore normalizzato o calcolato dell'attributo. Esempi:

• <a href="https://stackoverflow.com/foo"></a>
  • a.href conterrà l' URL completo
• <input type="checkbox" checked>
  • input.checked sarà vero (booleano)
• <input type="checkbox" checked="bleh">
  • input.checked sarà vero (booleano)
• <img src='http://dummyimage.com/64x64/000/fff'>
  • img.width sarà 0 (numero) prima che l'immagine venga caricata
  • img.width sarà 64 (numero) quando viene caricata l'immagine (oi primi pochi byte di essa)
• <img src='http://dummyimage.com/64x64/000/fff' width="50%">
  • img. larghezza sarà il 50% calcolato
• <img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
  • img. larghezza sarà 50 (numero)
• <div style='background: lime;'></div>
  • div.style sarà un oggetto

.idsalva l'overhead della chiamata di funzione. (che è molto piccolo, ma hai chiesto.)

Secondo questo jsPerf il test getAttribute è più lento diid proprietà.

PS

Stranamente, entrambe le istruzioni si comportano molto male su IE8 (rispetto ad altri browser).

Usa sempre le proprietà a meno che tu non abbia un motivo specifico per non farlo.

• getAttribute()e setAttribute()sono danneggiati nella vecchia IE (e modalità di compatibilità nelle versioni successive)
• le proprietà sono più convenienti (in particolare, quelle corrispondenti agli attributi booleani)

Ci sono alcune eccezioni :

• accedere agli attributi degli <form>elementi
• accedere agli attributi personalizzati (anche se sconsiglierei di utilizzare attributi personalizzati)

Ho scritto su questo argomento alcune volte su SO:

• https://stackoverflow.com/a/7010268/96100
• https://stackoverflow.com/a/4456805/96100

Prova sotto l'esempio per capirlo completamente. Per il DIV di seguito

<div class="myclass"></div>

Il Element.getAttribute('class')torneranno myclass, ma è necessario utilizzare Element.classNameche recupera dalla proprietà DOM.

Un'area in cui questo fa una grande differenza è con lo stile CSS basato sugli attributi.

Considera quanto segue:

const divs = document.querySelectorAll('div');

divs[1].custom = true;
divs[2].setAttribute('custom', true);

div {
  border: 1px solid;
  margin-bottom: 8px;
}

div[custom] {
  background: #36a;
  color: #fff;
}

<div>A normal div</div>
<div>A div with a custom property set directly.</div>
<div>A div with a custom attribute set with `setAttribute`</div>

Il div con la proprietà personalizzata impostata direttamente non riflette il valore dell'attributo e non è selezionato dal nostro selettore di attributi ( div[custom]) nel css.

Il div con l'attributo personalizzato impostato utilizzando setAttribute, tuttavia, può essere selezionato utilizzando un selettore di attributi css e con uno stile di conseguenza.