getAttribute () a właściwości obiektu Element?

Wyrażenia lubią Element.getAttribute("id")i Element.idzwracają to samo.

Którego należy użyć, gdy potrzebujemy atrybutów obiektu HTMLElement?

Czy jest jakiś problem między przeglądarkami w przypadku tych metod, takich jak getAttribute()i setAttribute()?

Albo jakikolwiek wpływ na wydajność między bezpośrednim dostępem do właściwości obiektu a używaniem tych metod atrybutów?

getAttributepobiera atrybut elementu DOM, podczas gdy el.idpobiera 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.hrefi 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 // Full URL except for IE that keeps '/'
</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 checkednieruchomości. Właściwość DOM zwraca truelub, falsepodczas 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 valuewłasność inputelementu. 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:

1. Niestandardowy atrybut HTML, ponieważ nie jest synchronizowany z usługą DOM.
2. 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 valuedanego inputelementu).

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).

getAttribute('attribute') zwykle zwraca wartość atrybutu jako ciąg znaków, dokładnie tak, jak zdefiniowano w źródle HTML strony.

Jednak element.attributemoże zwrócić znormalizowaną lub obliczoną wartość atrybutu. Przykłady:

• <a href="https://stackoverflow.com/foo"></a>
  • a.href będzie zawierał pełny adres URL
• <input type="checkbox" checked>
  • input.checked będzie true (boolean)
• <input type="checkbox" checked="bleh">
  • input.checked będzie true (boolean)
• <img src='http://dummyimage.com/64x64/000/fff'>
  • img.width będzie wynosić 0 (liczba) przed załadowaniem obrazu
  • img.width wyniesie 64 (liczba) po załadowaniu obrazu (lub kilku jego pierwszych bajtów)
• <img src='http://dummyimage.com/64x64/000/fff' width="50%">
  • img. szerokość będzie obliczoną 50%
• <img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
  • img. szerokość będzie wynosić 50 (liczba)
• <div style='background: lime;'></div>
  • div.style będzie obiektem

Zgodnie z tym testem jsPerf getAttribute jest wolniejszy niż idwłaściwość.

PS

Co dziwne, obie instrukcje działają bardzo źle w IE8 (w porównaniu z innymi przeglądarkami).

Zawsze używaj właściwości, chyba że masz konkretny powód, aby tego nie robić.

• getAttribute()i setAttribute()są zepsute w starszym IE (i tryb zgodności w nowszych wersjach)
• właściwości są wygodniejsze (w szczególności te odpowiadające atrybutom boolowskim)

Jest kilka wyjątków :

• dostęp do atrybutów <form>elementów
• dostęp do atrybutów niestandardowych (chociaż w ogóle odradzam używanie atrybutów niestandardowych)

O tym temacie pisałem kilka razy na SO:

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

.idzapisuje narzut wywołania funkcji. (co jest bardzo małe, ale pytałeś.)

Wypróbuj poniższy przykład, aby całkowicie to zrozumieć. Dla poniższego DIV

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

Element.getAttribute('class')Powróci myclassale trzeba użyć Element.classNamektóry pobiera go od nieruchomości DOM.

Jednym z obszarów, w którym ma to duże znaczenie, jest stylizacja CSS oparta na atrybutach.

Rozważ następujące:

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>

Element div z ustawioną bezpośrednio właściwością niestandardową nie odzwierciedla wartości atrybutu i nie jest wybierany przez nasz selektor atrybutu (div[custom] ) w css.

Jednak element div z atrybutem niestandardowym ustawionym za pomocą setAttributemożna wybrać za pomocą selektora atrybutu css i odpowiednio nadać mu styl.