getElementsByTagName为何无法修改嵌套h2文本？DOM操作疑问

• getElementsByTagName返回值是HTMLCollection类数组集合，即使匹配到的元素只有1个，也不会直接返回单个DOM节点，必须通过索引取到对应元素才能操作。
• 你之前的代码直接给集合对象赋值innerHTML，只是给这个集合对象新增了一个自定义属性，并没有作用到真实的h2元素上，因此页面不会同步更新。
• 修正后的代码只要加索引取第一个匹配元素即可：

window.onload = function pageLoaded(){
    const button = document.getElementById("button");
    // 加[0]取第一个匹配到的h2元素
    const clickMe = button.getElementsByTagName("h2")[0];

    button.onclick = changeText;
    function changeText(){
        clickMe.innerHTML = "You clicked me";
    }   
}

• 浏览器解析HTML页面是从上到下逐行执行的，如果你的JS代码放在DOM元素的前面（比如写在head标签内，或者body开头还没渲染到对应div的位置），代码执行时document.getElementById("button")还找不到对应的DOM节点，返回值为null。
• 此时你尝试访问null.firstElementChild，自然会抛出"cannot get properties of null"的错误。
• window.onload事件会在页面所有DOM结构、静态资源全部加载完成后才触发执行回调，此时DOM树已经完全构建完成，可以正常获取到所有页面元素，因此不会报错。

如果你不想把代码写在window.onload里，也可以把script标签放在body标签的末尾，等所有DOM元素解析完成后再执行JS代码，也能达到同样的效果。

内容的提问来源于stack exchange，提问作者Aaron