2011-10-19 17 views
22

Powiel możliwe:
IE/Chrome: are DOM tree elements global variables here?
why window[id] === document.getElementById(id)bezpośrednio odwoływać elementy HTML

Właśnie natknąć coś w html/javascript, który zaskoczył mnie trochę. Podczas uzyskiwania odwołania do elementu html przy użyciu javascript zawsze używałem wcześniej jQuery lub document.getElementById. Wygląda również na to, że możesz uzyskać bezpośredni dostęp do elementu po prostu używając jego id. Czy ktoś może wyjaśnić niuanse tego? Mam googleed, ale nie mogę znaleźć żadnego odniesienia do tej umiejętności, każda strona mówi o getElementById.

Poniższy fragment ilustruje to.

<html> 
<head> 
</head> 
<body> 
    <input type="button" value="getElement" onclick="document.getElementById('blah').innerText = 'getElementById'" /> 
    <input type="button" value="direct" onclick="blah.innerText = 'direct';" /> 
    <div id="blah"></div> 
</body> 

Wiele z góry dzięki.

+0

+1 Nie natknąłem się na to wcześniej, ale zdecydowanie działa: http: // jsfiddle.net/qdrAr/ – Clive

+0

W jakich przeglądarkach to zweryfikowałeś? Nie można go często używać, ponieważ może nie działać we wszystkich przeglądarkach. –

+0

To nie jest przeglądarka krzyżowa. Niektóre przeglądarki mogły już go obsługiwać, ale nie wszystkie, a nie starsze wersje. – Nikoloff

Odpowiedz

14

Możliwość wyboru elementów na stronie na podstawie ich [id] jest "cechą" z wczesnego JavaScript (DOM lvl 0 lub 1 metinks, nie można znaleźć źródła).

Niestety jest to cecha temperamentu. Co by się stało, gdybyś miał:

<div id="window"></div> 

lub

<div id="document"></div> 

Jeszcze lepiej, co tu się dzieje?

<div id="foo"></div> 
<div id="bar"></div> 
<script>var foo = document.getElementById('bar');</script> 

Więc niuanse wywołaniem elementu opartego na jego [id] jest po prostu tak:

Nie używaj go.

To nie jest spójne i nie gwarantuje otrzymania przyszłego wsparcia.

Osobiście chciałbym zobaczyć tę "funkcję" w stylu document.all. Powoduje tylko więcej problemów, niż rozwiązuje, a document.getElementById, choć z pewnością wyczerpująca, jest znacząca i zrozumiała.

+0

Oczywiście zgadzam się z *** "Nie używaj tego" ***, ale niestety przeszedł on przez [wersję roboczą HTML5] (http://www.w3.org/TR/html5/browsers. html # named-access-on-the-window-object). Istnieje [trwająca dyskusja] (http://www.w3.org/Bugs/Public/show_bug.cgi?id=11960) na temat tego, gdzie, jak można się spodziewać, Microsoft dąży do standaryzacji, a Mozilla naciska na ograniczenie "funkcji" "tylko do dziwactwa. Z tego, co widzę, Microsoft twierdzi, że zmiana zachowania IE spowodowałaby złamanie wielu stron. –

+1

@AndyE, zmieniając * wszystko * spowoduje przerwanie wielu witryn. Dzieje się tak dlatego, że zakres stron od pracy do zerwania jest ciągły, a nie dyskretny. Istnieje * wiele * stron, które są już uszkodzone. – zzzzBov

2

Korzystanie z getElementById jest bardziej elastyczne i czytelne. Na przykład, to nie będzie działać:

<input type="button" value="direct" onclick="document.innerText = 'direct';" /> 
<div id="document"></div> 

z oczywistych względów, ale będzie to:

<input type="button" value="getElement" onclick="document.getElementById('document').innerText = 'getElementById'" /> 
<div id="document"></div> 

i to bardziej jasne dla innych twórców, co się naprawdę dzieje.

0

Nie sądzę, że jest to udokumentowana funkcja, która nie działa w przeglądarce Firefox (6), ale wydaje się działać w najnowszej wersji Chrome, a także w przeglądarce IE 6-9.

Nie będę polegał na tym i uznałbym to za jeden z dziwactw funkcji przeglądarki.

Powiązane problemy