GetElementsByClassname 和 GetElementByID 的问题

Question

我正在倒计时。

我需要在我的 html 中有多个相同项目的实例。 这是我的代码：

function test() {
//                                   (AAAA,MM,DD,HH,mm,S));
var countDownDate = new Date(Date.UTC(2020,05,28,11,00,0));

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    // GMT/UTC Adjustment at the end of the function. 0 = GMT/UTC+0; 1 = GMT/UTC+1.
    var distance = countDownDate - now - (3600000 * 1);
    
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    // Output the result in an element with id="demo"
    document.getElementsByClassName("test").innerHTML = days + "<span>d</span> " + hours + "<span>h</span> "
    + minutes + "<span>m</span> " + seconds + "<span>s</span><br />";
    
    
    // If the count down is over, write some text 
    if (distance < 0) {
        document.getElementsByClassName("test").innerHTML = "Live <i class='fa fa-circle faa-flash animated'></i>";
    }    
}, 1000);

}

问题是当我使用：document.getElementsByClassName("test") 时，我的 html 中没有任何内容，但如果我使用：document.getElementByID("test")，那么它确实有效。 但我不需要使用 id，因为我需要该元素在同一个 html 中多次出现

Answer 1

document.getElementsByClassName 

返回一个 HTML 集合，它就像一个项目数组。您需要设置数组中每个元素的innerHTML。试试：

document.getElementsByClassName('test').forEach(element => element.innerHTML = "Your Code Here")

Answer 2

getElementsByClassName() 方法以 HTMLCollection 对象的形式返回文档中具有指定类名的所有元素的集合。

HTMLCollection 对象表示节点的集合。可以通过索引号访问节点。索引从 0 开始

您可以使用 test 找出所有类名为 test 的节点 Array.from(document.getElementsByClassName("test")) 。请在下面找到代码。

var domElements= Array.from(document.getElementsByClassName("test"));
/*For particular element*/
domElements[index].innerHTML="Your Content";
/*For all elements*/
domElements.map(element=>
{
    element.innerHTML="Your Content";
});

Answer 3

当我看到这个问题时，它提到使用getElementsByClassName不会得到任何东西，如果添加类我可以想到的事情。

真的不知道为什么要投反对票，这真的是一个基本问题。

这是工作小提琴： https://jsfiddle.net/t3Lc9ns6/

document.getElementsByClassName 应该可以工作，它会返回一个 HTMLCollection。请检查您的 HTML 元素是否包含“测试”类。

document.getElementsByClassName('test')

Answer 4

getElementsByClassName 返回具有特定类名的 html 元素集合作为 array 。在您的情况下，它返回一个类名为 test 的对象集合。

您应该使用上述方法： var element=document.getElementsByClassName("test"); element[0].innerHTML="你的内容";

它会起作用的！

Answer 5

document.getElementsByClassName 返回一个HTMLCollection 不是一个特定的元素，所以你不能在它上面使用innerHTML 而不先获取元素。使用迭代循环遍历集合中的所有项目。

另外，由于HTMLCollection 不支持简单的forEach，您可能需要改用querySelectorAll。

document.querySelectorAll('.test').forEach((element) => {element.innerHTML = "test"})

Answer 6

如果你想使用className，那么你需要使用迭代

let items= document.getElementsByClassName("test");

for(let i = 0; i < items.length; i++) {
   items[i].innerHTML = `your innerHTML here`;
}