Benchmark: DexV9 vs DexV10 - MeasureThat.net

HTML Preparation code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
	(function(exposeAs){
            var Dex = function(selector, nodes){

                // Return Dex object
                return new Dex.fn.init(selector, nodes);

            };

            Dex.fn = Dex.prototype = {
                init: function(selector, nodes){
                    this.selector = selector;

                    if(nodes){
                        this.nodes = nodes;
                    } else {
                        this.nodes = document.querySelectorAll(selector);
                    }

                    return this;
                }


            };

            var delegatedEventListeners = {},
				mutationObservers = {},
				DOMMutationCallback = function(mutations, selector, parentNodes, childtree){
					var n, x, y,
						mutationRecord,
						addedNode,
						removedNode,
						modifiedNodeAttribute,
						callbacks,
						_target;

					// Loop through mutation records
					for(n = 0; n < mutations.length; n++){
						mutationRecord = mutations[n];

						// Loop through added nodes
						for(x = 0; x < mutationRecord.addedNodes.length; x++){
							addedNode = mutationRecord.addedNodes[x];

							// Check if node type is valid
							if(addedNode.nodeType == 1){

								// Check if an observer has been created for this selector and this event type
								if(	mutationObservers[selector] &&
									mutationObservers[selector][childtree] &&
									mutationObservers[selector][childtree].callbacks.onOpen){

										callbacks = mutationObservers[selector][childtree].callbacks.onOpen;

										// Loop through callbacks
										for(_target in callbacks){

											// See if addedNode matches the _target of the callback
											if(addedNode.matches(_target)){

												// Loop through all callbacks
												for(y = 0; y < callbacks[_target].length; y++){

													// Call callback function
													callbacks[_target][y].call(addedNode);
												}

											}

										}

								}
							}

						}

						// Loop through removed nodes
						for(x = 0; x < mutationRecord.removedNodes.length; x++){
							removedNode = mutationRecord.removedNodes[x];

							// Check if node type is valid
							if(removedNode.nodeType == 1){

								// Check if an observer has been created for this selector and this event type
								if(	mutationObservers[selector] &&
									mutationObservers[selector][childtree] &&
									mutationObservers[selector][childtree].callbacks.onClose){

										callbacks = mutationObservers[selector][childtree].callbacks.onClose;

										// Loop through callbacks
										for(_target in callbacks){

											// See if removedNode matches the _target of the callback
											if(removedNode.matches(_target)){

												// Loop through all callbacks
												for(y = 0; y < callbacks[_target].length; y++){

													// Call callback function
													callbacks[_target][y].call(removedNode);
												}


											}

										}


								}
							}



						}

						// Loop through modified attributes
						if(mutationRecord.attributeName){
							modifiedNodeAttribute = mutationRecord.target;

							// Check if an observer has been created for this selector and this event type
							if(	mutationObservers[selector] &&
								mutationObservers[selector][childtree] &&
								mutationObservers[selector][childtree].callbacks.onAttribute){
									callbacks = mutationObservers[selector][childtree].callbacks.onAttribute;

									// Loop through callbacks
									for(_target in callbacks){

										// See if modifiedNodeAttribute matches the _target of the callback
										if(modifiedNodeAttribute.matches(_target)){

											// Loop through all callbacks
											for(y = 0; y < callbacks[_target].length; y++){

												// Call callback function
												callbacks[_target][y].call(modifiedNodeAttribute, mutationRecord.attributeName, mutationRecord.target.attributes[mutationRecord.attributeName].value);
											}


										}

									}


							}
						}

					}


				},
				DOMMutationCallbackFast = function(mutations, selector, parentNodes, childtree){
					var n, x, y,
						mutationRecord,
						addedNode,
						removedNode,
						modifiedNodeAttribute,
						callbacks,
						_target;

					// Loop through mutation records
					for(n = 0; n < mutations.length; n++){
						mutationRecord = mutations[n];

						// Loop through added nodes
						for(x = 0; x < mutationRecord.addedNodes.length; x++){
							addedNode = mutationRecord.addedNodes[x];

							// Check if node type is valid
							if(addedNode.nodeType == 1){

								// Check if an observer has been created for this selector and this event type
								if(	mutationObservers[selector] &&
									mutationObservers[selector][childtree] &&
									mutationObservers[selector][childtree].callbacks.onOpen){

										callbacks = mutationObservers[selector][childtree].callbacks.onOpen;

										// Loop through callbacks
										for(_target in callbacks){

											// See if addedNode matches the _target of the callback
											if(addedNode.matches(_target)){

												// Loop through all callbacks
												for(y = 0; y < callbacks[_target].length; y++){

													// Call callback function
													callbacks[_target][y].call(addedNode);
												}

											}

										}

								}
							}

						}

						// Loop through removed nodes
						for(x = 0; x < mutationRecord.removedNodes.length; x++){
							removedNode = mutationRecord.removedNodes[x];

							// Check if node type is valid
							if(removedNode.nodeType == 1){

								// Check if an observer has been created for this selector and this event type
								if(	mutationObservers[selector] &&
									mutationObservers[selector][childtree] &&
									mutationObservers[selector][childtree].callbacks.onClose){

										callbacks = mutationObservers[selector][childtree].callbacks.onClose;

										// Loop through callbacks
										for(_target in callbacks){

											// See if removedNode matches the _target of the callback
											if(removedNode.matches(_target)){

												// Loop through all callbacks
												for(y = 0; y < callbacks[_target].length; y++){

													// Call callback function
													callbacks[_target][y].call(removedNode);
												}


											}

										}


								}
							}



						}

						// Loop through modified attributes
						if(mutationRecord.attributeName){
							modifiedNodeAttribute = mutationRecord.target;

							// Check if an observer has been created for this selector and this event type
							if(	mutationObservers[selector] &&
								mutationObservers[selector][childtree] &&
								mutationObservers[selector][childtree].callbacks.onAttribute){
									callbacks = mutationObservers[selector][childtree].callbacks.onAttribute;

									// Loop through callbacks
									for(_target in callbacks){

										// See if modifiedNodeAttribute matches the _target of the callback
										if(modifiedNodeAttribute.matches(_target)){

											// Loop through all callbacks
											for(y = 0; y < callbacks[_target].length; y++){

												// Call callback function
												callbacks[_target][y].call(modifiedNodeAttribute, mutationRecord.attributeName, mutationRecord.target.attributes[mutationRecord.attributeName].value);
											}


										}

									}


							}
						}

					}


				},
				attachEventListeners = function(eventType, dexObject){

					var n,
						selector = {
							string: dexObject.selector
						};

					for(n = 0; n < dexObject.nodes.length; n++){
						selector.node = dexObject.nodes[n];

						selector.node.addEventListener(eventType, function(e){

							var eventHandlers = delegatedEventListeners[eventType][selector.string];

							for(handlerSelector in eventHandlers){

								clickedNode = e.target;

								while(	clickedNode !== document &&
										clickedNode !== selector.node) { // Stop looking when we hit the node that contains the event listener

									if (clickedNode.matches(handlerSelector)) {

										var handlerIndex = 0;

										while (eventHandlers[handlerSelector][handlerIndex]){
											eventHandlers[handlerSelector][handlerIndex].callback.call(clickedNode, e);

											if(!eventHandlers[handlerSelector][handlerIndex].persistant){
												delete eventHandlers[handlerSelector][handlerIndex];
											}

											handlerIndex++;
										}

									}

									clickedNode = clickedNode.parentNode;

								}
							}

						});
					}


				};

            // EXPOSED SELECTOR FUNCTIONS
            Dex.fn.init.prototype = {

				first: function(){
					/* Remove all nodes except first from node list */

					this.nodes = [this.nodes[0]];

					return this;
				},

				index: function(index){
					/* Remove all nodes except requested index */

					this.nodes = [this.nodes[index]];

					return this;
				},

				getNode: function(index){
					/* Return DOM node */

					return this.nodes[index];
				},

		        exists: function(){
					/* See if the node list contains at least one node */

		            return this.nodes[0] != null;
		        },

				appendClone: function(node){

		            var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n].appendChild(node.cloneNode(true));
		            }

					return this;

		        },

				append: function(node){

		            var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n].appendChild(node);
		            }

					return this;

		        },

		        remove: function(){

		            var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n];

		                if (this.nodes[n].parentNode) {
		                    this.nodes[n].parentNode.removeChild(this.nodes[n]);
		                }
		            }

					return this;

		        },

				clone: function(){
					var n,
						clonedNodes = [];

		            for(n = 0; n < this.nodes.length; n++){
		                clonedNodes.push(this.nodes[n].cloneNode(true));
		            }

					this.nodes = clonedNodes;

					return this;
				},

		        parent: function(){

		            this.nodes = [this.nodes[0].parentNode];

					return this;

		        },

		        closest: function(matchSelector){

		            var closest = [];

		            node = this.nodes[0];

		            // Go through parents
		            while(node && node !== document) {
		                if (node.matches(matchSelector)) {

		                    closest = [node];
		                    break;

		                }

		                node = node.parentNode;

		            }

		            this.nodes = closest;

					return this;

		        },

				filter: function(selector){
					/* Filter then current node list - note: only filters on the first node in list */

					this.nodes = this.nodes[0].querySelectorAll(selector);

					return this;

				},

		        // DOM modification
		        setHTML: function(value){
					/* Set innerHTML of all nodes in nodelist */

		            var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n].innerHTML = value;
		            }

					return this;
		        },

		        getHTML: function(value){
					/* Get innerHTML of all first node in nodelist */

		            return this.nodes[0].innerHTML;
		        },

				css: function(styles){
					/* Set CSS of all nodes in nodelist */

					var style,
						n;

					for(n = 0; n < this.nodes.length; n++){

						for(style in styles){

							this.nodes[n].style[style] = styles[style];

						}

					}

					return this;



				},

				setAttribute: function(key, value){
					/* Set attribute of all nodes in nodelist */

		            var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n].setAttribute(key, value);
		            }

					return this;
		        },

		        getAttribute: function(key){
					/* Get attribute of first node in nodelist */

		            return this.nodes[0].getAttribute(key);
		        },

		        toggleAttribute: function(key, value){
					/* Get attribute of first node in nodelist */

		            var n,
		                attrValue;

		            for(n = 0; n < this.nodes.length; n++){
		                attrValue = this.nodes[n].getAttribute(key);

		                if(attrValue == value[0]){
		                    this.nodes[n].setAttribute(key, value[1]);
		                } else {
		                    this.nodes[n].setAttribute(key, value[0]);
		                }
		            }

					return this;
		        },

				cache: function(cacheID){
					/* Cache node list with cacheID as ID */

					cachedSelections[cacheID] = this;
				},

				// Classes
		        addClass: function(classname){
					/* Add class to all nodes in nodelist */


		            var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n].classList.add(classname);
		            }

					return this;
		        },

		        removeClass: function(classname){
					/* Remove class from all nodes in nodelist */

		            var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n].classList.remove(classname);
		            }
					return this;
		        },

				hasClass: function(classname){
					/* Check whether first node in list contains a classname */

					var result = false;

					if(this.nodes[0]){
						result = this.nodes[0].classList.contains(classname);
					}

					return result;

				},

				toggleClass: function(classname){
					/* Toggle classnames on all nodes in nodelist */

					var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n].classList.toggle(classname);
		            }

					return this;
				},

				replaceClass: function(old_classname, new_classname){
					/* Replace old_classname with new_classname on all nodes in nodelist */

					var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n].classList.replace(old_classname, new_classname);
		            }

					return this;
				},

		        trigger: function(eventType){
					/* Trigger eventType (click, mouseover, etc, ...) on all nodes in nodelist */

		            if(this.nodes[0]){
		                var clickEvent = document.createEvent("MouseEvents");

		                clickEvent.initEvent(eventType, true, true);
		                this.nodes[0].dispatchEvent(clickEvent);
		            }

					return this;
		        },

				onOpen: function(target, callback){

					this.onMutation("onOpen", target, callback, {
						children: false
					});

					return this;
				},

				onChildOpen: function(target, callback){

					this.onMutation("onOpen", target, callback, {
						children: true
					});

					return this;
				},

				onClose: function(target, callback){

					this.onMutation("onClose", target, callback, {
						children: false
					});

					return this;
				},

				onChildClose: function(target, callback){

					this.onMutation("onClose", target, callback, {
						children: true
					});

					return this;
				},

				onAttribute: function(target, callback){

					this.onMutation("onAttribute", target, callback, {
						attributes: true,
						children: false
					});

					return this;
				},

				onChildAttribute: function(target, callback){
					console.log("create child attribute istener");
					this.onMutation("onAttribute", target, callback, {
						attributes: true,
						children: true
					});

					return this;
				},

				onMutation: function(mutationType, target, callback, parameters){
					var selector = this.selector,
						parentNodes = this.nodes,
						n,
						parameters = parameters || {},
						monitorAttributes = (parameters.attributes != undefined) ? parameters.attributes : false;
						monitorChildren = (parameters.children != undefined) ? parameters.children : true,
						childtree = (monitorChildren) ? "children" : "nochildren";


					// See if we need to attach a mutation observer
					if(!mutationObservers[this.selector]){
						mutationObservers[this.selector] = {}
					}

					if(!mutationObservers[this.selector][childtree]){
						mutationObservers[this.selector][childtree] = {
							observer: new MutationObserver(function(mutations){
								DOMMutationCallback(mutations, selector, parentNodes, childtree);
							}),
							callbacks: {},
							parameters: {
								attributes: monitorAttributes,
								subtree: monitorChildren
							}
						}

						// Attach observer to all matches nodes
						for(n = 0; n < this.nodes.length; n++){
							mutationObservers[this.selector][childtree].observer.observe(this.nodes[n], {
					            attributes: true,
					            childList: true,
					            characterData: false,
					            subtree: monitorChildren
					        });
						}
					}



					// See if there are already callbacks for mutationType
					if(!mutationObservers[this.selector][childtree].callbacks[mutationType]){
						mutationObservers[this.selector][childtree].callbacks[mutationType] = {}
					}

					// See if there are already calbacks for this target
					if(!mutationObservers[this.selector][childtree].callbacks[mutationType][target]){
						mutationObservers[this.selector][childtree].callbacks[mutationType][target] = []
					}

					// Save callback
					mutationObservers[this.selector][childtree].callbacks[mutationType][target].push(callback);


				},

                onClick: function(target, callback){

                    // Check that the event type exists in queue
                    if(!delegatedEventListeners["click"]){
                        delegatedEventListeners["click"] = {};
                    }

                    // Check that this selector is registered
                    if(!delegatedEventListeners["click"][this.selector]){
                        delegatedEventListeners["click"][this.selector] = {};

                        // Setup listener

                        attachEventListeners("click", this);
                    }

                    // Check that this target is registered
                    if(!delegatedEventListeners["click"][this.selector][target]){
                        delegatedEventListeners["click"][this.selector][target] = [];
                    }

                    // register delegated event listener
                    delegatedEventListeners["click"][this.selector][target].push({
                        callback: callback,
                        persistant: true
                    });

					return this;

                },


            }

			Dex.appendCSS = function(url){
		        var head = document.head,
		            link = document.createElement('link');

		          link.type = "text/css";
		          link.rel = "stylesheet";
		          link.href = url;

		          head.appendChild(link);

		          return link;
		    }

			Dex.getCached = function(cacheID){
				return cachedSelections[cacheID];
			}

			Dex.clearCache = function(cacheID){
				delete cachedSelections[cacheID];

			}

			Dex.tag = function(tag){
				/* Use Tag() to select nodes using the getElementsByTagName */

				var nodes = document.getElementsByTagName(tag);

				return Dex(tag, nodes);

			}

			Dex.class = function(classname){
				/* Use Tag() to select nodes using the getElementsByClassName */

				var nodeCollection = document.getElementsByClassName(classname),
					nodes = Array.prototype.slice.call(nodeCollection);

				return Dex("." + classname, nodes);

			}

		    Dex.iframe = function(selector){

		        var iframe = document.querySelectorAll(selector)[0];

		        return Dex.node(iframe.contentDocument || iframe.contentWindow.document);

		    }

			Dex.id = function(id){
				/* Use Tag() to select nodes using the getElementById */

				var nodes = [document.getElementById(id)];

				return Dex("#" + id, nodes);

			}

			Dex.node = function(node){
				/* Use Node to create a Dex object with a DOM node directly */

				return Dex("node", [node]);

			}

			Dex.collection = function(nodeCollection){
				/* Use Node to create a Dex object with an HTML Node Collection  directly */

				var nodes = [];

				for(n = 0; n < nodeCollection.length; n++){
					nodes.push(nodeCollection[n]);
				}

				return Dex("node", nodes)
			}

            if(exposeAs){
                window[exposeAs] = Dex;
            }

        })("DexV9");	
                                                     
                                                     
                                                     (function(exposeAs){
            var Dex = function(selector, nodes){

                // Return Dex object
                return new Dex.fn.init(selector, nodes);

            };

            Dex.fn = Dex.prototype = {
                init: function(selector, nodes){
                    this.selector = selector;

                    if(nodes){
                        this.nodes = nodes;
                    } else {
                        this.nodes = document.querySelectorAll(selector);
                    }

                    return this;
                }


            };

            var delegatedEventListeners = {},
				mutationObservers = {},
				DOMMutationCallback = function(mutations, selector, parentNodes, childtree){
					var n, x, y,
						mutationRecord,
						addedNode,
						removedNode,
						modifiedNodeAttribute,
						callbacks,
						_target,
						executeCallbacks = function(queue, node, arg1, arg2){
							for(y = 0; y < queue.length; y++){
								// Call callback function
								queue[y].call(node, arg1, arg2);
							}
						};


					// Loop through mutation records
					for(n = 0; n < mutations.length; n++){
						mutationRecord = mutations[n];

						// Loop through added nodes
						if(mutationRecord.addedNodes.length > 0){
							callbacks = mutationObservers[selector][childtree].callbacks.onOpen;

							if(callbacks){
								for(x = 0; x < mutationRecord.addedNodes.length; x++){
									addedNode = mutationRecord.addedNodes[x];

									// Check if node type is valid
									if(addedNode.nodeType == 1){

										// Loop through callbacks
										for(_target in callbacks){

											// See if addedNode matches the _target of the callback
											switch(callbacks[_target].matchType){
												case "tag":
													if(addedNode.tagName.toUpperCase() == _target.toUpperCase()){
														// Loop through all callbacks
														executeCallbacks(callbacks[_target].queue, addedNode);

													}
													break;
												case "id":
													if(addedNode.id == _target.slice(1)){
														// Loop through all callbacks
														executeCallbacks(callbacks[_target].queue, addedNode);

													}
													break;
												case "classname":
													if(addedNode.classList.contains(_target.slice(1))){
														// Loop through all callbacks
														executeCallbacks(callbacks[_target].queue, addedNode);

													}
													break;
												case "complex":
													if(addedNode.matches(_target)){
														// Loop through all callbacks
														executeCallbacks(callbacks[_target].queue, addedNode);

													}
													break;

											}

										}
									}

								}
							}
						}

						if(mutationRecord.removedNodes.length > 0){
							callbacks = mutationObservers[selector][childtree].callbacks.onClose;

							if(callbacks){
								// Loop through removed nodes
								for(x = 0; x < mutationRecord.removedNodes.length; x++){
									removedNode = mutationRecord.removedNodes[x];

									// Check if node type is valid
									if(removedNode.nodeType == 1){

										// Loop through callbacks
										for(_target in callbacks){

											// See if removedNode matches the _target of the callback
											switch(callbacks[_target].matchType){
												case "tag":
													if(removedNode.tagName.toUpperCase() == _target.toUpperCase()){
														// Loop through all callbacks
														executeCallbacks(callbacks[_target].queue, removedNode);

													}
													break;
												case "id":
													if(removedNode.id == _target.slice(1)){
														// Loop through all callbacks
														executeCallbacks(callbacks[_target].queue, removedNode);

													}
													break;
												case "classname":
													if(removedNode.classList.contains(_target.slice(1))){
														// Loop through all callbacks
														executeCallbacks(callbacks[_target].queue, removedNode);

													}
													break;
												case "complex":
													if(removedNode.matches(_target)){
														// Loop through all callbacks
														executeCallbacks(callbacks[_target].queue, removedNode);

													}
													break;

											}

										}

									}

								}
							}
						}

						if(mutationRecord.attributeName){
							callbacks = mutationObservers[selector][childtree].callbacks.onAttribute;

							if(callbacks){
								// Loop through modified attributes
								modifiedNodeAttribute = mutationRecord.target;

								// Loop through callbacks
								for(_target in callbacks){

									// See if modifiedNodeAttribute matches the _target of the callback
									switch(callbacks[_target].matchType){
										case "tag":
											if(modifiedNodeAttribute.tagName.toUpperCase() == _target.toUpperCase()){
												// Loop through all callbacks
												executeCallbacks(callbacks[_target].queue, modifiedNodeAttribute, mutationRecord.attributeName, mutationRecord.target.attributes[mutationRecord.attributeName].value);

											}
											break;
										case "id":
											if(modifiedNodeAttribute.id == _target.slice(1)){
												// Loop through all callbacks
												executeCallbacks(callbacks[_target].queue, modifiedNodeAttribute, mutationRecord.attributeName, mutationRecord.target.attributes[mutationRecord.attributeName].value);

											}
											break;
										case "classname":
											if(modifiedNodeAttribute.classList.contains(_target.slice(1))){
												// Loop through all callbacks
												executeCallbacks(callbacks[_target].queue, modifiedNodeAttribute, mutationRecord.attributeName, mutationRecord.target.attributes[mutationRecord.attributeName].value);

											}
											break;
										case "complex":
											if(modifiedNodeAttribute.matches(_target)){
												// Loop through all callbacks
												executeCallbacks(callbacks[_target].queue, modifiedNodeAttribute, mutationRecord.attributeName, mutationRecord.target.attributes[mutationRecord.attributeName].value);

											}
											break;

									}

								}
							}
						}



					}



				},
				attachEventListeners = function(eventType, dexObject){

					var n,
						selector = {
							string: dexObject.selector
						};

					for(n = 0; n < dexObject.nodes.length; n++){
						selector.node = dexObject.nodes[n];

						selector.node.addEventListener(eventType, function(e){

							var eventHandlers = delegatedEventListeners[eventType][selector.string];

							for(handlerSelector in eventHandlers){

								clickedNode = e.target;

								while(	clickedNode !== document &&
										clickedNode !== selector.node) { // Stop looking when we hit the node that contains the event listener

									if (clickedNode.matches(handlerSelector)) {

										var handlerIndex = 0;

										while (eventHandlers[handlerSelector][handlerIndex]){
											eventHandlers[handlerSelector][handlerIndex].callback.call(clickedNode, e);

											if(!eventHandlers[handlerSelector][handlerIndex].persistant){
												delete eventHandlers[handlerSelector][handlerIndex];
											}

											handlerIndex++;
										}

									}

									clickedNode = clickedNode.parentNode;

								}
							}

						});
					}


				};

            // EXPOSED SELECTOR FUNCTIONS
            Dex.fn.init.prototype = {

				first: function(){
					/* Remove all nodes except first from node list */

					this.nodes = [this.nodes[0]];

					return this;
				},

				index: function(index){
					/* Remove all nodes except requested index */

					this.nodes = [this.nodes[index]];

					return this;
				},

				getNode: function(index){
					/* Return DOM node */

					return this.nodes[index];
				},

		        exists: function(){
					/* See if the node list contains at least one node */

		            return this.nodes[0] != null;
		        },

				appendClone: function(node){

		            var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n].appendChild(node.cloneNode(true));
		            }

					return this;

		        },

				append: function(node){

		            var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n].appendChild(node);
		            }

					return this;

		        },

		        remove: function(){

		            var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n];

		                if (this.nodes[n].parentNode) {
		                    this.nodes[n].parentNode.removeChild(this.nodes[n]);
		                }
		            }

					return this;

		        },

				clone: function(){
					var n,
						clonedNodes = [];

		            for(n = 0; n < this.nodes.length; n++){
		                clonedNodes.push(this.nodes[n].cloneNode(true));
		            }

					this.nodes = clonedNodes;

					return this;
				},

		        parent: function(){

		            this.nodes = [this.nodes[0].parentNode];

					return this;

		        },

		        closest: function(matchSelector){

		            var closest = [];

		            node = this.nodes[0];

		            // Go through parents
		            while(node && node !== document) {
		                if (node.matches(matchSelector)) {

		                    closest = [node];
		                    break;

		                }

		                node = node.parentNode;

		            }

		            this.nodes = closest;

					return this;

		        },

				filter: function(selector){
					/* Filter then current node list - note: only filters on the first node in list */

					this.nodes = this.nodes[0].querySelectorAll(selector);

					return this;

				},

		        // DOM modification
		        setHTML: function(value){
					/* Set innerHTML of all nodes in nodelist */

		            var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n].innerHTML = value;
		            }

					return this;
		        },

		        getHTML: function(value){
					/* Get innerHTML of all first node in nodelist */

		            return this.nodes[0].innerHTML;
		        },

				css: function(styles){
					/* Set CSS of all nodes in nodelist */

					var style,
						n;

					for(n = 0; n < this.nodes.length; n++){

						for(style in styles){

							this.nodes[n].style[style] = styles[style];

						}

					}

					return this;



				},

				setAttribute: function(key, value){
					/* Set attribute of all nodes in nodelist */

		            var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n].setAttribute(key, value);
		            }

					return this;
		        },

		        getAttribute: function(key){
					/* Get attribute of first node in nodelist */

		            return this.nodes[0].getAttribute(key);
		        },

		        toggleAttribute: function(key, value){
					/* Get attribute of first node in nodelist */

		            var n,
		                attrValue;

		            for(n = 0; n < this.nodes.length; n++){
		                attrValue = this.nodes[n].getAttribute(key);

		                if(attrValue == value[0]){
		                    this.nodes[n].setAttribute(key, value[1]);
		                } else {
		                    this.nodes[n].setAttribute(key, value[0]);
		                }
		            }

					return this;
		        },

				cache: function(cacheID){
					/* Cache node list with cacheID as ID */

					cachedSelections[cacheID] = this;
				},

				// Classes
		        addClass: function(classname){
					/* Add class to all nodes in nodelist */


		            var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n].classList.add(classname);
		            }

					return this;
		        },

		        removeClass: function(classname){
					/* Remove class from all nodes in nodelist */

		            var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n].classList.remove(classname);
		            }
					return this;
		        },

				hasClass: function(classname){
					/* Check whether first node in list contains a classname */

					var result = false;

					if(this.nodes[0]){
						result = this.nodes[0].classList.contains(classname);
					}

					return result;

				},

				toggleClass: function(classname){
					/* Toggle classnames on all nodes in nodelist */

					var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n].classList.toggle(classname);
		            }

					return this;
				},

				replaceClass: function(old_classname, new_classname){
					/* Replace old_classname with new_classname on all nodes in nodelist */

					var n;

		            for(n = 0; n < this.nodes.length; n++){
		                this.nodes[n].classList.replace(old_classname, new_classname);
		            }

					return this;
				},

		        trigger: function(eventType){
					/* Trigger eventType (click, mouseover, etc, ...) on all nodes in nodelist */

		            if(this.nodes[0]){
		                var clickEvent = document.createEvent("MouseEvents");

		                clickEvent.initEvent(eventType, true, true);
		                this.nodes[0].dispatchEvent(clickEvent);
		            }

					return this;
		        },

				onOpen: function(target, callback){

					this.onMutation("onOpen", target, callback, {
						children: false
					});

					return this;
				},

				onChildOpen: function(target, callback){

					this.onMutation("onOpen", target, callback, {
						children: true
					});

					return this;
				},



				onClose: function(target, callback){

					this.onMutation("onClose", target, callback, {
						children: false
					});

					return this;
				},

				onChildClose: function(target, callback){

					this.onMutation("onClose", target, callback, {
						children: true
					});

					return this;
				},

				onAttribute: function(target, callback){

					this.onMutation("onAttribute", target, callback, {
						attributes: true,
						children: false
					});

					return this;
				},

				onChildAttribute: function(target, callback){
					this.onMutation("onAttribute", target, callback, {
						attributes: true,
						children: true
					});

					return this;
				},





						onMutation: function(mutationType, target, callback, parameters){
							var selector = this.selector,
								parentNodes = this.nodes,
								matchType = function(target){
									// This needs updating to cater for complex selectors.

									var result;

									if(target[0] == "."){
										result = "classname";

									} else if(target[0] == "#"){
										result = "id";

									} else if(target[0] == "["){
										result = "complex";

									} else {
										result = "tag";
									}

									return result;

								}(target),
								n,
								parameters = parameters || {},
								monitorAttributes = (parameters.attributes != undefined) ? parameters.attributes : false;
								monitorChildren = (parameters.children != undefined) ? parameters.children : true,
								childtree = (monitorChildren) ? "children" : "nochildren";


							// See if we need to attach a mutation observer
							if(!mutationObservers[this.selector]){
								mutationObservers[this.selector] = {}
							}

							if(!mutationObservers[this.selector][childtree]){
								mutationObservers[this.selector][childtree] = {
									observer: new MutationObserver(function(mutations){
										DOMMutationCallback(mutations, selector, parentNodes, childtree);
									}),
									callbacks: {},
									parameters: {
										attributes: monitorAttributes,
										subtree: monitorChildren
									}
								}

								// Attach observer to all matches nodes
								for(n = 0; n < this.nodes.length; n++){
									mutationObservers[this.selector][childtree].observer.observe(this.nodes[n], {
							            attributes: true,
							            childList: true,
							            characterData: false,
							            subtree: monitorChildren
							        });
								}
							}



							// See if there are already callbacks for mutationType
							if(!mutationObservers[this.selector][childtree].callbacks[mutationType]){
								mutationObservers[this.selector][childtree].callbacks[mutationType] = {}
							}

							// See if there are already calbacks for this target
							if(!mutationObservers[this.selector][childtree].callbacks[mutationType][target]){
								// mutationObservers[this.selector][childtree].callbacks[mutationType][target] = []
								mutationObservers[this.selector][childtree].callbacks[mutationType][target] = {
									matchType: matchType,
									queue: []
								}
							}

							// Save callback
							mutationObservers[this.selector][childtree].callbacks[mutationType][target].queue.push(callback);




						},

                onClick: function(target, callback){

                    // Check that the event type exists in queue
                    if(!delegatedEventListeners["click"]){
                        delegatedEventListeners["click"] = {};
                    }

                    // Check that this selector is registered
                    if(!delegatedEventListeners["click"][this.selector]){
                        delegatedEventListeners["click"][this.selector] = {};

                        // Setup listener

                        attachEventListeners("click", this);
                    }

                    // Check that this target is registered
                    if(!delegatedEventListeners["click"][this.selector][target]){
                        delegatedEventListeners["click"][this.selector][target] = [];
                    }

                    // register delegated event listener
                    delegatedEventListeners["click"][this.selector][target].push({
                        callback: callback,
                        persistant: true
                    });

					return this;

                },


            }

			Dex.appendCSS = function(url){
		        var head = document.head,
		            link = document.createElement('link');

		          link.type = "text/css";
		          link.rel = "stylesheet";
		          link.href = url;

		          head.appendChild(link);

		          return link;
		    }

			Dex.getCached = function(cacheID){
				return cachedSelections[cacheID];
			}

			Dex.clearCache = function(cacheID){
				delete cachedSelections[cacheID];

			}

			Dex.tag = function(tag){
				/* Use Tag() to select nodes using the getElementsByTagName */

				var nodes = document.getElementsByTagName(tag);

				return Dex(tag, nodes);

			}

			Dex.class = function(classname){
				/* Use Tag() to select nodes using the getElementsByClassName */

				var nodeCollection = document.getElementsByClassName(classname),
					nodes = Array.prototype.slice.call(nodeCollection);

				return Dex("." + classname, nodes);

			}

		    Dex.iframe = function(selector){

		        var iframe = document.querySelectorAll(selector)[0];

		        return Dex.node(iframe.contentDocument || iframe.contentWindow.document);

		    }

			Dex.id = function(id){
				/* Use Tag() to select nodes using the getElementById */

				var nodes = [document.getElementById(id)];

				return Dex("#" + id, nodes);

			}

			Dex.node = function(node){
				/* Use Node to create a Dex object with a DOM node directly */

				return Dex("node", [node]);

			}

			Dex.collection = function(nodeCollection){
				/* Use Node to create a Dex object with an HTML Node Collection  directly */

				var nodes = [];

				for(n = 0; n < nodeCollection.length; n++){
					nodes.push(nodeCollection[n]);
				}

				return Dex("node", nodes)
			}

            if(exposeAs){
                window[exposeAs] = Dex;
            }

        })("DexV10");
