getElementByClass().setAttribute 不起作用答案

【问题标题】：getElementByClass().setAttribute doesn't workgetElementByClass().setAttribute 不起作用
【发布时间】：2018-08-31 02:25:26
【问题描述】：

为什么我会写

document.getElementByClass('home1').setAttribute('style', 'background-image:url(img/red_menu.PNG);');

它不工作？我有class="home1"的元素

document.getElementById('home1')... 工作正常谢谢

【问题讨论】：

重新编辑，当我编辑我的答案时，您一定一直在这样做，以警告您它返回一个 NodeList，而不是一个元素（因为它可以匹配多个元素！）。如果您阅读链接的文档，您将更好地了解它的作用。同样，如果你使用的是 IE，它不会工作，句号。
@T.J.克劳德好的，谢谢。我会读它，但你现在能告诉我为什么它不能设置所有 NodeList 的属性吗？
因为 DOM 没有定义那种元操作（允许您调用列表上的函数并将其应用于列表的每个元素）。我想你会喜欢 jQuery，它会执行那种元操作。值得一看。
你也不应该在 HTML 文档上使用setAttribute：它在 IE6-7 中的许多属性都失败了，包括样式。直接使用 DOM Level 2 HTML/CSS 属性，更易读，更可靠。 element.style.backgroundImage= 'url(img/red_menu.PNG)';

标签： javascript html

【解决方案1】：

这是getElementsByClassName，而不是getElementByClass； details here。请注意，IE 会 not support this function（还）。

getElementsByClassName 返回匹配元素的 NodeList（而不是单个元素），所以：

var list, index;
list = document.getElementsByClassName("home1");
for (index = 0; index < list.length; ++index) {
    list[index].setAttribute(/* ... */);
}

对于这类事情，您可能希望使用像jQuery、Prototype、Google Closure 等库来为您铺平各种浏览器差异。与自己处理这些差异相比，它们可以为您节省很多时间和麻烦。

例如，在 jQuery 中：

$(".home1").attr(/* ... */);

...将该属性（通过jQuery#attr）应用于每个具有“home1”类的元素。尽管在您的特定情况下，您可能需要jQuery#css。

【讨论】：

【解决方案2】：

如果你的整个 HTML 文件中只有一个类名，那么你也可以使用

  document.getElementsByClassName('navbar-nav')[0].setAttribute('id', 'navbar-toggle');

【讨论】：