getElementByID 有效，getElementsByClassName 无效

Question

我正在开发一种动态添加 select 输入/下拉框到页面的解决方案。如果我给每个 select 输入一个唯一的 id 并使用 getElementById() 在脚本中包含一行 cod4e，下面的示例代码就可以工作，但是如果我使用 GetElementsByClassName().

就不起作用

我的objective是使用一个脚本来填充select输入框，而不需要为select输入分配一个唯一的id和脚本的相应代码。

    <select class="p1"></select>
    <select class="p1"></select>
    <select class="p1"></select>

    <script>
    var Date1 = "<option>" + new Date(new Date().getTime()+(1*24*60*60*1000)).toDateString() + "</option>";
    var Date2 = "<option>" + new Date(new Date().getTime()+(2*24*60*60*1000)).toDateString() + "</option>";
    var Date3 = "<option>" + new Date(new Date().getTime()+(3*24*60*60*1000)).toDateString() + "</option>";
    var Date4 = "<option>" + new Date(new Date().getTime()+(4*24*60*60*1000)).toDateString() + "</option>";
    var Date5 = "<option>" + new Date(new Date().getTime()+(5*24*60*60*1000)).toDateString() + "</option>";
    var Date = Date1 + Date2 + Date3 + Date4 + Date5

    document.getElementsByClassName("p1").innerHTML = Date;
    </script>

Answer 1

getElementsByClassName()函数（注意"Elements"中的s）returns一个NodeList，不是单个节点。您必须遍历列表才能单独对每个节点进行操作。

你可以用一个简单的 for 循环来完成：

var selects = document.getElementsByClassName("p1");
for (var i = 0; i < selects.length; ++i)
  selects[i].innerHTML = Date;

我强烈怀疑您的代码还有另一个问题：您正在创建一个名为 "Date" 的全局变量，这将破坏 JavaScript "Date" 构造函数绑定。使用其他名称（如小写 "date"）。

getElementByID 有效，getElementsByClassName 无效

getElementByID works, getElementsByClassName does not

javascript

getelementbyid

getelementsbyclassname