Запит JavascriptSelector vs. getElementById [закрито]

121

Закрито . Це питання ґрунтується на думці . Наразі відповіді не приймаються.

Хочете вдосконалити це питання? Оновіть питання, щоб на нього можна було відповісти фактами та цитатами, відредагувавши цю публікацію .

Закрито 5 років тому .

Удосконаліть це питання

Я чув, що querySelector& querySelectorAllнові методи вибору DOMелементів. Як вони порівнюються зі старими методами getElementByIdта getElementsByClassNameщодо продуктивності та підтримки браузера?

Як ефективність порівнюється з використанням селектора запитів jQuery?

Чи є рекомендація з найкращої практики, який нативний набір використовувати?

javascript jquery dom

— ідеToEleven
джерело

Визначте краще. Вони майже зовсім різні.

Це як запитати "чи краще однорозмірний гайковий ключ, ніж регульований гайковий ключ?" Відповідь: вони є більш потужними і більш гнучкими, і тому в багатьох випадках перевершують, але getElementByIdі getElementsByClassNameпо - , як і раніше ідеально підходить для цілей їх імена описують.

— самотній день

О, і qS/qSAможе використовуватися з будь-якого контексту елемента, але gEBIможе бути використаний лише з documentконтексту.

getElementByIdвідповідає idатрибутам для пошуку вузлів DOM під час querySelectorпошуку селекторами. Так, для недійсного селектора, наприклад <div id="1"></div>, він getElementById('1')би працював, але querySelector('#1')не idquerySelector('[id="1"]')

— вдався

Просто FYI для тих , хто читає це, але querySelectorі querySelectorAllповністю підтримуються. caniuse.com/#feat=queryselector

— Telarian

Відповіді:

130

"Краще" є суб'єктивним.

querySelector є новішою функцією.

getElementByIdкраще підтримується, ніж querySelector.

querySelectorкраще підтримується, ніж getElementsByClassName.

querySelectorдозволяє знаходити елементи з правилами, які неможливо виразити за допомогою getElementByIdта таgetElementsByClassName

Вам потрібно підібрати відповідний інструмент для будь-якого завдання.

(У вищесказаному для querySelectorчитання querySelector/ querySelectorAll).

— Квентін
джерело

підтримка querySelector: caniuse.com/#feat=queryselector

— tazboy

@JasonVanDerMeijden - Навряд чи буде суттєвим, ймовірно, варіюватиметься від браузера до браузера.

— Квентін

Дуже гарна відповідь, і ось кілька тестових тестів

— angel.bonev

чому краще підтримується порядок: getElementById> querySelector> getElementsByClassName, тому що я думав , що getElementsByClassNameповинен мати такий же рівень підтримки , як getElementById?

— Лей Ян

Ця відповідь, схоже, не стосується різниці між методами, зокрема ефективними.

— Dror Bar

Функції getElementByIdі getElementsByClassNameдуже специфічні, в той час як querySelectorі querySelectorAllбільш детальні. Я здогадуюсь, що вони насправді матимуть гірші показники.

Також вам потрібно перевірити підтримку кожної функції в браузерах, на які ви орієнтуєтесь. Чим вона новіша, тим більша ймовірність відсутності підтримки або функція "баггі".

— Тіаго Негрі
джерело

@thomas ваше посилання не працює. Чи є десь робоче посилання?

— user5508297

Є кілька архівованих версій: web.archive.org/web/20160108040024/http://jsperf.com/… Але тест насправді дуже старий (2010 р.), Тому результат може бути дуже різним у порівнянні з більш сучасними двигунами.

— thomas

Заархівована сторінка насправді динамічна і дозволяє повторно запустити тест у вашому поточному браузері. querySelectorAll все ще повільніше, як повідомляється, приблизно 37% у моєму браузері. (Chrome 71 - vgy.me/TwGL3o.png ) Також варто відзначити, що getElementById повертає живий результат, тобто якщо ви зміните DOM, зміна буде відображена результатом, отриманим getElementByID (якщо є в області), тоді як ноделіст повертається querySelectorAll - це знімок, наприклад, як це було в момент здійснення дзвінка, результат не відображатиме подальші зміни в DOM.

— W.Prins

nodelist ... is not liveви можете надати документацію на це? @ W.Prins обидва способи повертають Elementтип.

— Максиміліан Бурслі

Ах, я бачу, я зробив помилковий помилку, прийміть свої вибачення! Я повинен був написати "getElementsByClassName", де я написав "getElementByID", наприклад, це getElementsByClassName (і подібне), яке повертає набір результатів ". Дійсно, і getElementsByClassName, і querySelectorAll повертає NodeList, але в першому випадку це живе, і в останньому це знімок.

— W.Prins