Author： Sealyu 2010-6-10
這兩天在處理瀏覽器兼容的時(shí)候碰到很多問(wèn)題，特別是在重新命名checkbox的時(shí)候，在IE和Safari中都碰到一些怪異的問(wèn)題。
- IE中不能在運(yùn)行時(shí)重命名元素。
按照微軟的解釋，運(yùn)行時(shí)是無(wú)法重命名的：
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.
后來(lái)找到國(guó)外的一篇帖子，找到一個(gè)解決方法，那就是使用mergeAttributes 方法，模擬新建一個(gè)只有name不同的元素，并和之前的元素合并，這樣就能達(dá)到重命名的效果了。代碼如下：
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得到一個(gè)checkbox組，那么重命名的時(shí)
候，無(wú)法用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下面都沒(méi)有問(wèn)題，全部的checkbox都會(huì)被成功的重命名。
但是在Safari下面，無(wú)法實(shí)現(xiàn)這個(gè)目的。經(jīng)過(guò)調(diào)試發(fā)現(xiàn)，在Safari中，如果使用getElementsByName來(lái)得到這個(gè)checkbox組，那么在重命名的時(shí)候，如果使用for循環(huán)來(lái)依次進(jìn)行，那么每重命名一個(gè)checkbox，safari將自動(dòng)將這個(gè)元素從for循環(huán)中移除，這樣這個(gè)循環(huán)在進(jìn)行到一半的時(shí)候就會(huì)報(bào)錯(cuò)：checkBoxes[i][null]不是一個(gè)元素。
糾結(jié)了一段時(shí)間，本來(lái)打算想一個(gè)算法來(lái)解決這個(gè)問(wèn)題，后來(lái)突然想到另外一個(gè)簡(jiǎn)單一點(diǎn)的方法：
使用getElementsByTagName方法來(lái)得到所有元素，并從中篩選出對(duì)應(yīng)的checkbox，如果符合條件，再重命名。這種情況下，因?yàn)槭褂玫膖ag類型來(lái)獲得的數(shù)組，所以在for循環(huán)中，在重命名checkbox后，safari就不會(huì)自動(dòng)的移除對(duì)應(yīng)的元素。具體代碼如下：
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';
}
}