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

看到这个问题的时候说用getElementsByClassName什么也得不到，加了class我就想到了

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

这是工作 fiddle： https://jsfiddle.net/t3Lc9ns6/

document.getElementsByClassName 应该可以，它将 return 一个 HTML 集合。请检查您的 HTML 元素是否包含 'test' class.

document.getElementsByClassName('test')

Answer 2

如果要使用className，则需要使用迭代

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

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

Answer 3

document.getElementsByClassName

Returns 一个 HTML 集合，类似于项目数组。您需要设置数组中每个元素的 innerHTML 。尝试：

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

Answer 4

document.getElementsByClassName returns a HTMLCollection 不是特定元素，因此如果不先获取元素就不能在其上使用 innerHTML。使用迭代遍历集合中的所有项目。

此外，由于 HTMLCollection 不支持简单 forEach，您可能需要使用 querySelectorAll。

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

Answer 5

getElementsByClassName returns 具有特定 class 名称的 html 元素的集合作为数组。在您的例子中，它是 returns 具有 class 名称 test.

的对象集合

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

会成功的！

Answer 6

getElementsByClassName() 方法 returns 文档中具有指定 class 名称的所有元素的集合，作为 HTMLCollection 对象。

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

开始

您可以使用 class name 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";
});

GetElementsByClassname 和 GetElementByID 的问题

Problem with GetElementsByClass & GetElementByID

html

javascript

counter