提醒：本文最後更新於 2105 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

之前說過，給元素的id或者class取一個看上去就是廣告的名字，很容易被adblock幹掉（當然如果你的網站足夠有名，怎麼取名都沒用，不出三天，立馬就有針對你的專屬規則）。所以在寫html屬性值的時候，我們除了要遵守html編碼規範，還要看下adblock常用的ChinaList+EasyList過濾列表中的預設規則，不要被匹配到。還要避免踩到陳舊瀏覽器帶來的坑。

上週某同學踩到的坑是：給form裡某個input的name屬性寫了一個名為name的屬性值。

<form action="url" method
 
="get" name="form1">
    <input name="name" />
</form>
<script>
var form = document.getElementsByTagName('form')[0];

alert('form.name:' + form.name);
alert('form.getAttribute("name"):' + form.getAttribute('name'));
</script>

在IE6、7下，上面最後兩行程式碼都會取到object，也就是那個input，不會得到form元素的name屬性值。其它瀏覽器，form.name得到的是input元素，form.getAttribute('name')得到的是字串"form1"。

QWrap有個ajaxForm方法，接受form引數，程式碼內部獲取form的所有資料項以及action和method屬性值進行提交。程式碼使用的是form.action、form.method，如果form裡剛好有name等於這兩個值的表單元素，就會出錯。這裡如果改成getAttribute，至少能保證IE6、7之外的瀏覽器得到正常的結果；對於IE6、7，可以通過getAttributeNode來獲取到正確的值。但是由於很多人都習慣用form.xxx來獲取表單的屬性，給表單元素的name屬性值命名還是要儘可能的避開常見的form屬性名，如name|method|action等。

另外的坑是IE6給元素指定了id="xx"，可以通過window.xx得到這個元素。這在某些場景下會帶來問題，例如QWrap所有方法都是定義在QW名稱空間下，為了使用方便在最後的retouch檔案中，通過mix(window, QW)，把方法提到window下。但是這個mix預設不override，如果頁面在引用QWrap之前寫了一個<div id="W"></div>，QWrap的W就壞掉了。更鬱悶的是IE6對name和id的混亂實現，對於支援name屬性的a|input等元素，name可以當id來用，寫一個<input name="W" />也會在window下定義一個W變數。後來QWrap改成了window.W = QW.W來避免這個問題。

有時候，我們寫程式碼會使用typeof XX !== 'undefined'或者!!window.XX來判斷一個頁面是否引用了某JS。由於這個bug的存在，IE6中這段程式碼出現在id|name="XX"的元素之後會得到錯誤的結果。這種情況，一方面js中需要做更多的檢查；另一方面，給html元素的id和name命名時也要格外小心。

--EOF--

提醒：本文最後更新於 2105 天前，文中所描述的資訊可能已發生改變，請謹慎使用。