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

網頁上有個<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元素命名時請好自為之,不要找自己的麻煩囉~~~


Comments

# by Frully

其实我觉得跑一下 HTML Validator 就能发现问题了

Post a comment


57 - 30 =