Что значит li[i].getElementsByTagName('a')[0]?

Question

[Roman Jolud]

for(let i=0;i<li.length;i++){
              let a = li[i].getElementsByTagName('a')[0];
}

Вот сам код, не могу понять, что li[i].getElementsByTagName('a')[0] значит.

Answer 1

[Aleksey Solovyev]

Если не знаете, что в переменной - выводите ее в консоль:

console.log(li, "li"); // array of elements "li"
for (var i = li.length - 1; i >= 0; i--) {
	console.log(li[i], "li[i]"); // element with sequence number "i" in array "li"
	console.log(li[i].getElementsByTagName('a'), "li[i].getElementsByTagName('a')"); // all <a> - elements in li[i]
	console.log(li[i].getElementsByTagName('a')[0], "li[i].getElementsByTagName('a')[0]"); // first <a> - element in li[i]
	let a = li[i].getElementsByTagName('a')[0];
}

Comments

[Roman Jolud]

Ф что значит li[i]?

[Aleksey Solovyev]

let array = [1, 2, 3, 4, 5 .... n]

console.log(array[0]) // вывод в консоле 1
console.log(array[1]) // вывод в консоле 2
console.log(array[2]) // вывод в консоле 3

В цикле for Вы проходите по каждому элементу в массиве. Чтобы обратиться к конкретному элементу массива используется - array[n] - где N порядковый номер.

В Вашем примере в цикле for каждый раз i увеличивается на 1.
Получается на первом проходе цикла будет li[0], на втором li[1] .... пока не достигнет конца массива li.length - 1 (потому что начинаем считать с 0). После этого выполнение цикла остановится.

<ul>
	<li></li> <!-- li[0] -->
	<li></li> <!-- li[1] -->
	<li></li> <!-- li[2] -->
	<li></li> <!-- li[3] -->
	<li></li> <!-- li[4] -->
</ul>

Answer 2

[Владимир Проскурин]

Он значит то, что в элементе li найти все элементы a (ссылки), и взять с него нулевой элемент (первый).
т.е. название говорит само за себя
getElementsByTagName
получитьЭлементПоТегаНазванию
этот метод получает массив элементов.

Answer 3

[Дмитрий Ким]

li - скорее всего массив элементов li
[i] - выбирается i-ый элемент массива li
в конце, внутри него выбираются все первые ссылки

Answer 4

[Иван]

а вообще надо изучить что есть Xpath ну и querySelector и CSS selectors . как минимум понимать что это.

Answer 5

[frees2]

li[i].getElementsByTagName('a')[0];
------------
Получаем так
2.toster
3.toster