9 | Total time for ${moduleName}: ${data.getTotalTime(moduleName)}
10 |
11 | (winner)
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | ${moduleName}
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | ${testName}
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/examples/server.js:
--------------------------------------------------------------------------------
1 | require('marko/express'); //enable res.marko
2 | require('marko/node-require').install();
3 |
4 | var fs = require('fs');
5 | var path = require('path');
6 | var express = require('express');
7 | var template = require('./index.marko');
8 |
9 | require('lasso').configure({
10 | bundlingEnabled: false,
11 | minify: false,
12 | fingerprintsEnabled: false,
13 | outputDir: path.join(__dirname, 'static'),
14 | plugins: [
15 | 'lasso-marko'
16 | ]
17 | });
18 |
19 | var app = express();
20 |
21 | app.use(require('lasso/middleware').serveStatic());
22 |
23 | var examples = [];
24 |
25 | fs.readdirSync(__dirname).forEach(function(name) {
26 | var dir = path.join(__dirname, name);
27 |
28 | var stat = fs.statSync(dir);
29 | if (!stat.isDirectory()) {
30 | return;
31 | }
32 |
33 | var templatePath = path.join(dir, 'template.marko');
34 |
35 | if (fs.existsSync(templatePath)) {
36 | var exampleTemplate = require(templatePath);
37 |
38 | examples.push({
39 | name: name,
40 | route: '/' + name,
41 | controller: function(req, res) {
42 | res.marko(exampleTemplate, {
43 | examples: examples
44 | });
45 | }
46 | });
47 | }
48 | });
49 |
50 | examples.forEach(function(example) {
51 | app.use(example.route, example.controller);
52 | });
53 |
54 | app.get('/', function(req, res) {
55 | res.marko(template, {
56 | examples: examples
57 | });
58 | });
59 |
60 | app.listen(8080, function(err) {
61 | if (err) {
62 | throw err;
63 | }
64 |
65 | if (process.send) {
66 | process.send('online');
67 | }
68 | console.log('Listening on port 8080');
69 | });
--------------------------------------------------------------------------------
/examples/lifecycle-events/client.js:
--------------------------------------------------------------------------------
1 | var morphdom = require('../../');
2 | var todosTemplate = require('./todos.marko');
3 | var nextId = 0;
4 |
5 | var todos = [
6 | { title: 'Wake up', visible: true, id: nextId++ },
7 | { title: 'Eat', visible: true, id: nextId++ },
8 | { title: 'Drink', visible: true, id: nextId++ },
9 | { title: 'Sleep', visible: true, id: nextId++ }
10 | ];
11 |
12 | function updateDOM() {
13 | var todosHtml = todosTemplate.renderSync({ todos: todos });
14 | morphdom(document.getElementById('todos'), todosHtml, {
15 | onNodeAdded: function(el) {
16 | if (el.className === 'todo') {
17 | setTimeout(function() {
18 | el.className += ' todo-visible';
19 | }, 10);
20 | }
21 | },
22 | onBeforeNodeDiscarded: function(el) {
23 | if (el.className === 'todo todo-visible') {
24 | el.className = 'todo';
25 |
26 | setTimeout(function() {
27 | el.parentNode.removeChild(el);
28 | }, 400);
29 |
30 | // Prevent the node from being discarded so that we can fade it out
31 | return false;
32 | }
33 | }
34 | });
35 | }
36 |
37 | window.handleTodoFormSubmit = function(event) {
38 | var inputEl = document.getElementById('todoInput');
39 | var newTodo = { title: inputEl.value, visible: false, id: nextId++ };
40 | inputEl.value = '';
41 | todos.push(newTodo);
42 | updateDOM();
43 | newTodo.visible = true; // Make sure it renders as visible the next time
44 | event.preventDefault();
45 | };
46 |
47 | window.handleRemoveTodoClick = function(el) {
48 | var todoId = parseInt(el.getAttribute('data-id'));
49 | todos = todos.filter(function(todo) {
50 | return todo.id !== todoId;
51 | });
52 | updateDOM();
53 | };
54 |
55 | updateDOM();
--------------------------------------------------------------------------------
/src/morphAttrs.js:
--------------------------------------------------------------------------------
1 | var DOCUMENT_FRAGMENT_NODE = 11;
2 |
3 | export default function morphAttrs(fromNode, toNode) {
4 | var toNodeAttrs = toNode.attributes;
5 | var attr;
6 | var attrName;
7 | var attrNamespaceURI;
8 | var attrValue;
9 | var fromValue;
10 |
11 | // document-fragments dont have attributes so lets not do anything
12 | if (toNode.nodeType === DOCUMENT_FRAGMENT_NODE || fromNode.nodeType === DOCUMENT_FRAGMENT_NODE) {
13 | return;
14 | }
15 |
16 | // update attributes on original DOM element
17 | for (var i = toNodeAttrs.length - 1; i >= 0; i--) {
18 | attr = toNodeAttrs[i];
19 | attrName = attr.name;
20 | attrNamespaceURI = attr.namespaceURI;
21 | attrValue = attr.value;
22 |
23 | if (attrNamespaceURI) {
24 | attrName = attr.localName || attrName;
25 | fromValue = fromNode.getAttributeNS(attrNamespaceURI, attrName);
26 |
27 | if (fromValue !== attrValue) {
28 | if (attr.prefix === 'xmlns'){
29 | attrName = attr.name; // It's not allowed to set an attribute with the XMLNS namespace without specifying the `xmlns` prefix
30 | }
31 | fromNode.setAttributeNS(attrNamespaceURI, attrName, attrValue);
32 | }
33 | } else {
34 | fromValue = fromNode.getAttribute(attrName);
35 |
36 | if (fromValue !== attrValue) {
37 | fromNode.setAttribute(attrName, attrValue);
38 | }
39 | }
40 | }
41 |
42 | // Remove any extra attributes found on the original DOM element that
43 | // weren't found on the target element.
44 | var fromNodeAttrs = fromNode.attributes;
45 |
46 | for (var d = fromNodeAttrs.length - 1; d >= 0; d--) {
47 | attr = fromNodeAttrs[d];
48 | attrName = attr.name;
49 | attrNamespaceURI = attr.namespaceURI;
50 |
51 | if (attrNamespaceURI) {
52 | attrName = attr.localName || attrName;
53 |
54 | if (!toNode.hasAttributeNS(attrNamespaceURI, attrName)) {
55 | fromNode.removeAttributeNS(attrNamespaceURI, attrName);
56 | }
57 | } else {
58 | if (!toNode.hasAttribute(attrName)) {
59 | fromNode.removeAttribute(attrName);
60 | }
61 | }
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "morphdom",
3 | "description": "Morph a DOM tree to another DOM tree (no virtual DOM needed)",
4 | "main": "dist/morphdom.js",
5 | "module": "dist/morphdom-esm.js",
6 | "jsnext:main": "dist/morphdom-esm.js",
7 | "types": "./index.d.ts",
8 | "scripts": {
9 | "build": "npm run rollup && npm run minify",
10 | "test": "npm run build && npm run test-browser && npm run lint",
11 | "benchmark": "npm run benchmark-browser",
12 | "all": "npm run all-browser && npm run lint",
13 | "lint": "jshint src/",
14 | "minify": "uglifyjs ./dist/morphdom-umd.js -o ./dist/morphdom-umd.min.js",
15 | "rollup": "npm run rollup-default && npm run rollup-factory && npm run rollup-default-umd && npm run rollup-default-esm",
16 | "rollup-default": "rollup src/index.js -o dist/morphdom.js --format cjs",
17 | "rollup-default-umd": "rollup src/index.js -o dist/morphdom-umd.js --format umd --name morphdom",
18 | "rollup-default-esm": "rollup src/index.js -o dist/morphdom-esm.js --format es",
19 | "rollup-factory": "rollup src/morphdom.js -o dist/morphdom-factory.js --format cjs",
20 | "test-browser": "node test/mocha-headless/run.js test",
21 | "benchmark-browser": "node test/mocha-headless/run.js benchmark",
22 | "all-browser": "node test/mocha-headless/run.js test benchmark",
23 | "mocha-chrome": "node test/mocha-headless/run.js",
24 | "mocha-chrome-run": "mocha-chrome ./test/mocha-headless/generated/test-page.html",
25 | "prepublish": "npm run build",
26 | "start": "node examples/server.js"
27 | },
28 | "author": "Patrick Steele-Idem ",
29 | "license": "MIT",
30 | "repository": {
31 | "type": "git",
32 | "url": "https://github.com/patrick-steele-idem/morphdom.git"
33 | },
34 | "devDependencies": {
35 | "@lasso/marko-taglib": "^1.0.15",
36 | "async": "^2.0.0",
37 | "browser-refresh-taglib": "^1.1.0",
38 | "chai": "^4.2.0",
39 | "diffhtml": "^1.0.0-beta.10",
40 | "express": "^4.14.0",
41 | "ignoring-watcher": "^1.0.5",
42 | "jshint": "^2.7.0",
43 | "lasso": "^3.2.9",
44 | "lasso-marko": "^2.4.7",
45 | "marko": "^4.1.3",
46 | "mocha": "^6.2.2",
47 | "mocha-chrome": "^2.2.0",
48 | "nanomorph": "^5.4.0",
49 | "rollup": "^1.4.1",
50 | "uglify-js": "^3.7.0",
51 | "vdom-virtualize": "2.0.0",
52 | "virtual-dom": "^2.1.1"
53 | },
54 | "dependencies": {},
55 | "version": "2.7.7",
56 | "keywords": [
57 | "dom",
58 | "diff",
59 | "patch",
60 | "virtual",
61 | "browser"
62 | ]
63 | }
64 |
--------------------------------------------------------------------------------
/docs/virtual-dom.md:
--------------------------------------------------------------------------------
1 | Using `morphdom` with a virtual DOM
2 | ===================================
3 |
4 | `morphdom` has always supported diffing real DOM nodes with real DOM nodes and this will continue to be supported. Support for diffing real DOM with a _virtual_ DOM was introduced in `v2.1.0`. Virtual DOM nodes are expected to implement a minimal DOM API that consists of the following methods and properties:
5 |
6 | - `node.firstChild`
7 | - `node.nextSibling`
8 | - `node.nodeType`
9 | - `node.nodeName`
10 | - `node.namespaceURI`
11 | - `node.nodeValue`
12 | - `node.attributes`
13 | - `node.value`
14 | - `node.selected`
15 | - `node.disabled`
16 | - `node.hasAttributeNS(namespaceURI, name)`
17 | - `node.actualize(document)` [1]
18 | - `node.isSameNode(anotherNode)` [2]
19 |
20 | NOTES:
21 |
22 | 1. In addition to the standard DOM node methods and properties, a virtual DOM node must also provide a `node.actualize(document)` method. The `node.actualize(document)` will be called when the virtual DOM node needs to be upgraded to a real DOM node so that it can be moved into the real DOM.
23 | 2. A virtual DOM node may choose to implement `isSameNode(anotherNode)` to short-circuit diffing/patching a particular DOM subtree by treating two nodes as the "same"
24 | 3. A virtual DOM node may choose to implement the non-standard `assignAttributes(targetNode)` to optimize copying the attributes from the virtual DOM node to the target DOM node. If virtual DOM node implements `assignAttributes(targetNode)` then it is not necessary to implement `node.attributes`.
25 |
26 | [marko-vdom](https://github.com/marko-js/marko-vdom) is the first virtual DOM implementation that is compatible with `morphdom` and it can be used as a reference implementation.
27 |
28 | # FAQ
29 |
30 | ## Why support a virtual DOM?
31 |
32 | Working with real DOM nodes is fast, but real DOM nodes do tend to have more overhead (the amount of overhead associated with real DOM nodes will vary drastically by browser). In order to be 100% compliant with the DOM specification, real DOM nodes require a lot of internal "bookkeeping" and validation checks that slow certain operations down. Virtual DOM nodes have the advantage that they can be optimized to use less memory and enable better performance since they are not required to be compatible the entire DOM specification.
33 |
34 | When using `morphdom` to update the view, performance will be largely dictated by how much time it takes to render the view to a virtual DOM/real DOM and how long it takes to walk the tree (including iterating over attributes). We are seeing signficant performance improvements when utilizing a virtual DOM. Please see the [marko-vdom benchmarks](https://github.com/marko-js/marko-vdom#benchmarks) to better understand the performance characteristics of the virtual DOM and the real DOM.
35 |
36 | ## Can `morphdom` be used with any virtual DOM implementation?
37 |
38 | No, `morphdom` cannot be used with any virtual DOM implementation. To keep code size small and fast, morphdom requires that virtual DOM nodes implement the minimal set of methods and properties based described above. One of the goals of `morphdom` is to stay as close as possible to the real DOM while allowing for a more optimized virtual DOM when it makes sense.
39 |
--------------------------------------------------------------------------------
/src/util.js:
--------------------------------------------------------------------------------
1 | var range; // Create a range object for efficently rendering strings to elements.
2 | var NS_XHTML = 'http://www.w3.org/1999/xhtml';
3 |
4 | export var doc = typeof document === 'undefined' ? undefined : document;
5 | var HAS_TEMPLATE_SUPPORT = !!doc && 'content' in doc.createElement('template');
6 | var HAS_RANGE_SUPPORT = !!doc && doc.createRange && 'createContextualFragment' in doc.createRange();
7 |
8 | function createFragmentFromTemplate(str) {
9 | var template = doc.createElement('template');
10 | template.innerHTML = str;
11 | return template.content.childNodes[0];
12 | }
13 |
14 | function createFragmentFromRange(str) {
15 | if (!range) {
16 | range = doc.createRange();
17 | range.selectNode(doc.body);
18 | }
19 |
20 | var fragment = range.createContextualFragment(str);
21 | return fragment.childNodes[0];
22 | }
23 |
24 | function createFragmentFromWrap(str) {
25 | var fragment = doc.createElement('body');
26 | fragment.innerHTML = str;
27 | return fragment.childNodes[0];
28 | }
29 |
30 | /**
31 | * This is about the same
32 | * var html = new DOMParser().parseFromString(str, 'text/html');
33 | * return html.body.firstChild;
34 | *
35 | * @method toElement
36 | * @param {String} str
37 | */
38 | export function toElement(str) {
39 | str = str.trim();
40 | if (HAS_TEMPLATE_SUPPORT) {
41 | // avoid restrictions on content for things like `
Hi
` which
42 | // createContextualFragment doesn't support
43 | // support not available in IE
44 | return createFragmentFromTemplate(str);
45 | } else if (HAS_RANGE_SUPPORT) {
46 | return createFragmentFromRange(str);
47 | }
48 |
49 | return createFragmentFromWrap(str);
50 | }
51 |
52 | /**
53 | * Returns true if two node's names are the same.
54 | *
55 | * NOTE: We don't bother checking `namespaceURI` because you will never find two HTML elements with the same
56 | * nodeName and different namespace URIs.
57 | *
58 | * @param {Element} a
59 | * @param {Element} b The target element
60 | * @return {boolean}
61 | */
62 | export function compareNodeNames(fromEl, toEl) {
63 | var fromNodeName = fromEl.nodeName;
64 | var toNodeName = toEl.nodeName;
65 | var fromCodeStart, toCodeStart;
66 |
67 | if (fromNodeName === toNodeName) {
68 | return true;
69 | }
70 |
71 | fromCodeStart = fromNodeName.charCodeAt(0);
72 | toCodeStart = toNodeName.charCodeAt(0);
73 |
74 | // If the target element is a virtual DOM node or SVG node then we may
75 | // need to normalize the tag name before comparing. Normal HTML elements that are
76 | // in the "http://www.w3.org/1999/xhtml"
77 | // are converted to upper case
78 | if (fromCodeStart <= 90 && toCodeStart >= 97) { // from is upper and to is lower
79 | return fromNodeName === toNodeName.toUpperCase();
80 | } else if (toCodeStart <= 90 && fromCodeStart >= 97) { // to is upper and from is lower
81 | return toNodeName === fromNodeName.toUpperCase();
82 | } else {
83 | return false;
84 | }
85 | }
86 |
87 | /**
88 | * Create an element, optionally with a known namespace URI.
89 | *
90 | * @param {string} name the element name, e.g. 'div' or 'svg'
91 | * @param {string} [namespaceURI] the element's namespace URI, i.e. the value of
92 | * its `xmlns` attribute or its inferred namespace.
93 | *
94 | * @return {Element}
95 | */
96 | export function createElementNS(name, namespaceURI) {
97 | return !namespaceURI || namespaceURI === NS_XHTML ?
98 | doc.createElement(name) :
99 | doc.createElementNS(namespaceURI, name);
100 | }
101 |
102 | /**
103 | * Copies the children of one DOM element to another DOM element
104 | */
105 | export function moveChildren(fromEl, toEl) {
106 | var curChild = fromEl.firstChild;
107 | while (curChild) {
108 | var nextChild = curChild.nextSibling;
109 | toEl.appendChild(curChild);
110 | curChild = nextChild;
111 | }
112 | return toEl;
113 | }
114 |
--------------------------------------------------------------------------------
/test/fixtures/autotest/data-table/from.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | virtual-dom
7 |
8 |
9 | morphdom
10 |
11 |
12 |
13 |
14 |
15 |
16 | change-tagname
17 |
18 |
19 | 0.01ms
20 |
21 |
22 | 0.01ms
23 |
24 |
25 |
26 |
27 | change-tagname-ids
28 |
29 |
30 | 0.01ms
31 |
32 |
33 | 0.01ms
34 |
35 |
36 |
37 |
38 | ids-nested
39 |
40 |
41 | 0.01ms
42 |
43 |
44 | 0.01ms
45 |
46 |
47 |
48 |
49 | ids-nested-2
50 |
51 |
52 | 0.01ms
53 |
54 |
55 | 0.02ms
56 |
57 |
58 |
59 |
60 | ids-nested-3
61 |
62 |
63 | 0.02ms
64 |
65 |
66 | 0.01ms
67 |
68 |
69 |
70 |
71 | ids-nested-4
72 |
73 |
74 | 0.11ms
75 |
76 |
77 | 0.02ms
78 |
79 |
80 |
81 |
82 | ids-nested-5
83 |
84 |
85 | 0.02ms
86 |
87 |
88 | 0.02ms
89 |
90 |
91 |
92 |
93 | ids-nested-6
94 |
95 |
96 | 0.01ms
97 |
98 |
99 | 0.01ms
100 |
101 |
102 |
103 |
104 | ids-prepend
105 |
106 |
107 | 0.01ms
108 |
109 |
110 | 0.01ms
111 |
112 |
113 |
114 |
115 | input-element
116 |
117 |
118 | 0.01ms
119 |
120 |
121 | 0.01ms
122 |
123 |
124 |
125 |
126 | input-element-disabled
127 |
128 |
129 | 0.01ms
130 |
131 |
132 | 0.01ms
133 |
134 |
135 |
136 |
137 | input-element-enabled
138 |
139 |
140 | 0.01ms
141 |
142 |
143 | 0.01ms
144 |
145 |
146 |
147 |
148 | large
149 |
150 |
151 | 1.15ms
152 |
153 |
154 | 2.42ms
155 |
156 |
157 |
158 |
159 | lengthen
160 |
161 |
162 | 0.02ms
163 |
164 |
165 | 0.02ms
166 |
167 |
168 |
169 |
170 | one
171 |
172 |
173 | 0.01ms
174 |
175 |
176 | 0.01ms
177 |
178 |
179 |
180 |
181 | reverse
182 |
183 |
184 | 0.02ms
185 |
186 |
187 | 0.01ms
188 |
189 |
190 |
191 |
192 | reverse-ids
193 |
194 |
195 | 0.02ms
196 |
197 |
198 | 0.03ms
199 |
200 |
201 |
202 |
203 | select-element
204 |
205 |
206 | 0.04ms
207 |
208 |
209 | 0.36ms
210 |
211 |
212 |
213 |
214 | shorten
215 |
216 |
217 | 0.01ms
218 |
219 |
220 | 0.02ms
221 |
222 |
223 |
224 |
225 | simple
226 |
227 |
228 | 0.01ms
229 |
230 |
231 | 0.00ms
232 |
233 |
234 |
235 |
236 | simple-ids
237 |
238 |
239 | 0.02ms
240 |
241 |
242 | 0.03ms
243 |
244 |
245 |
246 |
247 | simple-text-el
248 |
249 |
250 | 0.01ms
251 |
252 |
253 | 0.01ms
254 |
255 |
256 |
257 |
258 | svg
259 |
260 |
261 | 0.01ms
262 |
263 |
264 | 0.02ms
265 |
266 |
267 |
268 |
269 | todomvc
270 |
271 |
272 | 0.25ms
273 |
274 |
275 | 0.50ms
276 |
277 |
278 |
279 |
280 | two
281 |
282 |
283 | 0.02ms
284 |
285 |
286 | 0.01ms
287 |
288 |
289 |
290 |
--------------------------------------------------------------------------------
/src/specialElHandlers.js:
--------------------------------------------------------------------------------
1 | function syncBooleanAttrProp(fromEl, toEl, name) {
2 | if (fromEl[name] !== toEl[name]) {
3 | fromEl[name] = toEl[name];
4 | if (fromEl[name]) {
5 | fromEl.setAttribute(name, '');
6 | } else {
7 | fromEl.removeAttribute(name);
8 | }
9 | }
10 | }
11 |
12 | export default {
13 | OPTION: function(fromEl, toEl) {
14 | var parentNode = fromEl.parentNode;
15 | if (parentNode) {
16 | var parentName = parentNode.nodeName.toUpperCase();
17 | if (parentName === 'OPTGROUP') {
18 | parentNode = parentNode.parentNode;
19 | parentName = parentNode && parentNode.nodeName.toUpperCase();
20 | }
21 | if (parentName === 'SELECT' && !parentNode.hasAttribute('multiple')) {
22 | if (fromEl.hasAttribute('selected') && !toEl.selected) {
23 | // Workaround for MS Edge bug where the 'selected' attribute can only be
24 | // removed if set to a non-empty value:
25 | // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12087679/
26 | fromEl.setAttribute('selected', 'selected');
27 | fromEl.removeAttribute('selected');
28 | }
29 | // We have to reset select element's selectedIndex to -1, otherwise setting
30 | // fromEl.selected using the syncBooleanAttrProp below has no effect.
31 | // The correct selectedIndex will be set in the SELECT special handler below.
32 | parentNode.selectedIndex = -1;
33 | }
34 | }
35 | syncBooleanAttrProp(fromEl, toEl, 'selected');
36 | },
37 | /**
38 | * The "value" attribute is special for the element since it sets
39 | * the initial value. Changing the "value" attribute without changing the
40 | * "value" property will have no effect since it is only used to the set the
41 | * initial value. Similar for the "checked" attribute, and "disabled".
42 | */
43 | INPUT: function(fromEl, toEl) {
44 | syncBooleanAttrProp(fromEl, toEl, 'checked');
45 | syncBooleanAttrProp(fromEl, toEl, 'disabled');
46 |
47 | if (fromEl.value !== toEl.value) {
48 | fromEl.value = toEl.value;
49 | }
50 |
51 | if (!toEl.hasAttribute('value')) {
52 | fromEl.removeAttribute('value');
53 | }
54 | },
55 |
56 | TEXTAREA: function(fromEl, toEl) {
57 | var newValue = toEl.value;
58 | if (fromEl.value !== newValue) {
59 | fromEl.value = newValue;
60 | }
61 |
62 | var firstChild = fromEl.firstChild;
63 | if (firstChild) {
64 | // Needed for IE. Apparently IE sets the placeholder as the
65 | // node value and vise versa. This ignores an empty update.
66 | var oldValue = firstChild.nodeValue;
67 |
68 | if (oldValue == newValue || (!newValue && oldValue == fromEl.placeholder)) {
69 | return;
70 | }
71 |
72 | firstChild.nodeValue = newValue;
73 | }
74 | },
75 | SELECT: function(fromEl, toEl) {
76 | if (!toEl.hasAttribute('multiple')) {
77 | var selectedIndex = -1;
78 | var i = 0;
79 | // We have to loop through children of fromEl, not toEl since nodes can be moved
80 | // from toEl to fromEl directly when morphing.
81 | // At the time this special handler is invoked, all children have already been morphed
82 | // and appended to / removed from fromEl, so using fromEl here is safe and correct.
83 | var curChild = fromEl.firstChild;
84 | var optgroup;
85 | var nodeName;
86 | while(curChild) {
87 | nodeName = curChild.nodeName && curChild.nodeName.toUpperCase();
88 | if (nodeName === 'OPTGROUP') {
89 | optgroup = curChild;
90 | curChild = optgroup.firstChild;
91 | // handle empty optgroups
92 | if (!curChild) {
93 | curChild = optgroup.nextSibling;
94 | optgroup = null;
95 | }
96 | } else {
97 | if (nodeName === 'OPTION') {
98 | if (curChild.hasAttribute('selected')) {
99 | selectedIndex = i;
100 | break;
101 | }
102 | i++;
103 | }
104 | curChild = curChild.nextSibling;
105 | if (!curChild && optgroup) {
106 | curChild = optgroup.nextSibling;
107 | optgroup = null;
108 | }
109 | }
110 | }
111 |
112 | fromEl.selectedIndex = selectedIndex;
113 | }
114 | }
115 | };
116 |
--------------------------------------------------------------------------------
/test/fixtures/autotest/equal/to.html:
--------------------------------------------------------------------------------
1 |
2 |