Использование значения индекса в document.getElementsByTagName
Почему [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;
});
Почему вы считаете, что не должно? document.getElementByTagName дает вам массив как объект, и вы можете получить доступ к индексу
мы здесь, чтобы помочь вам заставить ваш код работать, а не объяснять ваш код для вашего кода.
да, я знаю, но почему он помещен сразу после document.getElementsByTagName("h1") @Pointy
@CodeManiac, потому что сразу после document.getElementsByTagName("h1") это странное место для него.
@HeavensGate666 это не странно, если вы просто хотите получить только первый элемент, вы пишете так
@CodeManiac хорошо, я думаю, это выглядит странно для меня, потому что я новичок во всем этом
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Он возвращает значение, подобное массиву (я полагаю, HTMLCollection), и поэтому для доступа к первому вы используете обозначение массива [0]. Если вы не хотите этого делать, используйте вместо этого querySelector:
const myHeading = document.querySelector("h1");
Причина, по которой [0] помещается после вызова getElementsByTagName(), заключается в том, что с функциями, возвращающими значения, вы можете думать об этом как о замене вызова возвращаемым значением, поэтому он идет после вызова для получения первого элемента. Если хотите, посмотрите на это так:
const headings = document.getElementsByTagName("h1");
const myHeading = headings[0];
Я знаю, что такое запись массива, но почему она должна идти сразу после document.getElementsByTagName("h1"). Я думаю, что это странное место, чтобы быть в
@HeavensGate666 какое место может быть менее странным? Возвращаемое значение из вызова функции представляет собой объект, подобный массиву, поэтому имеет смысл размещать элементы индекса массива сразу после вызова функции.
Он возвращает коллекцию узлов. Нам нужно получить к нему доступ через его index.
Why does the [0] before the semicolon of the constant declaration work?
Запишите значение 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.info(myHeading);
for (let keys in myHeading) {
console.info(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>
Функция возвращает значение, подобное массиву.