Wszystkie przeglądarki, które przyjechałem z pozwoleniem na dostęp do elementu z id="myDiv", po prostu pisząc:

myDiv

Zobacz tutaj: http://jsfiddle.net/l91q54lt/

W każdym razie ta metoda ta wydaje się być dość słabo udokumentowana, a w rzeczywistości źródła, które spotykam, nawet nie dają jej wzmianki i założyć, że użyłoby tego

document.getElementById("myDiv")

Albo może

document.querySelector("#myDiv")

Aby uzyskać dostęp do elementu Dom, nawet gdy jego identyfikator jest znany z góry (tj. Nie obliczany w czasie wykonywania). Mogę powiedzieć, że te ostatnie podejścia mają tę zaletę, aby zachować bezpieczny kod, jeśli ktoś nieumyślnie próbuje przedefiniować myDiv w szerszym zakresie (nie tak genialny pomysł ...), zastępuje go z inną wartością i idzie na nie zauważając zderzenia.

Ale to? Czy są jakieś obawy w stosowaniu krótkiej formy powyżej innych niż projektowanie kodu lub czego jeszcze brakuje?

59
GOTO 0 15 sierpień 2014, 14:53

3 odpowiedzi

Najlepsza odpowiedź

W każdym razie ta metoda wydaje się być dość słabo udokumentowana, a w rzeczywistości źródła, które spotykam, nawet nie dają jej wspomnieć [...]

Oprócz preparatów na bezwarunkowanych zmiennych globalnych na bok, brak dokumentacji jest wielkim powodem, aby go nie używać.

Pozorna promocja wartości id do zmiennych globalnych nie jest zgodny z normami (HTML5 SPEC dla atrybutu ID nie wspomina o tym) i dlatego nie należy zakładać przyszłych przeglądarek.

Edytuj: Okazuje się, że ten zachowanie jest zgodny ze standardami - w HTML5, {X0}} powinien obsługiwać dostęp do nieruchomości do "nazwanych elementów":

Nazwane obiekty o nazwie nazwy, do celów powyższego algorytmu, są te, które są albo:

  • Przeglądanie dziecka konteksty aktywnego dokumentu, którego nazwisko jest nazwa ,
  • A, aplet, obszar, osadzony, forma, frameset, img lub elementy obiektu atrybut treści nazw, którego wartość wynosi nazwa lub
  • Elementy HTML, które mają atrybut treści ID , których wartość wynosi nazwa .

Źródło: HTML 5 Spec, "nazwany Dostęp do obiektu okna " kopalnia naciska .

Na podstawie tego, zgodność standardy nie jest powodem, aby uniknąć tego wzoru. Jednak sam specyfikacja radzi sobie z jego użyciem:

Zgodnie z ogólną zasadą, opierając się na tym, doprowadzi do kruchego kodu. Który Identyfikatory kończą mapowanie do tego interfejsu API może się różnić w czasie, gdy są nowe funkcje Dodano na przykład do platformy internetowej. Zamiast tego użyj document.getElementById() lub document.querySelector().

46
loa_in_ 15 sierpień 2014, 20:20

Świetne pytanie. Jako Einstein prawdopodobnie nie powiedział, rzeczy powinno być tak proste, jak to możliwe, a nie prostsze.

Te ostatnie podejścia mają tę zaletę, aby zachować bezpieczeństwo Kodeksu, jeśli ktoś przypadkowo próbuje przedefiniować Mydiv w szerszym zakresie (nie tak genialny pomysł ...), zastępuje go z inną wartością i idzie dalej bez zaurysunkowania klaszczy

To główny powód, dla którego to jest zły pomysł i jest wystarczająco dość. Zmienne globalne nie są bezpieczne na poleganie. Można je nadpisać w dowolnym momencie, według dowolnego skryptu, który kończy się na bieżąco na stronie.

Oprócz tego, tylko wpisując myDiv nie jest "krótką formą" document.getElementById(). To odniesienie do zmiennej globalnej Aby owinąć swoje odniesienia do globalnego bloku próbnego, aby być bezpiecznym.

Jest to jeden powód, dla którego jQuery jest tak popularny: jeśli to zrobisz $("#myDiv").remove(), i nie ma elementu z identyfikatorem myDiv, nie zostanie rzucony żaden błąd - kod po prostu nic nie zrobił, co jest często, co chcesz, gdy robiąc manipulację DOM.

21
Paul D. Waite 15 sierpień 2014, 11:14

Powodów jest kilka:

nie chcesz swojego kodu i znacznika, które sprzężone.

Używając konkretnego połączenia, aby uzyskać dostęp do div, nie musisz się martwić o uszkodzony przestrzeń globalnej. Dodaj bibliotekę, która deklaruje myDiv w globalnej przestrzeni i jesteś w świecie bólu, który będzie trudny do naprawienia.

Możesz uzyskać dostęp do elementów, przez ID, który nie jest częścią Domu

Mogą być w fragmencie, ramce lub element, który został odłączony, a nie ponownie przymocowany do domu.

Edytuj: Przykład dostępu do nietylko podłączonych elementów przez ID

var frag = document.createDocumentFragment();
var span = document.createElement("span");
span.id = "span-test";
frag.appendChild(span);
var span2 = frag.getElementById("span-test");
alert(span === span2);
14
Jeremy J Starcher 14 sierpień 2018, 21:09