今天同學提問的一個“JS實現的效果是點選對應的標籤，起背景顏色變成紅色，字型變成白色”，但是她的頁面中只是字變了顏色，但是背景顏色去沒有變化，
其截圖如下：

經過頁面的除錯，發現並沒有進入到迴圈裡面，利用alert(cns.length);發現彈出的cns[]陣列的長度為0個，
問題：
1、說明在document.getElementById(“nt4”).getElementsByTagName(“ul li”);取不到對應的li,發現不能這樣取值，應該寫成：document.getElementById(“nt4”).getElementsByTagName(“li”); alert(cns.length)，證明可以取值；
2、但是取值之後，並沒有進入到onclick事件裡面去，這是為什麼呢，將onclick事件換成監聽事件： cns[i].addEventListener(‘click’,function () { }發現是可以進行點選的，因為這個頁面中的li還有其他地方寫了onclick事件，同一個元素有多個點選事件時，會被替代，所以圖中的點選事件被其他的覆蓋了，更換成addEventListene(‘click’,function () { }監聽事件即可；
3、js程式碼部分可以實行了之後，發現背景顏色還是沒有變成紅色，因為css樣式中，有原本.CRD_order li{}裡寫了背景顏色，而.lis{}的權重不夠，背景顏色自然不能覆蓋原來的顏色。

經過除錯後，的程式碼如下：
html結構如下：

<div class="CRD" id="nt4">
    <ul class="CRD_order" >
    <li class="CRD-order" id="C_rd_order1" >全部<p class="ck1" id="ck1">◆</p></li>
    <li class="CRD-order" id="C_rd_order2">未預定同學<p class="ck1" id="ck2">◆</p></li>
 

    <li class="CRD-order" id="C_rd_order3" >已預訂同學<p class="ck1" id="ck3">◆</p></li>
    <li class="CRD-order" id="C_rd_order4" >未支付定金同學<p class="ck1" id="ck4">◆</p></li>
    <li class="CRD-order" id="C_rd_order5" >已支付定金同學<p class="ck1" id="ck5">
 
◆</p></li>
    <li class="CRD-right">下載班級報表</li>           
  </ul>
 </div>

頁面效果：

需實現的效果是點選對應的標籤，起背景顏色變成紅色，字型變成白色
js程式碼：

    <script>
        var cns = document.getElementById("nt4").getElementsByTagName("li");

        for(var i = 0;i<cns.length;i++)
        {
            cns[i].addEventListener('click',function () {

                for(var i = 0;i<cns.length;i++){
                    cns[i].className = "";
                }
                this.className = "lis";
            });
        }
    </script>


//css樣式部分:
    .CRD_order  .lis{
            background: red;
            color: #fff;
        }

知識點：
1、.getElementsByTagName(“li”);取值為一個li集合，對每個li點選事件需要for迴圈才能取到具體的每個li

for(var i = 0;i<cns.length;i++)
        {
            cns[i].addEventListener('click',function () {

        }

2、一個元素不能有多個點選事件，會被後來的點選事件覆蓋；
3、css權重：二級權重大於一級權重：.CRD_order .lis{}的權重大於.lis{}；
4、除錯程式碼時要學會利用彈出取值的方法來確定所寫的程式碼是否正確，是否真的取到了你想要的值，取值不對，後面的也就都不會實現了；