GetElementsByTagName ƒ item () {[собственный код]} - Что это?

Question

С кодом ниже

<ul>
  <li>Rice</li>
  <li>Coffee</li>
  <li>Beans</li>
</ul>

<script>
    var elem = document.getElementsByTagName('li')
    for (var i in elem) {
        console.log(elem[i])
    }
</script>

Я вижу пять результатов следующим образом.

<li>Rice</li>
<li>Coffee</li>
<li>Beans</li>
ƒ item() { [native code] }
ƒ namedItem() { [native code] }

Что в мире два последних пункта?

Answer 1

for-in l oop перебирает все перечисляемые свойства объекта. Метод .getElementsByTagName() возвращает HTMLCollection , который может быть повторен. Дело в том, что HTMLCollection имеет дополнительные свойства (методы): item() и namedItem(), которые, по-видимому, перечислимы , и именно поэтому for-in перебирает их.

Для Во избежание этого вы можете использовать стандарт for-loop:

var elem = document.getElementsByTagName('li');
for (var i = 0; i < elem.length; i++) {
    console.log(elem[i]);
}

Вы можете прочитать о дескрипторах свойств (например, перечислимых ) здесь .

Answer 2

Методы. elem - это HTMLCollection, а не массив, у него есть эти методы, и они исторически перечислимы.

Не используйте for in. for in перебирает все ключи объекта.

Вместо него можно использовать for of:

for (const item of elem) {
  console.log(item) 
}

... или преобразовать его в массив с помощью Array.from(elem), затем вы может использовать все обычные функции массива с ним.

Вы также можете go по старинке и просто переходить от 0 к <длина: </p>

for (let i = 0; i < elem.length; i++) {
  console.log(elem[i])
}