DOM-манипуляция с document.getElementsByTagName

Question

Я заметил, что этот метод работает только тогда, когда [0] вставлен, однако я не могу найти его цель или объяснение в документации по синтаксису. Что это делает, и почему код не работает без него?

document.getElementsByTagName('body')[0].style.backgroundColor = "pink" 

Answer 1

getElementsByTagNameNodeList - коллекция всех элементов, соответствующих тегу. Поскольку это коллекция, а не один элемент, вам нужно указать, какие элементы в коллекции вы хотите использовать. A NodeList подобен массиву, поэтому вы используете индексы для доступа к отдельным элементам в коллекции - [0] означает первый. Если вы хотите сделать что-то для всех согласующих элементов, вы будете использовать for цикл:

var anchors = document.getElementsByTagName('a'); 
for (i = 0; i < anchors.length; i++) { 
    anchors[i].style.backgroundColor = 'red'; 
} 

В случае body, вы знаете, что там будет только один из них, так что нет никакой необходимости в этом, вы просто индексируете его явно с помощью [0].

Answer 2

Этот метод возвращает коллекцию (массив) элементов, соответствующих указанному имени тега. Он делает это, даже если есть только один элемент, который соответствует имени тега. Когда вы предоставляете целое число для результата метода, вы обращаетесь к определенному элементу внутри массива. Для получения базовой информации о массивах смотрите здесь: http://www.w3schools.com/js/js_obj_array.asp