在IE浏览器和Safari中重命名html元素需要注意的问题

这两天在处理浏览器兼容的时候碰到很多问题，特别是在重新命名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(""), false); } }; 2. Safari中，如果用getElementsByName得到一个checkbox组，那么重命名的时候，无法用for循环全部重命名 例如： 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浏览器下面，无法实现这个目的。经过调试发现，在Safari中，如果使用getElementsByName来得到这个checkbox组，那么在重命名的时候，如果使用for循环来依次进行，那么每重命名一个checkbox，safari将自动将这个元素从for循环中移除，这样这个循环在进行到一半的时候就会报错：checkBoxes[i][null]不是一个元素。纠结了一段时间，本来打算想一个算法来解决这个问题，后来突然想到另外一个简单一点的方法： 使用getElementsByTagName方法来得到所有元素，并从中筛选出对应的checkbox，如果符合条件，再重命名。这种情况下，因为使用的tag类型来获得的数组，所以在for循环中，在重命名checkbox后，safari就不会自动的移除对应的元素。具体代码如下： var elementlist = document.getElementsByTagName("input"); var elementSize = elementlist.length; for(var i=0; i标签:IE相关IE浏览器SafariHTML