logo标签列表

使用 getElementsByTagName 选择所有的 div 元素

javascript
6

我正在处理一个项目，只能使用JS来操纵HTML文件。我想要改变HTML中所有div的背景颜色，目前我有以下代码。

//Highlight Function

function highlight(e) {
  e.target.style.backgroundColor = "orange";
}

function unhighlight(e) {
  e.target.style.backgroundColor = "green";
}

function init() {
  //Mouseover
  var divs = document.getElementsByTagName("div")[0];
  divs.addEventListener('mouseover', highlight, false);
  divs.addEventListener('mouseout', unhighlight, false);
}
window.addEventListener("load", init, false);

HTML代码如下：

这是HTML的代码

。
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

很明显，当前代码只更改了一个div，如何通过仅操作JS来选择所有的div。
1
为什么不用CSS来实现这个呢？ - Blender
divs 是一个数组，所以只需使用 for 循环遍历该数组即可。 - Barmar
@Barmar 实际上它并不是一个真正的数组，但在这种情况下可以将其视为一个数组。（它是一个NodeList。） - Pointy
JQuery $('div')，有人用过吗？这不是很简单，而且将来使用起来会更好吗？ - Shinigamae
2个回答
8
var elm = document.getElementsByTagName('div');

function highlight() {
    this.style.backgroundColor = "orange";
}

function unhighlight() {
    this.style.backgroundColor = "green";
}

function init() {
    for (var i = 0; i < elm.length; i++) {
        if (window.addEventListener) { //Firefox, Chrome, Safari, IE 10
            elm[i].addEventListener('mouseover', highlight, false);
            elm[i].addEventListener('mouseout', unhighlight, false);
        } else if (window.attachEvent) { //IE < 9
            elm[i].attachEvent('onmouseover', highlight);
            elm[i].attachEvent('onmouseout', unhighlight);
        }
    }
}

    if (window.addEventListener) { //when document is loaded initiate init
        document.addEventListener("DOMContentLoaded", init, false);
    } else if (window.attachEvent) {
        document.attachEvent("onDOMContentLoaded", init);
    }

请注意，在IE 9以下版本中不支持addEventListener，您需要使用attachEvent代替。 演示
2

您不能像那样使用.addEventLister() - 它必须逐个元素调用。

for (var i = 0; i < divs.length; ++i)
  divs[i].addEventListener(...);

或者，您可以将单个事件侦听器添加到 <body> 元素中，并捕获从 <div> 元素冒泡上来的事件。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接