我可以改变一个嵌套的h2使用getElementsByTagName?

Question

我想通过在Javascript上操作DOM来更改嵌套在div下的h2的文本(并且不更改HTML文件)。

HTML:

<div id="button">
<h2>Click me</h2>
</div>

我尝试了getElementsByTagName和firstElementChild，但只有firstElementChild工作。

firstElementChild works here:

window.onload = function pageLoaded(){
const button = document.getElementById("button");
const clickMe = button.firstElementChild;
button.onclick = changeText;
function changeText(){
clickMe.innerHTML = "You clicked me";
console.log(clickMe);
}   
}

但是当使用getElementsByTagName时，"您点击了我";不会出现在网页上:

window.onload = function pageLoaded(){
const button = document.getElementById("button");
const clickMe = button.getElementsByTagName("h2");
button.onclick = changeText;
function changeText(){
clickMe.innerHTML = "You clicked me";
console.log(clickMe);
}   
}

HTMLCollection的innerText将被更新为"你点击了我"在控制台上。但为什么不在网页上更新呢?

附加问题:为什么firstElementChild只在窗口下工作。Onload事件监听器?如果我选择窗口。onload，我得到"不能得到属性为null "error for firstElementChild.

Answer 1

getElementsByTagName返回一个HTMLCollection。你必须得到它的第一项:

window.onload = function pageLoaded(){
const button = document.getElementById("button");
const clickMe = button.getElementsByTagName("h2")[0];
button.onclick = changeText;
function changeText(){
clickMe.innerHTML = "You clicked me";
console.log(clickMe);
}   
}

<div id="button">
<h2>Click me</h2>
</div>