Author： Sealyu 2010-6-10
這兩天在處理瀏覽器兼容的時候碰到很多問題，特別是在重新命名checkbox的時候，在IE和Safari中都碰到一些怪異的問題。
- IE中不能在運行時重命名元素。
按照微軟的解釋，運行時是無法重命名的：
After some digging, I found an
explanation in the
MSDN
DHTML
reference, on the page describing the
NAME
Attribute.
The NAME attribute cannot be set at run time on elements
dynamically created with the createElement method. To create an element
with a name attribute, include the attribute and value when using the
createElement method.
后來找到國外的一篇帖子，找到一個解決方法，那就是使用mergeAttributes 方法，模擬新建一個只有name不同的元素，并和之前的元素合并，這樣就能達到重命名的效果了。代碼如下：
var setElementName = function(el, newName) {
el = (typeof el === "string") ? document.getElementById(el) : el;
el.name = newName;
if(/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { // Internet Explorer test
el.mergeAttributes(document.createElement("<INPUT name='" + newName + "'/>"), false);
}
};
2. Safari中，如果用getElementsByName得到一個checkbox組，那么重命名的時
候，無法用for循環(huán)全部重命名
例如：
var checkBoxes = document.getElementsByName("testCheckbox");
var checkBoxesSize = checkBoxes.length;
for (var i = checkBoxesSize - 1; i >= 0; i--) {
if (checkBoxes[i] && !checkBoxes[i].checked) {
setElementName(checkBoxes[i],"testCheckbox-new");
}
}
這種情況在IE和Firefox下面都沒有問題，全部的checkbox都會被成功的重命名。
但是在Safari下面，無法實現(xiàn)這個目的。經(jīng)過調(diào)試發(fā)現(xiàn)，在Safari中，如果使用getElementsByName來得到這個checkbox組，那么在重命名的時候，如果使用for循環(huán)來依次進行，那么每重命名一個checkbox，safari將自動將這個元素從for循環(huán)中移除，這樣這個循環(huán)在進行到一半的時候就會報錯：checkBoxes[i][null]不是一個元素。
糾結(jié)了一段時間，本來打算想一個算法來解決這個問題，后來突然想到另外一個簡單一點的方法：
使用getElementsByTagName方法來得到所有元素，并從中篩選出對應的checkbox，如果符合條件，再重命名。這種情況下，因為使用的tag類型來獲得的數(shù)組，所以在for循環(huán)中，在重命名checkbox后，safari就不會自動的移除對應的元素。具體代碼如下：
var elementlist = document.getElementsByTagName("input");
var elementSize = elementlist.length;
for(var i=0; i<elementSize;i++){
var curElement = elementlist[i];
if(curElement.type =='checkbox' && curElement.name == 'testCheckbox' && !curElement.checked){
curElement.name='testCheckbox-new';
}
}