</script>

<style>
		.add-colour {
			background: red;
		}
</style>

<section>
			<table class="single-class">
				<tbody>
					<tr>
						<td>
							<div class="app-container">
								<table class="change-attr">
									<tbody>
										<tr>
											<td>
												<div class="app-window">
													App window
													<table>
														<tbody>
															<tr>
																<td class="change-attr">
																	<div class="app-menu">
																		app menu
																		<div>
																			<div>
																				<ul class="first-ul">
																					<li>
																						<span class="title">This is a list item in an unordered list</span>
																					</li>
																					<li>
																						<button class="click-me-ul">ul .click-me</button>
																						<button class="and-me">ul .and-me</button>
																					</li>

																				</ul>

																				<ul class="second-ul">
																					<li>
																						<span class="title">This is a list item in an unordered list</span>
																					</li>
																					<li>
																						<button class="click-me-ul">ul .click-me</button>
																						<button class="and-me">ul .and-me</button>
																					</li>

																				</ul>

																				<ol class="first-ol">
																					<li class="list-item" id="list-id">
																						<span class="title">This is a list item in an ordered list</span>
																					</li>
																					<li class="list-item">
																						<button class="click-me-ol">ol .click-me</button>
																						<button class="and-me">ol .and-me</button>
																					</li>
																				</ol>
																			</div>
																			<span id="output">This is the output area</span>
																		</div>
																	</div>
																</td>
															</tr>
														</tbody>
													</table>
												</div>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</section>
