需要将getByID更改为ClassName(Javascript）

当我使用getElementByID执行此操作时，它正在工作。但当我将其更改为className时，它就不起作用了。

我之所以要用类名来做这件事，是因为页面中会有很多循环（php）票证，这些票证是按票证编号排序的。当点击特定票证的"查看"时，它会在上面显示完整的消息

当然，我不能通过这里的多个重复的"id"来获得它。我需要将其更改为仅类名。请帮帮我。

            <div id="menuTiket">
                <span style="padding:10px; background:yellow; float:right;">
                    <a href = "javascript:void(0)" onclick ="document.getElementsByClassName('light').style.display='block'; 
                                                             document.getElementsByClassName('fade').style.display='block';
                                                             ">Tiket Baru</a></span></div>
                    <!--Black Overlay-->    
                    <div id="fade" class="fade overlayMessage" onLoad="initDynamicOptionLists()"></div>                                        
                    <!--Pop Up Div-->   
                    <div id="light" class="light popupBoxMesage">                      
                            <span style="position: absolute; top: 11px; right:1px; color:white;" id="closeBlocked">
                                <a style="color:green; text-decoration:none; background:white; padding:10px;" href = "javascript:void(0)" onclick ="document.getElementsByClassName('light').style.display='none'; document.getElementsByClassName('fade').style.display='none'"><b> X </b></a>
                            </span>
                        </div> 

CSS：

    <style type="text/css">
            .overlayMessage{
                display: none;
                position: fixed;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: black;
                z-index:10000001;
                -moz-opacity: 0.5;
                opacity:.45;
                filter: alpha(opacity=40);
            }
            .popupBoxMesage {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                bottom:0;
                right:0;
                border: solid 10px darkseagreen;
                background-color: greenyellow;
                width:70%;
                height:400px;
                z-index:10000002;
                overflow: auto;
                padding: 1% 2% 12px 2%;
                margin: auto;
            }
            /* CSS Document */
    </style>