前端学习系列——（九）理解什么是ID选择器的“唯一性”
生活随笔
收集整理的這篇文章主要介紹了
前端学习系列——（九）理解什么是ID选择器的“唯一性”
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? 在學習CSS樣式的時候，我們肯定會遇到ID選擇器。用法一類的這里就不說了，說一說對ID選擇器可能存在的一個誤區。
誤區：id選擇器具有唯一性？
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">#id {background-color: #00ff00;}</style> </head> <body> <div style="width:200px"><p id="id">哦豁</p><p id="id">哦豁</p> </div> </body> </html>? ? 上面違反了一般教程中說到的唯一性，估計大部分初學者會認為，其中有一個標簽的樣式肯定不能生效，但實際上如下圖
? ? 納尼？兩個都生效，這不是和類選擇器一樣了嗎，都是通用的。OK，實際上這是對唯一性的理解錯了，ID選擇器設置的樣式其實也能夠文檔中多次出現并使用。
????但是！但是！但是！重要的轉折說三邊，在JS進行dom操作是就存在問題了，如下面的例子。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">#id {background-color: #00ff00;}</style> </head> <body> <div style="width:200px"><p id="id">哦豁</p><p id="id">哦豁</p> </div> <script type="text/javascript">document.getElementById("id").style.backgroundColor="#ff0000"; </script> </body> </html>? ? 按照之前的想法，JS應該針對兩個p標簽都做了樣式修改，但實際上只有第一個修改了。如下圖
? ? 于是在這里就引申出了所謂的“唯一性”，它是針對JS而言的，當文檔存在多個相同ID時，通過getElementById方法獲取到的是在文檔中第一個出現該ID的標簽(DOM節點對象)，故都推薦ID在文檔中最好只出現一次，即“唯一性”。
? ? 在實際開發中，也是遵循這樣的原則，class用于CSS布局，id用于JS操作DOM節點對象。
總結
以上是生活随笔為你收集整理的前端学习系列——（九）理解什么是ID选择器的“唯一性”的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： centos7 NTP服务器搭建
- 下一篇： 8.8 Web前端-小米商城项目实战