getElementByClassName返回'undefined'，但它適用於Id？

Question

我試圖用class改變一個Id的內容，我不知道爲什麼這是不工作...

<h1 id="header">header</h1> 
<h4 id="sub">sub header</h4> 

<span class="content">Please work!</span> 

此函數返回「未定義」，而我的文本編輯器似乎沒有認識到getElementsByClassName - 它正常工作與getElementById

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

document.getElementById("header").innerHTML = test; 

DEMO

Answer 1

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>

Answer 2

這應該可以解決您的問題。讓我知道如果有什麼我可以做:)

document.getElementById只返回一個元素。 document.getElementsByClassName和document.getElementsByTagName可以返回多個元素，因爲頁面上可能有多個a元素，頁面上使用多個類名稱，但每頁只能有一個id。這就是說，你必須告訴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>

Answer 3

getElementsByClassName返回元素的數組（而getElementById返回一個元素 - 注意多與單數）。由於javascript數組沒有innerHTML屬性，因此您將獲得未定義的屬性。您必須首先從數組中檢索一個元素。例如

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

Answer 4

你的問題的關鍵是小 「S」 隱藏在表情： 「getElement 小號 ByClassName」。 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>

Answer 5

訪問這樣的： -

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

getElementsByClassName()方法獲取很多DOM元素，而不像getElementById()只獲取一個。