【茶包射手日記】HTML元素id應避免使用$符號

研究某應用系統網頁結構時發現一個問題。

網頁上有個<span id="THIS_IS_A_LOUSY_ID$0">BLAH</span>，開IE9 Dev Tools，配合jQuery 1.6在Script Console下指令分析，卻發現:

1. $("#THIS_IS_A_LOUSY_ID$0").length傳回0，找不到該元素
2. document.getElementById("THIS_IS_A_LOUSY_ID$0").tagName傳回SPAN，表示有抓到
3. $("span[id=THIS_IS_A_LOUSY_ID$0]").length傳回1，可找到該元素

追進jQuery內部，驗證在IE6/7以外的瀏覽器(IE8/IE9/FF/Chrome/Safari/Opera)，呼叫$("#THIS_IS_A_LOUSY_ID$0")其實是在執行document.querySelectorAll("#THIS_IS_A_LOUSY_ID$0")，其中的$符號會觸發錯誤"DOM Exception: SYNTAX_ERR (12)"，但有try…catch包容，故結果為找不到任何元素。換言之，"THIS_IS_A_LOUSY_ID$0"不被視為合法的元素識別碼。進一步查詢W3C文件:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

由以上的說明，證實了"天殺的$本來就不是一個合法的id名稱字元"，所以querySelectorAll傳回錯誤是合理的，在id中使用$才是不合理的。

大家在為HTML元素命名時請好自為之，不要找自己的麻煩囉~~~