x3dom change color of a class of elements

I want to change the color of a class of elements.

Example:

<transform translation='-2 0 0'> 
      <shape  id="N0_0_0"> 
       <appearance> 
         <material class="L2_0_0_3 L2_0_0_2" diffuseColor='1 0 0'></material> 
       </appearance> 
       <box size='0.5,0.5,0.5'></box> 
    </shape> 
    </transform> 
    <transform translation='2 0 0' > 
      <shape id="N2_0_0"> 
       <appearance> 
         <material class="L2_0_0_3 L2_0_0_1" diffuseColor='1 0 0'></material> 
       </appearance> 
       <box size='0.5,0.5,0.5'></box> 
    </shape> 
    </transform>

When a specific event occurs, (in my case a onMouseOver event of an element), I would like to change the color of all elements of class "matT1". I tried so far to change the color of the first element, but it's not working.

document.getElementsByClassName("matT1")[0].prop('diffuseColor', '0 0 1');

Solution

I solved it using jquery.

<script src="http://code.jquery.com/jquery-latest.js"></script>

I just added a class for each element that color I wanted to change.

 <transform 
    onmouseover="$('material.L2_0_0_3').attr('diffuseColor', '1 0.25 0.25');"
    onmouseout ="$('material.L2_0_0_3').attr('diffuseColor', '0.5 0.5 0.5');">

the onmouseout flips the color back to normal again. $('material.L2_0_0_3') selects all elements which are materials (did this for performance) and are members of the class "L2_0_0_3".