为何JavaScript中getElementsByClassName无法结合innerHTML正常工作？

先看你提供的代码：

<p class="hello">
</p>
<script>
    //function 1 
    // let x = myFunction(20,30)
    function myFunction(a,b){
        return a*b ;
    }
    document.getElementsByClassName("hello").innerHTML = myFunction(2,3);
</script>

这两个方法的核心区别在于返回值类型：

• getElementById() 返回单个DOM元素对象，因此可以直接调用.innerHTML修改内容。
• getElementsByClassName() 返回HTMLCollection（类数组对象），它包含所有匹配该类名的元素，不是单个元素，直接给整个集合设置.innerHTML自然无效。

解决方法 #

你需要从类数组中取出具体元素后再设置内容，比如取第一个匹配的元素：

document.getElementsByClassName("hello")[0].innerHTML = myFunction(2,3);

如果不确定目标元素是否存在，建议先做判断避免报错：

const helloElements = document.getElementsByClassName("hello");
if (helloElements.length > 0) {
    helloElements[0].innerHTML = myFunction(2,3);
}

现代浏览器也可以用更灵活的document.querySelector(".hello")，它直接返回第一个匹配的元素，用法和getElementById一致：

document.querySelector(".hello").innerHTML = myFunction(2,3);

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