Использование document.getElementsByTagName () - хорошая идея или плохая идея?

Question

Хорошо, поэтому мне интересно, какой способ является предпочтительным способом доступа к определенному тегу.

Лучше использовать ..

document.getElementById('myDiv').innerHTML

или таким образом ...

document.getElementsByTagName('div')[0].innerHTML 
// I use [0] because it is the first div in the body

Я предполагаю, что совершенно неважно, как я это сделаю.

Answer 1

Абсолютно getElementById лучше в этом случае.Это намного быстрее.

Обновление

Вот тест о функциях селектора JavaScript.http://jsperf.com/queryselectorall-vs-getelementbyid/6

Не так много статей о производительности функций селектора JavaScript.Вместо этого есть много статей о производительности селектора jQuery, таких как this или this .jQuery использует встроенные функции выбора JavaScript внутри, так что вы можете догадаться из этих статей.

Answer 2

Для удобства чтения это зависит от того, что вы пытаетесь сделать.

Есть ли у вас намерение получить первый div, который получится с именем myDiv? если да, то я думаю, что getElementsByTagName лучше, так как это больше выразит то, что вы пытаетесь сделать.

Или вы намереваетесь получить myDiv, который просто случается как первый div? Если это так, используйте getElementById.

Все остальные соображения в стороне, придерживайтесь того, что выражает ваше намерение.

Answer 3

Они делают совершенно разные вещи. Если вы хотите получить определенный элемент и вам всегда нужно получать один и тот же элемент, используйте идентификатор. Если вы хотите получить конкретный элемент в зависимости от того, какое место он занимает в DOM, то используйте его позицию в getElementsByTagName NodeList.

Если вы хотите получить определенный элемент и получить его по индексу, тогда ваш скрипт будет хрупким - если вы позже измените свою структуру DOM, вам придется изменить свой код. Если вы хотите получить элемент по его позиции, то при использовании идентификатора вам потребуется добавить избыточные атрибуты в вашу разметку.

Также важно отметить, что getElementById возвращает узел DOM, а getElementsByTagName возвращает NodeList . Чтобы процитировать MDC в свойствах NodeList:

NodeList является активным, что означает, что он автоматически обновляется, чтобы синхронизироваться с деревом DOM без повторного вызова document.getElementsByTagName.

Так что, если вам нужен конкретный элемент, getElementById будет значительно быстрее.