JavaScript querySelector a getElementById [zamknięte]

122

Słyszałem, że querySelectori querySelectorAllto nowe sposoby, aby wybrać DOMelementy. Jak wypadają w porównaniu ze starszymi metodami getElementByIdoraz getElementsByClassNamepod względem wydajności i obsługi przeglądarek?

Jak wypada wydajność w porównaniu z użyciem selektora zapytań jQuery?

Czy istnieje zalecenie dotyczące najlepszych praktyk, dla którego należy użyć zestawu natywnego?

javascript jquery dom

— GoesToEleven
źródło

Zdefiniuj lepiej. Są prawie zupełnie inni.

To tak, jakby zapytać „czy klucz o jednym rozmiarze jest lepszy od klucza nastawnego?” Odpowiedź brzmi: są one mocniejsze i bardziej elastyczne, a więc wielokrotnie wyższych, ale getElementByIdi getElementsByClassNamenadal są idealne do celów ich nazwy opisać.

— samotny dzień

Aha, i qS/qSAmoże być używane z dowolnego kontekstu elementu, ale gEBImoże być używane tylko z documentkontekstu.

getElementByIddopasowuje idatrybuty, aby znaleźć węzły DOM, podczas querySelectorwyszukiwania za pomocą selektorów. Tak na nieprawidłowym selektora np <div id="1"></div>, getElementById('1')będzie działać, gdy querySelector('#1')nie powiedzie się, jeśli nie powiedzieć, dopasowując go do idatrybutu (np querySelector('[id="1"]').

— Samuel ELH

Po prostu FYI ktokolwiek czyta to, ale querySelectori querySelectorAllsą w pełni obsługiwane teraz. caniuse.com/#feat=queryselector

— Telarian

Odpowiedzi:

132

„Lepsze” jest subiektywne.

querySelector to nowsza funkcja.

getElementByIdjest lepiej obsługiwany niż querySelector.

querySelectorjest lepiej obsługiwany niż getElementsByClassName.

querySelectorpozwala znaleźć elementy z regułami, których nie można wyrazić za pomocą getElementByIdigetElementsByClassName

Musisz wybrać odpowiednie narzędzie do każdego zadania.

(Powyżej do querySelectorczytania querySelector/ querySelectorAll).

— Quentin
źródło

querySelector wsparcie: caniuse.com/#feat=queryselector

— tazboy

@JasonVanDerMeijden - raczej nie będzie znaczący, prawdopodobnie różni się w zależności od przeglądarki.

— Quentin

Bardzo dobra odpowiedź, a oto kilka testów porównawczych

— angel.bonev

Dlatego lepiej obsługiwane kolejności: getElementById> querySelector> getElementsByClassName, bo myślałem, że getElementsByClassNamepowinny mieć taki sam poziom wsparcia jak getElementById?

— Lei Yang

Ta odpowiedź nie wydaje się dotykać różnicy między metodami, szczególnie jeśli chodzi o wydajność.

— Dror Bar

Funkcje getElementByIdi getElementsByClassNamesą bardzo specyficzne, natomiast querySelectori querySelectorAllsą bardziej skomplikowane. Domyślam się, że faktycznie będą miały gorsze wyniki.

Musisz również sprawdzić obsługę każdej funkcji w przeglądarkach, na które kierujesz reklamy. Im jest nowszy, tym większe prawdopodobieństwo braku wsparcia lub „buggy” funkcji.

— Thiago Negri
źródło

@thomas Twój link nie działa. Czy jest gdzieś działające łącze?

— user5508297

Istnieje kilka zarchiwizowanych wersji: web.archive.org/web/20160108040024/http://jsperf.com/… Ale test jest w rzeczywistości bardzo stary (2010), więc wynik może być bardzo różny w przypadku nowszych silników.

— thomas,

Zarchiwizowana strona jest w rzeczywistości dynamiczna i umożliwia ponowne uruchomienie testu w bieżącej przeglądarce. querySelectorAll nadal działa wolniej, podobno o około 37% w mojej przeglądarce. (Chrome 71 - vgy.me/TwGL3o.png ) Warto również zauważyć, że getElementById zwraca wynik na żywo, co oznacza, że jeśli zmienisz DOM, zmiana zostanie odzwierciedlona przez wynik uzyskany przez getElementByID (jeśli znajduje się w zakresie), podczas gdy nodelist zwracany przez querySelectorAll jest migawką, np. jak było w momencie wywołania, wynik nie będzie odzwierciedlał późniejszych zmian w DOM.

— W.Prins,

nodelist ... is not liveczy możesz dostarczyć na to dokumentację? @ W.Prins obie metody zwracają Elementtyp.

— Maximilian Burszley

Ach, widzę, że popełniłem literówkę, przyjmij moje przeprosiny! Powinienem był napisać „getElementsByClassName”, gdzie napisałem „getElementByID”, np. To getElementsByClassName (i podobne) zwraca zestaw wyników na żywo. Rzeczywiście, zarówno getElementsByClassName, jak i querySelectorAll zwracają listę NodeList, ale w pierwszym przypadku jest aktywna, aw drugim to migawka

— W.Prins,