我知道也许不是使用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>
答案 0 :(得分:0)
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
是拼写错误。)
答案 1 :(得分:0)
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>
&#13;