Question

我知道也许不是使用getElementsByClassName的正确方法。例如，下面的代码不起作用，因为它是“为什么？”，但当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>

Answer 1

getElementsByClassName返回一个集合（HTMLCollection，它是一个类似于数组的对象＆＃34;），因为可能有多个具有该类名的元素。 集合没有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是拼写错误。）}

Answer 2

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

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

＆＃13;

    <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>

＆＃13;

getElementById和getElementsByClassName之间有什么区别

2 个答案: