帶有getElementByClassName的innerHTML不起作用

Question

這個作品：

<td onmouseover="document.getElementById('textbox').innerHTML='Hidden text'" onmouseout="document.getElementById('textbox').innerHTML='Show text'">
    <div id="textbox">Show text</div>
</td>

但這不是：

<td onmouseover="document.getElementByClassName('textbox').innerHTML='Hidden text'" onmouseout="document.getElementByClassName('textbox').innerHTML='Show text'">
    <div class="textbox">Show text</div>
</td>

我怎樣才能解決這個問題？ 我需要一個類多次使用它。

Answer 1

有沒有getElementByClassName功能，但一個getElementsByClassName之一，因為可以有與給定類的多個元素。

您可以更換

 document.getElementByClassName('textbox')

與

 document.getElementsByClassName('textbox')[0]

編輯您的問題之后進行編輯：

IE8不提供此功能。 如果要在此瀏覽器上使用它，則必須添加一個墊片，例如本問題中所述的墊片。

Answer 2

是getElementsByClassName 。 注意Element之后的復數s 。

並且由於它是一個數組，因此您需要指定索引號。

document.getElementsByClassName('class-name')[0].innerHTML = 'html text'

而且，如果您需要對每個元素應用更改，請使用for循環。

for(i in document.getElementsByClassName('class-name')){
    document.getElementsByClassName('class-name')[i].innerHTML = 'html text';
}

Answer 3

如果可以使用jQuery，則使用.html()更簡單：

$("#textbox").html("Hidden text") // id=textbox
$(".textbox").html("Hidden text") // class=textbox

Answer 4

那是因為getElementsByClassName返回一個元素數組。 你可以試試

document.getElementsByClassName('textbox')[0].innerHTML='Hidden text'

Answer 5

如果使用document.querySelector怎么辦：

<td onmouseover="document.querySelector('.textbox').innerHTML='Hidden text'" onmouseout="document.querySelector('.textbox').innerHTML='Show text'">
    <div class="textbox">Show text</div>
</td>

我認為這一作品。

您還應該考慮其他事項。 在您的html中添加此類內容並不是一個好主意。 那是因為每次執行某件事時。 最好緩存document.querySelector或document.getElementsByClassName的結果。 想象一下，如果表中有1000行，將會發生什么。 這是一個jsfiddle，顯示了如何提高代碼http://jsfiddle.net/krasimir/Zbgng/2/的性能

的HTML

<table><tr>
<td class="table-column">
    column1
</td>
<td class="table-column">
    column2
</td>
<td class="table-column">
    column3
</td>
</tr></table>

<div class="textbox">Show text</div>
<div class="textbox">Show text</div>
<div class="textbox">Show text</div>

JS

var columns = document.querySelectorAll(".table-column");
var textboxes = document.querySelectorAll(".textbox");
for(var i=0; column=columns[i]; i++) {
    column.addEventListener("mouseover", function() {
        replaceText("Hidden text");
    });
    column.addEventListener("mouseout", function() {
        replaceText("Show text");
    });
}
var replaceText = function(str) {
    for(var i=0; field=textboxes[i]; i++) {
        field.innerHTML = str;
    }
}

Answer 6

document.getElementByClassName('whatever')返回文檔內部的html對象元素數組，

所以你需要

var ele = document.getElementsByClassName('textbox');

ele[0].innerHTML = "Whatever text" ;

如果要將內部html設置為此類的所有元素，則可以使用

for(var i=0;i<ele.length;i++)
{
  ele[i].innerHTML = "we all are of same class";
  // or you can dynamically insert different text too    
}