Что имеется в моем коде

Question

Почему этот код не работает? Я думаю, что я делаю какую-то глупую ошибку.

document.addEventListener("DOMContentLoaded", function() { 
 
    var text = "Planing"; 
 
    document.getElementsByTagName("div").innerHTML = text; 
 
});

<div id="demo" class="eg"></div>

Answer 1

getElementsByTagName возвращает коллекцию всех элементов согласования (<div> с в этом случае) на странице/DOM, чтобы выбрать сначала использовать элемент обозначения массива с нулевым индексом.

document.addEventListener("DOMContentLoaded", function() { 
 
    var text = "Planing"; 
 
    document.getElementsByTagName("div")[0].innerHTML = text; 
 
});

<div id="demo" class="eg"></div>

Если вы хотите, чтобы выбрать первый элемент, вы можете использовать document.querySelector('div');

Если вы хотите, чтобы выполнить какую-то операцию на всех выбранных элементов, необходимо перебрать их.

var allDivs = document.getElementsByTagName("div"); 

for (var i = 0; i < allDivs.length; i++) { 
    allDivs[i].innerHTML = 'Div ' + i; 
} 

Answer 2

getElement сек ByTagName, как следует из названия возвращает массив элементов (даже если есть только один). Перед применением текста вам необходимо получить доступ к первому.

document.addEventListener("DOMContentLoaded", function() { 
 
    var text = "Planing"; 
 
    document.getElementsByTagName("div")[0].innerHTML = text; 
 
});

<div id="demo" class="eg"></div>