在Node.cloneNode(true)
上使用<input type="text">
返回一个新的<input>
节点,其文本内容与原始节点相同,但克隆了{{} 1}}(在用户选择之后)在没有用户选择的情况下返回新的<select>
。这首先似乎不遵循规范,因为根据DOM 3:
<select>
返回此节点的副本,即用作节点的通用副本构造函数。重复节点没有父节点(parentNode为null),没有用户数据。 与导入节点关联的用户数据不会被转移。
为什么会发生这种情况的答案稍后会有所说明,但在DOM 2 spec中更明确,
cloneNode
克隆元素会复制所有属性及其值,包括由XML处理器生成的用于表示默认属性的属性,但此方法不会复制它包含的任何文本,除非它是深度克隆,因为文本包含在子项中文本节点。
我愿意接受这种措辞,尽管我认为cloneNode
不包含文本节点,因为<input>
属性childNodes
始终为空<input>
,无论其中是否包含文字(在规范的措辞中,&#34;有文字节点&#34;)。
至少,我理解用户选择的NodeList
被认为是用户数据,因此有意义的是没有克隆它。在这种情况下,这个&#34;用户数据&#34;包含在<option>
的{{1}}属性中。
然而,当trying the behavior with radio buttons and checkboxes时,Chrome 38,FF 33,Safari 6.2中的行为完全违反了上述定义。克隆选中的复选框或选定的单选按钮保持其已检查状态。这似乎与规范相反,因为这些信息是&#34;用户数据,&#34;其中(如selected
)包含在属性中(在本例中为<option>
)。
我是否认为这与规格不一致?如果没有,是否有其他地方定义了这种行为?如果是,是否有一个用例可以解释为什么<select>
如何克隆用户输入字段的状态会如此不一致?
编辑:在对我的浏览器套件进行测试时,我发现Opera 12.15可以按照checked
输入的方式执行。也就是说,它保留用户对克隆的选择。
答案 0 :(得分:1)
DOM Level 4定义cloning steps clearlier:
Specifications可以为全部或部分定义克隆步骤 nodes。该算法通过 copy , node , document ,并且 可选择 clone children flag ,如clone所示 算法
克隆节点,可选择使用文档和克隆子项 标志,运行以下步骤:
如果未提供文档,请让文档为节点的node document。
< / LI>让 copy 成为node,实现与 node 相同的接口。
如果 copy 是document,请将其node document和文档设置为 copy 。<登记/> 否则,请将 copy 的node document设置为文档。
将以下内容从节点复制到 copy ,具体取决于节点的类型:
Document
其encoding,content type,URL,其模式(quirks mode,limited quirks mode或no-quirks mode)及其类型({{3} }或XML document)。任何其他节点
-在data中运行为节点定义的任何cloning steps并传递 copy , node ,< em>文档和克隆 如果设置了子标志作为参数。
如果 clone children flag 已设置,other applicable specifications 节点的所有clone 并将其附加到副本,文档为 指定并设置 clone children flag 。
- 醇>
返回副本。
如果 deep 为true,则
cloneNode(deep)
方法必须返回children的clone,并设置 clone children flag
select
和input
都是Element
个,因此只有context
object,namespace,namespace prefix及其local name应该在步骤4中复制。
但是,在步骤5中,可能会运行其他克隆步骤。
可能这些步骤包括在value
元素的情况下复制selected
和input
属性。