使用getElementsByTagName選擇所有div

我正在一個項目中，我只能使用JS來操縱HTML文件。我想改變HTML中所有div的背景顏色，我目前有以下幾點。使用getElementsByTagName選擇所有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看起來像這樣

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

顯然，當前的代碼只是改變的div之一，如何得到它只是操縱JS

來源

2013-04-04 npgiant

爲什麼不使用CSS這樣做呢？ – Blender 2013-04-04 01:22:17

'divs'是一個數組，因此只需用'for'循環遍歷數組。 – Barmar 2013-04-04 01:23:35

@Barmar實際上它不是一個真正的數組，但在這種情況下，人們可以把它看作一個數組。（這是一個NodeList。） – Pointy 2013-04-04 01:24:36

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); 
    }

請注意addEventListener沒有在IE < 9的支持，你必須使用attachEvent代替

DEMO

來源

2013-04-04 01:44:05 razzak

您選擇所有的div不能像這樣使用.addEventLister() - 它必須被逐個元素調用。

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

或者，你可以在一個事件偵聽器<div>元素添加到<body>元素和捕獲事件冒泡。

來源

2013-04-04 01:22:29 Pointy

使用getElementsByTagName選擇所有div

回答

相關問題