Использование значения индекса для document.getElementsByTagName

Question

Почему [0] перед точкой с запятой объявления константы работает?

const myHeading = document.getElementsByTagName("h1")[0];
const myButton = document.getElementById("myButton");
const myTextInput = document.getElementById("myTextInput");
const myP = document.getElementById("myP");

myButton.addEventListener("click", () => {
  myHeading.style.color = myTextInput.value;
});

Answer 1

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

const myHeading = document.querySelector("h1");

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

const headings = document.getElementsByTagName("h1");
const myHeading = headings[0];

Answer 2

Почему [0] перед точкой с запятой объявления константы работа

Записать значение document.getElementsByTagName("h1"). Вы можете увидеть что-то вроде этого

{
  "0": <h1> Here is a Header</h1>,
  "length": 1,
  "item": function item() { [native code] },
  "namedItem": function namedItem() { [native code] }
}

, который, по-видимому, представляет объект и теперь выполняет итерацию этого объекта, используя for..in, вы получите ключи 0, length, item и т. Д., Где 0 представляет элемент dom. Чтобы получить доступ к свойству объекта, вы можете использовать квадратную запись [] и передать имя ключа внутри него. Итак ["0"]. Таким образом, в основном document.getElementsByTagName("h1")[0] обращается к элементу с ключевым именем 0 из коллекции. Следовательно document.getElementsByTagName("h1")[0] работает

const myHeading = document.getElementsByTagName("h1");

console.log(myHeading);
for (let keys in myHeading) {
  console.log(keys)
}

const myButton = document.getElementById("myButton");
const myTextInput = document.getElementById("myTextInput");
const myP = document.getElementById("myP");
myButton.addEventListener("click", () => {
  myHeading[0].style.color = myTextInput.value;
});

<h1> Here is a Header</h1>
<input type='text' id='myTextInput'>
<button type='button' id='myButton'>Click</button>

Answer 3

Возвращает коллекцию узлов.Нам нужно получить к нему доступ через его индекс.