Myślę, że Tim powiedział to całkiem dobrze , ale cofnijmy się:
Element DOM to obiekt, rzecz w pamięci. Podobnie jak większość obiektów w OOP, ma właściwości . Ma również osobno mapę atrybutów zdefiniowanych na elemencie (zwykle pochodzących ze znaczników czytanych przez przeglądarkę w celu utworzenia elementu). Niektóre właściwości elementu uzyskują swoje wartości początkowe z atrybutów o takich samych lub podobnych nazwach ( valuepobiera swoją wartość początkową z atrybutu „wartość”; hrefpobiera swoją wartość początkową z atrybutu „href”, ale nie jest to dokładnie ta sama wartość; classNamez atrybut „klasa”). Inne właściwości uzyskują swoje wartości początkowe na inne sposoby: Na przykład parentNodewłaściwość uzyskuje swoją wartość na podstawie tego, czym jest jej element nadrzędny;style właściwość, bez względu na to, czy ma atrybut „styl”, czy nie.
Rozważmy tę kotwicę na stronie http://example.com/testing.html:
<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>
Niektóre darmowe grafiki ASCII (i pomijając wiele rzeczy):
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +
| HTMLAnchorElement |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +
| href: „http://example.com/foo.html” |
| nazwa: „fooAnchor” |
| id: "fooAnchor" |
| className: "test one" |
| atrybuty: |
| href: "foo.html" |
| nazwa: „fooAnchor” |
| id: "fooAnchor" |
| klasa: „test jeden” |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +
Pamiętaj, że właściwości i atrybuty są różne.
Teraz, mimo że są różne, ponieważ wszystko to ewoluowało, a nie było projektowane od podstaw, szereg właściwości odpisuje na atrybut, z którego pochodzą, jeśli je ustawisz. Ale nie wszyscy tak robią, a jak widać z hrefgóry, mapowanie nie zawsze jest prostym „przekazaniem wartości”, czasem wiąże się to z interpretacją.
Kiedy mówię o właściwościach będących właściwościami obiektu, nie mówię abstrakcyjnie. Oto kod inny niż jQuery:
var link = document.getElementById('fooAnchor');
alert(link.href); // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"
(Wartości te są zgodne z większością przeglądarek; istnieje pewna odmiana).
linkObiekt jest prawdziwa, można zobaczyć tam jest prawdziwa różnica pomiędzy dostępu do własności na niego i uzyskiwania dostępu do atrybutu .
Jak powiedział Tim, przez większość czasu chcemy pracować z nieruchomościami. Częściowo dzieje się tak, ponieważ ich wartości (nawet nazwy) są bardziej spójne w różnych przeglądarkach. Przeważnie chcemy pracować z atrybutami tylko wtedy, gdy nie ma z nim powiązanej właściwości (atrybuty niestandardowe) lub gdy wiemy, że dla tego konkretnego atrybutu atrybut i właściwość nie mają wartości 1: 1 (jak w przypadku href„href” powyżej) .
Standardowe właściwości są określone w różnych specyfikacjach DOM:
Te specyfikacje mają doskonałe indeksy i zalecamy trzymanie linków do nich pod ręką; Używam ich cały czas.
Niestandardowe atrybuty obejmowałyby na przykład wszelkie data-xyzatrybuty, które można umieścić na elementach w celu dostarczenia meta-danych do kodu (teraz jest to ważne od HTML5, o ile trzymasz się data-prefiksu). (Najnowsze wersje jQuery dają ci dostęp do data-xyzelementów za pośrednictwem datafunkcji, ale ta funkcja nie jest tylko akcesorium do data-xyzatrybutów [robi to mniej więcej]; chyba że faktycznie potrzebujesz jej funkcji, użyłbym tej attrfunkcji do interakcji z data-xyzatrybutem).
attrFunkcja używana mieć jakieś zawiłe logiki wokół uzyskanie co myśleli chciałeś, zamiast dosłownie coraz atrybut. To połączyło koncepcje. Przeprowadzka do propi attrmiała na celu ich dezintegrację. Krótko v1.6.0 jQuery poszedł zbyt daleko w tym względzie, ale funkcjonalność dodano szybko z powrotem do attrobsłużyć typowe sytuacje, w których ludzie używają attr, gdy technicznie powinni używać prop.
Atrybut klasy jest pokazany tutaj na ciele. Jest dostępny poprzez następujący kod:
