cloneNode在兼容问题

我想这方法原本是不是IE的一个私有实现，它在IE下能实现完美的拷贝，另一个好像有点寄强，它与replaceNode命名方法相似。

在IE下，cloneNode能复制节点的所有属性（property），所有特性（attribute），所有自定义属性（expando），与所有事件（事件），而标准浏览器则只能复制前面两个。但很不幸，有时标准浏览器也分不清哪个是哪个，一旦把它当成自定义属性就复舞曲不了。

      var div = document.createElement("div");
      div.innerHTML = "<input type='radio' name='radiotest' checked='checked'/>";
      var clone = div.firstChild.cloneNode(true);
      alert(clone.checked)

上面的代码会在safari4中错误地返回false。

注意，如果cloneNode的参数为true，就会复制其孩子，如果它们是节点的话。但在firefox与opera这参数是必须的，不是true就是false，不能省略，否则会抛异常说参数不足。为安全起见，这布尔必须写上。

但IE也不没有bug，看下面的实验：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <meta name="keywords" content="IE 复制节点 bug by 司徒正美" />
    <meta name="description" content="IE 复制节点 bug by 司徒正美" />
    <title>IE 复制节点 bug</title>

    <script type="text/javascript">
      window.onload = function(){
        var node = document.getElementById("aaa");
        node.expando = {key:1}
        var clone = node.cloneNode(false);
        node.expando.key = 2//修正为2
        alert(clone.expando.key )//克隆体对应属性也跟着被修正了，出现类似浅复制的症状
      }
    
    </script>
  </head>
  <body>
    <div id="aaa">目标节点</div>

  </body>
</html>

若我们修正克隆对象呢？

      window.onload = function(){
        var node = document.getElementById("aaa");
        node.expando = {key:1}
        var clone = node.cloneNode(false);
        clone.expando.key = 2//修正克隆体
        alert(node.expando.key )//查看原对象，2
      }

但此实验在标准浏览器下不可行，因为它不支持复制自定义属性，不过也告诉我们不宜在元素节点上保存数据，应该像jQuery那样搞一个缓存系统。

posted on 2010-05-16 13:22 司徒正美阅读(4007) 评论(3) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Ruby's Louvre

导航

公告

cloneNode在兼容问题