Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Dex vs jQuery filter / find comparison
(version: 0)
Comparing performance of:
Dex Class vs jQuery vs Dex All
Created:
8 years ago
by:
Guest
Jump to the latest result
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 = {}, 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; }, 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; }, 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; }, 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 nodes = document.getElementsByClassName(classname); 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; } })("Dex"); </script> <style> .add-colour { background: red; } </style> <section> <table> <tbody> <tr> <td> <div class="app-container"> <table> <tbody> <tr> <td> <div class="app-window"> App window <table> <tbody> <tr> <td> <div class="app-menu"> app menu <div> <div> <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> <li> <span class="title">This is a list item in an ordered list</span> </li> <li> <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:
Dex Class
Dex.class("app-window").filter("li");
jQuery
$(".app-window").find("li");
Dex All
Dex(".app-window").filter("li");
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Dex Class
jQuery
Dex All
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Based on the provided HTML structure and JavaScript code snippets, I'll attempt to write a test case that covers the entire functionality. Here's an example test case in Cypress: ```javascript describe('HTML Structure and JavaScript Code', () => { beforeEach(() => { cy.visit('/') }) it('Should render the ordered list correctly using Dex class', () => { cy.get('[data-testid="ol"] li').should('have.length', 2) cy.get('[data-testid="ol"] li:nth-child(1)').should('contain.text', 'This is a list item in an ordered list') cy.get('[data-testid="ol"] li:nth-child(2) button.click-me-ol').should('have.attr', 'type', 'button') }) it('Should render the ordered list correctly using jQuery', () => { cy.get('.app-window li').should('have.length', 2) cy.get('.app-window li:first-child').should('contain.text', 'This is a list item in an ordered list') cy.get('.app-window li button.click-me-ol').should('have.attr', 'type', 'button') }) it('Should render the ordered list correctly using Dex All', () => { cy.get('[data-testid="ol"] li').should('have.length', 2) cy.get('[data-testid="ol"] li:nth-child(1)').should('contain.text', 'This is a list item in an ordered list') cy.get('[data-testid="ol"] li button.and-me').should('have.attr', 'type', 'button') }) }) ``` Note that I've used `cy.visit('/')` to navigate to the test page, and then used various commands (e.g. `get()`, `should()`, `contain.text()`) to verify the correctness of the rendered HTML structure. Please adjust the test code according to your specific requirements and the actual implementation of the application.
Related benchmarks:
jquery class selector vs queryselector vs getelementbyclassname
querySelector() vs getElementsByClassName()[0]
querySelector vs getElementsByClassName [0]
getElementsByClassName()[0] vs querySelectorAll
getElementById VS querySelector (simple comparison)
Comments
Confirm delete:
Do you really want to delete benchmark?