<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>
Dex.class("app-menu").setAttribute("data-attr", "test");
var attributeValue = Dex.class("app-menu").getAttribute("data-attr");
$(".app-menu").attr("data-attr", "test");
var attributeValue = $(".app-menu").attr("data-attr");
Dex(".app-menu").setAttribute("data-attr", "test");
var attributeValue = Dex(".app-menu").getAttribute("data-attr");
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Dex Class | |
jQuery | |
Dex All |
Test name | Executions per second |
---|---|
Dex Class | 1465791.8 Ops/sec |
jQuery | 220731.4 Ops/sec |
Dex All | 4014.8 Ops/sec |
It seems like you're trying to parse some HTML and JavaScript code, but I'll assume it's for benchmarking purposes. Let me break down the code:
HTML structure
<table>
...
</table>
The table contains multiple rows with different attributes and values.
JavaScript code snippets
Dex.class("app-menu").setAttribute("data-attr", "test");
var attributeValue = Dex.class("app-menu").getAttribute("data-attr");
This JavaScript snippet uses the Dex
class to set an attribute on an HTML element with the id app-menu
. The class()
method returns a Dex
object, which has an setAttribute()
method to set attributes.
$(".app-menu").attr("data-attr", "test");
var attributeValue = $(".app-menu").attr("data-attr");
This jQuery snippet uses the .app-menu
class selector to select the HTML element and sets an attribute on it using the attr()
method.
Dex(".app-menu").setAttribute("data-attr", "test");
var attributeValue = Dex(".app-menu").getAttribute("data-attr");
This JavaScript snippet uses the Dex
class to select the HTML element with the id .app-menu
and sets an attribute on it using the setAttribute()
method.
Benchmark data
The benchmark data is in JSON format, with three objects representing each test case:
[
{
"Benchmark Definition": "...",
"Test Name": "Dex Class"
},
{
"Benchmark Definition": "...",
"Test Name": "jQuery"
},
{
"Benchmark Definition": "...",
"Test Name": "Dex All"
}
]
Each object has two properties: Benchmark Definition
and Test Name
. The Benchmark Definition
property contains the JavaScript code snippet, and the Test Name
property represents the test case.
Latest benchmark result
The latest benchmark result is also in JSON format:
[
{
"RawUAString": "...",
"Browser": "...",
"DevicePlatform": "...",
"OperatingSystem": "...",
"ExecutionsPerSecond": "...",
"TestName": "Dex Class"
},
{
"RawUAString": "...",
"Browser": "...",
"DevicePlatform": "...",
"OperatingSystem": "...",
"ExecutionsPerSecond": "...",
"TestName": "jQuery"
},
{
"RawUAString": "...",
"Browser": "...",
"DevicePlatform": "...",
"OperatingSystem": "...",
"ExecutionsPerSecond": "...",
"TestName": "Dex All"
}
]
Each object in the array represents a benchmark result, with properties such as RawUAString
, Browser
, and ExecutionsPerSecond
.
Please provide more context or clarify which specific aspect of this code you'd like me to help with.