JSFiddle - React, Tailwind, and code Playground
HTML
<div><i>123</i><b>456</b></div>
JavaScript
HTMLElement.prototype.childrenByTag1 = function(tag){
return [].filter.call(this.children, byTag(tag));
function byTag(name) {
name = name.toUpperCase();
return function(el) {
return el.nodeName === name;
}
}
}
HTMLElement.prototype.childrenByTag2 = function(tag){
var children = this.children, tagChildren = []; tag = tag.toUpperCase();
for(var i = 0; i < children.length; i++){
if(children[i].tagName === tag) tagChildren.push(children[i]);
}
return tagChildren;
}
var getElementByXpath = function (path) {
return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
};
var iterations = 100000;
console.time("childrenByTag1");
for(var i=0; i<iterations; i++){
var b = document.body.childrenByTag1("div")[0].childrenByTag1("b")[0];
}
console.timeEnd("childrenByTag1");
console.time("childrenByTag2");
for(var i=0; i<iterations; i++){
var b = document.body.childrenByTag2("div")[0].childrenByTag2("b")[0];
}
console.timeEnd("childrenByTag2");
console.time("querySelector");
for(var i=0; i<iterations; i++){
var b = document.body.querySelector("div:nth-child(1) > b:nth-child(2)");
}
console.timeEnd("querySelector");
console.time("getElementsByTagName");
for(var i=0; i<iterations; i++){
var b = document.getElementsByTagName("b")[0];
}
console.timeEnd("getElementsByTagName");
console.time("regexp");
for(var i=0; i<iterations; i++){
var b = document.body.innerHTML.match(/<b>(\d+)<\/b>/);
}
console.timeEnd("regexp");
console.time("Xpath");
for(var i=0; i<iterations; i++){
var b = getElementByXpath("/html/body/div/b");
}
console.timeEnd("Xpath");