zoukankan      html  css  js  c++  java
  • 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那样搞一个缓存系统。

  • 相关阅读:
    我工作三年了,该懂并发了!
    代理,一文入魂
    非典型算法题,用程序和电脑玩一个游戏
    详解command设计模式,解耦操作和回滚
    matplotlib画图教程,设置坐标轴标签和间距
    详解工程师不可不会的LRU缓存淘汰算法
    详解深度学习感知机原理
    详解gitignore的使用方法,让你尽情使用git add .
    算法题 | 你追我,如果你追到我……那就算你赢了
    险些翻车,差一点没做出来的基础算法题
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1736711.html
Copyright © 2011-2022 走看看