Benchmark: Parse attributes of DOM element

HTML Preparation code:

<div readonly="true" value="231" autocomplete="email" id="t1"></div>

Script Preparation code:

HTMLElement.prototype.getBoolAttr = function getBoolAttr(attr) {
    const a = this.getAttribute(attr);
    if (a == null) {
        return this[attr];
    }
    return a !== "false";
};

HTMLElement.prototype.getNumAttr = function getNumAttr(attr) {
    const a = this.getAttribute(attr);
    if (a == null || a === "") {
        return this[attr];
    }
    const v = +a;
    if (Number.isNaN(v)) {
        console.error(`${this.tagName}. Expected number for attribute [${attr}] but pointed '${a}'`);
        return this[attr];
    }
    return v;
};

HTMLElement.prototype.getStrAttr = function getStrAttr(attr) {
    const a = this.getAttribute(attr);
    if (a == null) {
        return this[attr];
    }
    return a;
};

HTMLElement.prototype.getAttr = function getAttr(attr, type = "string") {
    const a = this.getAttribute(attr);
    if (a == null) {
        return this[attr];
    }
    switch (type) {
        case "bool":
            return a !== "false";
        case "number": {
            const v = +a;
            if (Number.isNaN(v)) {
                console.error(`${this.tagName}. Expected number for attribute [${attr}] but pointed '${a}'`);
                return this[attr];
            }
            return v;
        }
        default:
            return a; // string
    }
};

HTMLElement.prototype.getAttr2 = function getAttr(attr, type = 0) {
    const a = this.getAttribute(attr);
    if (a == null) {
        return this[attr];
    }
    switch (type) {
        case 1:
            return a !== "false";
        case 2: {
            const v = +a;
            if (Number.isNaN(v)) {
                console.error(`${this.tagName}. Expected number for attribute [${attr}] but pointed '${a}'`);
                return this[attr];
            }
            return v;
        }
        default:
            return a; // string
    }
};

Tests:

getBoolAttr
const el = document.getElementById("t1") el.test = el.getBoolAttr("readonly")
getAttr
const el = document.getElementById("t1") el.test2 = el.getAttr("readonly", 'bool')
getAttr2
const el = document.getElementById("t1") el.test3 = el.getAttr("readonly", 1)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getBoolAttr
getAttr
getAttr2

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!

Related benchmarks:

Parse attributes of DOM element (version: 0)

Comparing performance of: getBoolAttr vs getAttr vs getAttr2

Created: 3 years ago by: Registered User

Jump to the latest result

getBoolAttr

getAttr

getAttr2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results