<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>welefen的随笔</title>
	<atom:link href="http://www.welefen.com/tag/clone/feed" rel="self" type="application/rss+xml" />
	<link>http://www.welefen.com</link>
	<description>前端打杂者@baidu</description>
	<lastBuildDate>Tue, 07 Feb 2012 07:28:11 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>select节点clone全解析</title>
		<link>http://www.welefen.com/select-clone.html</link>
		<comments>http://www.welefen.com/select-clone.html#comments</comments>
		<pubDate>Fri, 18 Dec 2009 03:01:35 +0000</pubDate>
		<dc:creator>welefen</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[clone]]></category>
		<category><![CDATA[cloneNode]]></category>
		<category><![CDATA[select]]></category>

		<guid isPermaLink="false">http://www.welefen.com/?p=177</guid>
		<description><![CDATA[在开发ns-log项目中，统计分类有复制的功能。由于之前的统计分类中的数据是通过JS赋值进去的，之后用户可能又进行了修改，发现进行节点克隆时，出现了 无法复制select下拉框值的怪异现象。本文对这个怪异现象进行解析和给出解决办法。 问题现状 使用节点的cloneNode(true/false)进行克隆时，目前是下面的表现情况： select为设置初始值或者初始值是第一个option。 表现：各大浏览器都没什么问题。 select初始值不是在第一个option。 表现：IE下无法克隆，其他内核的浏览器没什么问题。 select的值被用户或者JS修改。 表现：各个浏览器均无法克隆到真确的值。值结果跟第二条结果相同。 IE的特殊处理 对于上面第二条，初始值不在第一个option时无法克隆的情况，确实是IE的一个Bug，相信不少人都遇到过这样的问题。并且IE下使用cloneNode方法时，还有Event方面的问题，所以差不多可以放弃使用这个方法。 IE下可以使用节点的outerHTML属性解决这个问题，它能够实时的获取节点的内容，哪怕是select的值被用户或者程序改变。下面给出简单的实现。 function clone(node){ var div = document.createElement(&#8216;div&#8217;); div.innerHTML = node.outerHTML; return div.childNodes[0]; } 其他内核浏览器的处理 既然IE内核的浏览器可以通过outerHTML属性来解决这个问题，那FF等浏览器可以通过类似的方法来实现吗？虽然FF等浏览器没有outerHTML属性，但是可以通过innerHTML属性实现，如： function getOuterHTML(node){ var div = document.createElement(&#8216;div&#8217;); div.appendChild(node); try{ return div.innerHTML; }catch(e){ div = null; } } 答案是否定。 为什么会这样呢？难道是FF等浏览器的bug？ 下面还是从W3C中对cloneNode方法,select标签，属性的定义进行说明。 下面引用的资料都是来自HTML5草案，HTML4或者XHTML对这些没有太多详细的定义。虽然是HTML5的，但这些节点跟以前没什么变化。 W3C中的cloneNode 具体链接：http://www.w3.org/TR/DOM-Level-2-Core/core.html 里面有2点比较重要： 克隆时会拷贝节点的所有属性和对应的值。 如果cloneNode方法的参数为true，会通过递归的方法克隆子节点。 W3C中的select节点 具体链接：http://dev.w3.org/html5/spec/forms.html#the-select-element W3C对于属性的定义有2种，一种是内容性属性（Content [...]]]></description>
		<wfw:commentRss>http://www.welefen.com/select-clone.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Page Caching using eaccelerator
Database Caching 1/5 queries in 0.003 seconds using disk: basic
Object Caching 321/321 objects using disk: basic

Served from: welefen.com @ 2012-02-08 03:30:10 -->
