Почему getElementsByTagName() всегда возвращает массив?

Почему это, если у меня есть только один элемент h1 в документе, я все равно должен использовать индекс для его доступа?Почему getElementsByTagName() всегда возвращает массив?

Как и ниже, не работает.

document.getElementsByTagName('h1').innerHTML = "SHUSHAN";

, но если я

document.getElementsByTagName('h1')[0].innerHTML = "SHUSHAN";

Это делает работу.

Хотя у меня есть только один h1, почему я должен указать?

источник

2017-02-07 Hye Shusho

Поскольку тип возврата представляет собой массив. Подумайте о том, насколько больно было бы, если бы эта функция иногда возвращала элемент en и иногда возвращала массив элементов, что было бы безумием. – Keatinge

Короткий ответ: Это так, что вы можете иметь здравый смысл.

Если вы не знаете, будет ли получить один элемент или набор элементов, вы должны написать оборонительную, проверку типов (глупый) код, как этого

let foo = document.getElementsByTagName('h1') 
if (foo instanceof HTMLCollection) 
    // do something with all elements 
else 
    // do something with just one element

Это делает намного больше смысл для функции всегда возвращает известный тип, Н. HTMLCollection из HTMLElement объектов

Если вы заботитесь только о получении первого элемента, вы можете использовать назначение деструктурирующих

let [first] = document.getElementsByTagName('h1') 
console.log(first) // outputs just the first h1

Это нормально, потому что назначение ясно показывает, что он ожидает массив (или массив типа) элементов, но заботится только о присвоении идентификатора для первого значения

Вы также должны знать от новых document.querySelector и document.querySelectorAll функции & hellip;

document.querySelector подберет в наиболееодин элемент из документа или возврата null
document.querySelectorAll всегда будет возвращать HTMLCollection, но может быть пустым, если ни один из элементов не соответствует селектору.

Вот как я бы написать свой код в 2017 году

setTimeout($ => { 
 
    // get the element to change 
 
    let elem = document.querySelector('h1') 
 
    // update the text of the element 
 
    elem.textContent = 'SHUSHAN' 
 
}, 3000)

<h1>wait 3 seconds ...</h1>

источник

2017-02-07 00:16:02 naomik

Можете ли вы рассказать мне, что означает $ => {...} из setTimeout? –

Это просто анонимная функция. Его можно было бы переписать как 'function() {...}' – naomik

getElement s ByTagName - само имя метода подразумевает, что оно вернет несколько элементов - т. Е. Массив. Метод всегда возвращает массив, длина которого равна количеству совпадающих элементов. Таким образом, вы всегда должны обращаться к элементам по индексу элемента в массиве.

источник

2017-02-07 00:15:56 Sunny

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

источник

2017-02-07 00:17:27

Дело в том, что getElementsByTagName всегда возвращает HTMLCollection элементов, которые в основном работают как массив. Если в этой коллекции есть только один элемент, то его индекс равен 0.

Именно поэтому вы должны указать индекс, даже если в документе есть только один элемент.

Нажмите here или here, чтобы увидеть дополнительную документацию об этом.

источник

2017-02-07 00:20:14

Почему getElementsByTagName() всегда возвращает массив?

ответ

Смежные вопросы