Cross-Browser Attributauswahl in reinem Javascript

Question

Wenn ich aus irgendeinem Grund keinen Zugriff auf JQuery habe, führe ich normalerweise die Attributauswahl manuell mit element.hasAttribute oder element.getAttribute durch.

Allerdings scheint es hier einige Komplikationen zu geben, da ältere Browser (IE <= 8) hasAttribute nicht unterstützen. Also, wenn Sie überprüfen möchten, ob ein Element ein bestimmtes Attribut hat, müssen Sie getAttribute verwenden und den Rückgabewert überprüfen.

if ((element.hasAttribute && element.hasAttribute("foo"))
    || (element.getAttribute("foo") != null))
{
  ....
}

Dies lässt mich denken, dass es vielleicht am besten ist, hasAttribute ganz zu vergessen und stattdessen immer getAttribute zu verwenden. Das Problem ist, dass ich keine konsistente Dokumentation über den Rückgabewert von getAttribute finden kann. In der Praxis liefert es auf den meisten Browsern null, wenn das Attribut nicht existiert - aber es könnte auch einen leeren String zurückgeben, da dies gemäß der DOM 3-Spezifikation so sein soll.

Leider hinterlässt die Rückgabe eines leeren Strings uns keine Möglichkeit, zwischen folgendem zu unterscheiden:

und

Also, in der Praxis scheint das am meisten tragbare Vorgehen zu sein, zuerst zu überprüfen, ob der Browser hasAttribute unterstützt, und falls nicht, getAttribute zu verwenden - da IE 6-8 getAttribute implementieren, sodass es null zurückgibt (anstelle eines leeren Strings), wenn das Attribut nicht vorhanden ist.

Ist das wirklich der beste Weg, dies zu tun? Oder gibt es einen besseren Weg, um plattformübergreifende Attributserkennung in reinem Javascript zu schreiben?

Answer 1

Das folgende funktioniert gut in IE6-10 (getestet mit IETester), Firefox, Chrome und Safari:

function hasAttrib(element, attributeName) {
  return (typeof element.attributes[attributeName] != 'undefined');
}

Hier sind jsfiddle und seine eigenständige Ergebnisseite (zum Testen in älteren Browsern).

Answer 2

Dies wird wahrscheinlich einige Tests benötigen, aber würde sich nicht die Länge des Strings ändern, der das Element beschreibt, wenn Sie versuchen, einem Attribut, das es noch nicht hat, setAttribute zu setzen, im Vergleich dazu, wenn Sie es für eines versuchen, das es bereits hat?

var hasAttribute = (function () {
    if (HTMLElement && HTMLElement.prototype
                    && HTMLElement.prototype.hasAttribute)
        return function (node, attrib) { // verwenden, wenn verfügbar
            return node.hasAttribute(attrib);
        };
    return function (node, attrib) {
        var d = document.createElement('div'), // Knoten für innerHTML
            e = node.cloneNode(false), // id Attribut geht hier verloren
            i;
        if (attrib.toLowerCase() === 'id') return !!node.getAttribute('id');
        d.appendChild(e);
        i = d.innerHTML.length;                         // ursprüngliche Länge erhalten
        e.setAttribute(attrib, e.getAttribute(attrib)); // Attribut zum Testen setzen
        return d.innerHTML.length === i;                // überprüfen ob Länge verändert hat
    };
}());