Tests:
DexV9
// Setup listeners DexV9("ol").onChildAttribute("li", function(key, value){ // handler }); // Trigger listeners by affecting DOM DexV9("ol li").toggleAttribute("data-attr", ["on", "off"]);
DexV10 by TAG
// Setup listeners DexV10("ol").onChildAttribute("li", function(key, value){ // handler }); // Trigger listeners by affecting DOM DexV10("ol li").toggleAttribute("data-attr", ["on", "off"]);
DexV10 by CLASS
// Setup listeners DexV10("ol").onChildAttribute("li.list-item", function(key, value){ // handler }); // Trigger listeners by affecting DOM DexV10("ol li.list-item").toggleAttribute("data-attr", ["on", "off"]);
DexV10 by ID
// Setup listeners DexV10("ol").onChildAttribute("#list-id", function(key, value){ // handler }); // Trigger listeners by affecting DOM DexV10("#list-id").toggleAttribute("data-attr", ["on", "off"]);
Rendered benchmark preparation results:
Suite status: <idle, ready to run>

Previous results
Test case name	Result
DexV9
DexV10 by TAG
DexV10 by CLASS
DexV10 by ID
Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.
Website Performance Monitoring by Request Metrics
Latest run results:
Run details: (Test run date: 6 years ago)
User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36
Browser/OS: Chrome 61 on Mac OS X 10.12.5
View result in a separate tab
Test name	Executions per second
DexV9	1568.4 Ops/sec
DexV10 by TAG	1941.6 Ops/sec
DexV10 by CLASS	1815.1 Ops/sec
DexV10 by ID	5155.9 Ops/sec
DexV9 vs DexV10 (version: 8)

Comparing performance of: DexV9 vs DexV10 by TAG vs DexV10 by CLASS vs DexV10 by ID

Created: 6 years ago by: Registered User

Jump to the latest result

DexV9

DexV10 by TAG

DexV10 by CLASS

DexV10 by ID

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A
