getAttribute
pobiera atrybut elementu DOM, podczas gdy el.id
pobiera właściwość tego elementu DOM. One nie są takie same.
W większości przypadków właściwości DOM są synchronizowane z atrybutami.
Jednak synchronizacja nie gwarantuje tej samej wartości . Klasycznym przykładem jest pomiędzy el.href
i el.getAttribute('href')
dla elementu kotwicy.
Na przykład:
<a href="/" id="hey"></a>
<script>
var a = document.getElementById('hey')
a.getAttribute('href')
a.href
</script>
Dzieje się tak, ponieważ zgodnie z W3C właściwość href musi być poprawnie sformułowanym łączem. Większość przeglądarek przestrzega tego standardu (zgadnij, kto tego nie robi?).
Jest to kolejny przypadek w input
„s checked
nieruchomości. Właściwość DOM zwraca true
lub, false
podczas gdy atrybut zwraca ciąg "checked"
lub pusty ciąg.
Następnie są pewne właściwości, które są synchronizowane tylko w jedną stronę . Najlepszym przykładem jest value
własność input
elementu. Zmiana jego wartości przez właściwość DOM nie zmieni atrybutu (edytuj: sprawdź pierwszy komentarz, aby uzyskać większą precyzję).
Z tych powodów sugerowałbym dalsze używanie właściwości DOM , a nie atrybutów, ponieważ ich zachowanie jest różne w różnych przeglądarkach.
W rzeczywistości istnieją tylko dwa przypadki, w których musisz użyć atrybutów:
- Niestandardowy atrybut HTML, ponieważ nie jest synchronizowany z usługą DOM.
- Aby uzyskać dostęp do wbudowanego HTML atrybut, który nie jest zsynchronizowany z majątku, a na pewno trzeba atrybut (na przykład, oryginalny
value
danego input
elementu).
Jeśli chcesz uzyskać bardziej szczegółowe wyjaśnienie, zdecydowanie sugeruję przeczytanie tej strony . Zajmie Ci to tylko kilka minut, ale będziesz zachwycony informacjami (które tutaj podsumowałem).