Obtention ou modification de la propriété de classe CSS avec JavaScript en utilisant le style DOM

Mon objectif est de changer la couleur d'arrière-plan d'une des colonnes dans une table sans s'attaquer à chaque entrée individuellement par Id ou Nom. Je sais qu'il ya plusieurs façons de le faire, et j'ai essayé 3 pour être exact, et je vais avoir des problèmes avec chaque. Par souci de simplicité et de clarté, Dans cette question, je me demande comment réussir à le faire à l'aide de la de l'élément.style.backgroundColor objet dans les DOM. Voici mon code HTML:

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="tester.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript" src="tester.js"></script> 
    </head>
    <body>
    <button type="button" onClick="testerFunction()">Test</button>
        <table>
            <tr>
                <th class="col1">Column 1 Header</th>
                <th class="col2">Column 2 Header</th>
            </tr>
            <tr>
                <td class="col1">R1 C1</td>
                <td class="col2">R1 C2</td>
            </tr>
            <tr>
                <td class="col1">R2 C1</td>
                <td class="col2">R2 C2</td>
            </tr>
        </table>
     </body>
 </html>

Mon fichier CSS:

.col1{
    background-color:lime;  
}

Et mon fichier Javascript:

function testerFunction() {
    alert (document.getElementsByClassName('.col1').style.backgroundColor);  
}

Quand je le lance j'obtiens à peu près le même message d'erreur dans IE, Firefox et Chrome:

impossible de lire la propriété 'backgroundColor' Undefined.

J'ai le sentiment qu'il a quelque chose à voir avec le type de données renvoyé par la document.getElementsByClassName objet DOM. Le site référencé dit qu'elle renvoie un HTMLcollection. D'autres endroits que j'ai trouvé dit qu'elle renvoie à une "liste" des éléments. J'ai essayé de faire un tableau et de l'affectation du résultat sur le tableau et d'accéder à chaque élément du tableau avec une boucle, mais j'ai reçu la même erreur au même endroit. Il se pourrait que je ne sais pas comment gérer une, "collection". En tout cas, j'attendais, de la chaux ou de l'hex ou rvb équivalent, car c'est ce que j'ai défini dans le fichier CSS. Je veux être en mesure de le changer avec Javascript. Toute aide serait grandement appréciée. Merci!

EDIT: Ajout d'arguments pour Shylo Hana, la Réponse à la rendre plus modulaire

function testerFunction() {
    changeColumnColor('col1','blue');
}
function changeColumnColor(column,color) {
    var cols = document.getElementsByClassName(column);
    for(i=0; i<cols.length; i++) {
      cols[i].style.backgroundColor = color;
    }
}

source d'informationauteur jgrant