getElementByID有效,getElementsByClassName没有

Question

我正在研究一种动态添加选择输入/下拉框到页面的解决方案.下面的示例代码可用,如果我给每个选择输入一个唯一的id并使用getElementById()包含一行cod4e到脚本,但如果我使用GetElementsByClassName()则不起作用.

我的目标是使用一个脚本来填充选择输入框,而无需为脚本选择输入和相应代码分配唯一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)返回NodeList,而不是单个节点.您必须遍历列表才能单独操作每个节点.

你可以用一个简单的for循环来做到这一点:

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

我强烈怀疑你的代码有另一个问题:你正在创建一个名为"Date"的全局变量,这将破坏JavaScript"Date"构造函数绑定.使用其他名称(如小写"日期").