How to target and affect dom element in js (noobie)
<p>so long story short,</p>

<p>I'm testing something out, a simple rollover and i notice that for example, if i use this</p>

<pre><code>css:
#box{ width:200px; height:200px; background-color:#F00;}

html:
&lt;div id="box" class="boxClass"&gt;this is sample text&lt;/div&gt;


Js:
var box = document.getElementById("box");

function changeBox(){
    //box.style.backgroundColor = "#1896fa";    
    box.style.backgroundColor = "#1896fa";

}

box.onmouseover = changeBox;
</code></pre>

<p>it works, simple as can be. simple mouseover, simple js...simple. Mouse rolls over and changes from red to bue...good, but then when i try to target the same div via</p>

<pre><code>var box = document.getElementsByTagName("div");
</code></pre>

<p>or</p>

<pre><code>getElementsByClassName("boxClass");
</code></pre>

<p>nothing happens. my ? is why?</p>

<p>reason im asking is because, i have a simple image gallery and wanted to implement gallery wide rollovers but didnt want to write them for EVERY image.</p>

<p>was trying to somehow group them all together via tagName("img") or ClassName("boxClass")</p>

<p>but to no avail. i know older browsers dont support some of these but i looked it up and saw all modern browsers sans Ie are a go. what am i missing?</p>

<p>any tips help direction is appreciated. thanks in advance.</p>
