getElementById 和 getElementsByClassName 有什么区别 [重复]答案

【问题标题】：What's the difference between getElementById and getElementsByClassName [duplicate]getElementById 和 getElementsByClassName 有什么区别 [重复]
【发布时间】：2016-05-07 17:06:29
【问题描述】：

我知道可能不是使用getElementsByClassName 的正确方式。例如，下面的代码不起作用，因为它是 ¿why?，但是当将 getElementsByClassName("demo") 更改为 getElementById("demo2") 时确实起作用

<!DOCTYPE html>
<html>
<body>

<p>Click the button.</p>
<button onclick="myFunction()">Try it</button>
<p class="demo" id="demo2">anything</p>

<script>
function myFunction() {
var str = "How are you doing today?";
var res = str.split(" ");
document.getElementsByNameClass("demo").innerHTML = res;
}
</script>

</body>
</html>

【问题讨论】：

因为getElementsByNameClass（实际上应该是getElementsByClassName）返回一个集合，而getElementById返回一个元素。该集合没有innerHTML 属性，设置它没有效果。
我很惊讶getElementsByNameClass 做了什么。
OP 在问题中 75% 的尝试中拼写正确。一个拼写错误肯定是一个错字。
@Vohuman：请在答案部分写下你的答案。你可以在下面找到它。
@LightnessRacesinOrbit 讽刺？关于 SO 的许多问题要么是重复的，要么是超级简单的问题。这就是为什么我通常不发布答案的原因。但你是对的，cmets 可以掩盖答案。我会考虑的。

标签： javascript

【解决方案1】：

getElementsByClassName 返回一个集合（HTMLCollection，它是“类似数组的对象”），因为可能有多个具有该类名称的元素。 集合没有 innerHTML 属性。您必须使用循环 iterate over each element in the collection：

var elements = document.getElementsByClassName("demo");
for (var i = 0; i < elements.length; i++) {
   elements[i].innerHTML = res;
}

相比之下，getElementById 返回单个元素，它可以这样做，因为 ID 是唯一的。

^{（我假设您的示例中的 getElementsByNameClass 是一个错字。）}

【讨论】：

【解决方案2】：

getElementById() 用于使用它们的id 访问 DOM 元素，getElementsByClassName() 用于使用它们的class 访问元素。

您的代码不起作用，因为getElementsByClassName() 返回具有给定类的所有元素的类数组对象。您需要为您的场景访问数组的第一个元素

    <html>
    <body>

    <p>Click the button.</p>
    <button onclick="myFunction()">Try it</button>
    <p class="demo" id="demo2">anything</p>

    <script>
    function myFunction() {
      var str = "How are you doing today?";
      var res = str.split(" ");
      document.getElementsByClassName("demo")[0].innerHTML = res;
    }
    </script>

    </body>
    </html>

【讨论】：

这不是一个数组。
更新更正。它的类数组对象
此外，在我看来，如果 OP 只想处理类的第一个实例（为什么是第一个？为什么不是第二个？第三个？）他们会使用 ID 代替.
同意。但是具体代码sn-p的解决方法要求它是列表的第一个成员（类数组对象）
代码 sn-p 是一个“示例”。在解决一般问题时，将其未提及的细节作为要求是不明智的。为什么不使用循环？当没有找到匹配的元素时，这具有额外的优势，即不会导致令人讨厌的错误消息并破坏您的脚本。