如何使用相同的数据填充页面上的多个元素（具有相同的 class）？

Question

我知道如何显示当前年份并通过 ID 传递它，但是 ID 当然只会显示一次。我需要能够在整个站点中多次显示它。

我该如何完成？

//get year 
var yyyy = new Date().getFullYear();

currYear.innerHTML = yyyy;


//trying to display as a class
document.getElementsByClassName('thisYear')[0] = yyyy;

<span id="currYear"></span>
<span class="thisYear"><span>

Answer 1

据我了解，您正试图将当前年份添加到 HTML 中的多个元素？目前，您只将它分配给第一个 ( [0] )。您可以使用 class thisYear 解析每个元素并将当前年份添加到它们。

//get year 
var yyyy = new Date().getFullYear();

//trying to display as a class
//the document.getElementByClassName returns a htmlCollection. not an array directly.
//
Array.from(document.getElementsByClassName('thisYear')).forEach(function(element) {
  element.innerHTML = yyyy;
});

<div class="thisYear">this year</div><br>
<div class="thisYear">this year</div><br>
<div class="notThisYear"> not this year</div><br>
<div class="notThisYear">not this year</div><br>
<div class="thisYear"></div>

P.S. 这个答案只反映了 OP 的要求。如果您希望看到更新且与浏览器兼容的内容，请参阅。

Answer 2

document.getElementsByClassName('thisYear')[0] = yyyy; 尝试将调用返回的 DOM 元素设置为年份，而不是将 DOM 元素的某些属性设置为年份。

为了使您的代码正常工作，"quick fix" 是将 .innerHTML 添加到您的行中：

document.getElementsByClassName('thisYear')[0].innerHTML = yyyy;

However, .getElementsByClassName() (along with similar APIs from the 1990s, like getElementsByTagName(), getElementsByName() and others) should no longer be used. I've written about this and the idea of adding an index to the end of a method that returns a node list here.

相反，请使用符合标准的现代 .querySelector() 和 .querySelectorAll()，然后您需要遍历集合并单独修改元素。

查看内嵌的附加评论：

//get year 
var yyyy = new Date().getFullYear();


// .querySelectorAll returns a node list, which is not an actual Array implementation.
// IE doesn't support calling .forEach on node lists, so if you need to support IE
// you'll need to convert the node list into an aray in order to call .forEach and you'll
// need to do it in a way that IE understands (not Array.from()):

// Array.prototype.slice.call(document.querySelectorAll('.thisYear')).forEach(function(element) {

// But, if you are not concerned with IE, you can call .forEach() directly on the node list
document.querySelectorAll('.thisYear').forEach(function(element) {
  // When the content you wish to update doesn't contain any HTML, don't use .innerHTML
  // which has performance and potential security implications, use .textContent instead
  element.textContent = yyyy;
});

div { margin-bottom:1em; }

<div class="thisYear">this year</div>
<div class="thisYear">this year</div>
<div class="notThisYear"> not this year</div>
<div class="notThisYear">not this year</div>
<div class="thisYear"></div>

Answer 3

我猜你正试图将当前日期分配给具有相同 class 的多个元素，如果是的话。请看下面这个例子。

var items = document.getElementById( 'items' ),
    divs = document.getElementsByClassName( 'count' );

[].slice.call( divs ).forEach(function ( div ) {
    div.innerHTML = items.innerHTML;
});

来源： Replace innerHTML of all divs with same class

如何使用相同的数据填充页面上的多个元素（具有相同的 class）？

How do I populate several elements on a page (that have the same class) with the same data?

javascript

getelementbyid

getelementsbyclassname