getElementByClassName返回'未定义'，但它对Id有效

getElementByClassName returning 'undefined', but it works for Id?

本文关键字：Id 有效 未定义 返回 getElementByClassName      更新时间：2023-09-26

我正试图用class更改Id的内容，但我不知道为什么这不起作用。。。

<h1 id="header">header</h1>
<h4 id="sub">sub header</h4>
<span class="content">Please work!</span>

这返回了"undefined"，而我的文本编辑器似乎无法识别getElementsByClassName——它与getElementById 配合使用很好

 var test = document.getElementsByClassName("content").innerHTML;
 document.getElementById("header").innerHTML = test;

DEMO

这样访问它：-

document.getElementsByClassName("content")[0];

getElementsByClassName()方法得到许多DOM元素，而getElementById()只得到一个DOM元素。

问题的关键是隐藏在表达式"getElementsByClassName"中的小"s"。document.getElementsByClassName将返回一个数组，为了获得第一个元素，请使用document.getElementsByClassName("content")[0]或使用for循环遍历所有元素

var test = document.getElementsByClassName("content")[0].innerHTML;
document.getElementById("header").innerHTML = test;
var elements = document.getElementsByClassName("content")
for (var i = 0; i < elements.length; ++i) {
  // elements[i]
}
<h1 id="header">header</h1>
<h4 id="sub">sub header</h4>
<span class="content">Please work!</span>

var test = document.getElementsByClassName("content")[0].innerHTML;
document.getElementById("header").innerHTML = test;
<h1 id="header">header</h1>
<h4 id="sub">sub header</h4>
<span class="content">It's working!</span>

getElementsByClassName返回一个元素数组（而getElementById返回一个单一元素——注意复数与单数）。由于javascript数组没有innerHTML属性，因此会得到未定义的。必须首先从数组中检索一个元素。例如

var elements = document.getElementsByClassName("content");
var firstElement = elements[0];
var x = firstElement.innerHTML // and so on...

这应该可以解决您的问题。如果有什么我能做的，请告诉我：）

document.getElementById只返回一个元素。CCD_ 13和CCD_ 14可以返回多个元素，因为一个页面上可以有多个CCD_。也就是说，您必须告诉JavaScript您想要哪个元素，因为可以有多个类名为content的元素。要执行此操作，请使用document.getElementsByClassName('content')[index]。许多人喜欢在这里使用循环来快速循环具有特定类或标记名的所有元素。

希望你能学到一些东西，我每天也在这里学到一些东西：）

window.addEventListener('load', function() {
  var test = document.getElementsByClassName("content")[0].innerHTML;
  document.getElementById("header").innerHTML = test;
});
<h1 id="header">Default header HTML</h1>
<h4 id="sub">sub header</h4>
<span class="content">Content HTML</span>

相关文章：