Full parse of select node clone

Full parse of select node clone

2009-12-18

In the Development Ns-log project, Statistical classification has the function of copying. Since the data in the previous statistical classification is assigned by JS, the user may have modified it and found that there was a strange phenomenon that the Select dropdown box value could not be duplicated when the node was cloned. This article analyzes and gives a solution to this strange phenomenon.

Problem status

When cloning using the node's CloneNode (True/false), the following performance is present:

1. Select is the first option to set an initial value or an initial value. Performance: There are no problems with the big browsers.
2. The select initial value is not in the first option. Performance: Can not be cloned under IE, other kernel browser no problem.
3. The value of select is modified by the user or JS. Performance: Each browser cannot clone to a true value. The value result is the same as the second result.

Special handling of IE

For the second above, the initial value is not the first option can not be cloned, is really a bug in IE, I believe many people have encountered such a problem. And when using the CloneNode method under IE, there are event problems, so you can almost abandon the use of this method.

The outerhtml attribute of the node can be used under IE to solve this problem, it can get the content of the node in real time, even if the value of select is changed by user or program. A simple implementation is given below.

function clone(node) {    var div = document.createElement(‘div‘); div.innerHTML = node.outerHTML; return div.childNodes[0];}

Processing of other kernel browsers

Since the IE kernel browser can solve this problem through the outerHTML property, can the FF and other browsers be implemented in a similar way? Although browsers such as FF do not have outerhtml properties, they can be implemented through the innerHTML property, such as:

function getOuterHTML(node) {    var div = document.createElement(‘div‘); div.appendChild(node); try { return div.innerHTML; } catch (e) { div = null; }}

The answer is negative.

Why is that? is the FF and other browser bugs?

The following is a description of the CloneNode method, the Select tag, and the attribute definition from the list.

The following references are from draft HTML5, HTML4 or XHTML do not have much detailed definitions of these. Although it is HTML5, these nodes have nothing to do with the previous changes.

The CloneNode in the Chinese

Specific Link: http://www.w3.org/TR/DOM-Level-2-Core/core.html

2 points in it are more important:

1. Cloning copies all of the node's properties and corresponding values.
2. If the parameter of the CloneNode method is true, the child node is cloned recursively.

Select node in the list

Specific Link: http://dev.w3.org/html5/spec/forms.html#the-select-element

There are 2 definitions for attributes, one is the content attribute (attributes) and the other is the operational attribute (which is used for the time being without a specific name).

For select tags, the main content attribute is: Global attributes,autofocus,disabled,form,multiple,name,size. Where global attributes contains some common properties (Accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,itemid, Itemprop,itemref,itemscope,itemtype,lang,spellcheck,style,tabindex,title), these properties are contained in all tags, see http://dev.w3.org /html5/spec/dom.html#global-attributes

While both SelectedIndex and value are operational properties, the two properties get the values in the following way:

select. selectedindex[= value ]

Returns the index of the first selected item, if any, or−1 if there is no selected item. Can is set, to change the selection.

select. Value [= value ]

Returns The value of the first selected item, if any, or the empty string if there is no selected item. Can is set, to change the selection.

Differences between the content and operability attributes

There are two ways to add attributes to a node, as shown here:

var div = document.createElement(‘div‘)div.id = ‘welefen‘; //直接加属性div.setAttribute(‘id‘,‘welefen‘); //通过setAttribute方法添加属性

For the content property, the two methods are identical.

But for an operational property, the first way is to add the attribute only to the scope of the operation, and when the node is added to the DOM, the attribute is invalidated.

Because both SelectedIndex and value are operational properties, if the value of select is changed by the user or by the program, the current value of clone cannot be brought past. This is why the value cannot be cloned. It is also not possible to use innerHTML to clone values, because the innerHTML principle is the same as this one.

innerHTML implementation principle See here:

FF and other browser solutions

There are currently 2 solutions, the first of which is to change the selected attribute in the options when the select binds to the changed event, triggering changes, which is not advisable. Another option is to get the value of the element at the time of cloning, and then assign it to the cloned object.

Summarize

This is the case at the moment, it is the FF and other browser bugs. When you think about it later, it should not be the case, and then repeatedly review the relevant documents, finally confirmed the problem. Here's a complete solution:

function cloneSelect(select) {    if (document.all) { var html = select.outerHTML, div = document.createElement(‘div‘); div.innerHTML = html; return div.childNodes[0]; } var cloneSelect = select.cloneNode(true); cloneSelect.selectedIndex = select.selectedIndex; cloneSelect.value = select.value; return cloneSelect;}

Original link: http://www.welefen.com/select-clone.html

Full parse of select node clone