各浏览器cloneNode方法的部分实现差异

 

cloneNode来自于Node，用来复制一个相同的节点元素。它有一个布尔类型的参数，如果为true则其子节点也会被拷贝。但在不同浏览器中它的表现有些地方却不同。下面依次列出。

 

一、IE6/7中radio和checkbox的checked和其它浏览器不同

1 2 3 4 5 6 7

<input type="radio" checked="true" value="1"/> <input type="checkbox" checked="true" value="1"/> <script>     var input = document.getElementsByTagName('input')[0];     var clone = input.cloneNode(true);     alert(clone.checked); </script>

IE6/7 : false

IE8/9/Firefox12/Chrome18/Safar5/Opera11: true

 

二、IE6/7/8中 input[type=text]和textarea 的defaultValue和其它浏览器不同

1 2 3 4 5 6

<input value="hello"/> <script>     var input = document.getElementsByTagName('input')[0];     var clone = input.cloneNode(true);     alert(clone.defaultValue); </script>

IE6/7/8 :""

IE9/Firefox12/Chrome18/Safar5/Opera11: "hello"

 

三、IE6/7/8中 option的selected值和其它浏览器不同

1 2 3 4 5 6 7 8 9 10

<select>     <option value="1">1</option>     <option value="2" selected="selected">2</option>     <option value="3">3</option> </select> <script>     var option = document.getElementsByTagName('option')[1];     var clone = option.cloneNode(true);     alert(clone.selected); </script>

IE6/7/8 : false

IE9/Firefox12/Chrome18/Safar5/Opera11: true

 

四、IE6/7/8中 script  的text属性值和其它浏览器不同

1 2 3 4 5 6 7 8

<script>     var a = 'test'; </script> <script>     var script = document.getElementsByTagName('script')[0];     var clone = script.cloneNode(true);     alert(clone.text) </script>

IE6/7/8 :""

IE9/Firefox12/Chrome18/Safar5/Opera11: "var a = 'test';"

 

注：DOM4中cloneNode的参数是可选的，即可以不传参，此时默认为true。Firefox13将实现。