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

 

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

 

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

<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和其它浏览器不同

<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值和其它浏览器不同

<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属性值和其它浏览器不同

<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将实现。

 

相关:

https://developer.mozilla.org/En/DOM/Node.cloneNode

http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4

https://developer.mozilla.org/en/DOM/HTMLInputElement

posted on 2012-05-06 10:15  snandy  阅读(3363)  评论(0编辑  收藏  举报