在學習前端的知識的時候,發現使用JS無法操作class選擇器的樣式,剛開始還以為是js沒有設置,只有在jquery可以操作呢?
看了一些相關文章才清楚:
document.getElementsByClassName拿到的是數組並非某一個對象
var box = document.getElementsByClassName("box"); box.value; //返回undefined
1 var box = document.getElementsByClassName("box"); 2 box[0].value; //返回 box的內容
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <p id="p1">Hello World!</p> 6 <p class="p2">Hello World!</p> 7 8 <script> 9 document.getElementById("p1").style.color="blue"; 10 11 var sd=document.getElementsByClassName("p2"); 12 sd[0].style.color="red"; 13 sd[0].style.fontSize="30px"; 14 15 </script> 16 17 <p>上面的段落已被一段腳本修改。</p> 18 19 </body> 20 </html>
jquery的操作方式是$(classSelector),獲取的是需要的那個對象
而我在使用JS忽略了最重要的class可復用,id不可復用原則。
所以js之前沒做getElementByClassName也是出於嚴謹的考慮,現在document.getElementsByClassName返回數組應該也是出於嚴謹的考慮。