的innerHTML与getElementByClassName不起作用

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.getElementsByClassName('textbox')[0] 

编辑替换

document.getElementByClassName('textbox') 

：

此功能不适用于IE8。如果您想在此浏览器上使用它，您必须添加一个垫片，例如this question中描述的垫片。

Answer 2

这是getElementsByClassName。请注意0​​之后的复数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

这是因为getElementsByClassName正在返回一组元素。您可以尝试

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

Answer 4

如果你使用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 5

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  
} 

Answer 6

如果你可以使用jQuery的元素，这是简单的使用.html()：

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