Wie überprüft man, ob ein Datenattribut mit plain javascript existiert?

Question

Ich möchte überprüfen, ob ein HTML5-Datenattribut mit plain javascript existiert. Ich habe das folgende Code-Snippet ausprobiert, aber es funktioniert nicht.

if(object.getAttribute("data-params")==="undefined") { 
    //data-attribute doesn't exist 
} 

Answer 1

Element.getAttribute gibt null oder eine leere Zeichenfolge zurück, wenn das Attribut nicht existiert.

Sie würden verwenden Element.hasAttribute:

if (!object.hasAttribute("data-params")) { 
    // data attribute doesn't exist 
} 

oder Element.dataset (siehe auch: in operator):

if (!("params" in object.dataset)) { 
    // data attribute doesn't exist 
} 

oder sogar

if (!object.getAttribute("data-params")) { 
    // data attribute doesn't exist or is empty 
} 

Answer 2

Versuchen Sie es mit typeof:

if(typeof object.getAttribute("data-params") === "undefined") { 
    console.log('data-attribute doesn't exist'); 
} 

Answer 3

Sie cang tun nur falsy Prüfwert

if(!object.getAttribute("data-params")) { 
    //data-attribute doesn't exist 
} 

Ursache getAttribute kann

null oder eine leere Zeichenfolge zurückgeben

auch können Sie object.hasAttribute("data-params") nur verwenden um zu überprüfen, ob das Attribut existiert

Answer 4

Der Code, den Sie nicht gepostet nicht gewonnen Ich arbeite nicht so, wie du es erwartest, was du hier machst, ist das Überprüfen des Attributwerts des angegebenen Attributs ("data-params") ist gleich "undefined", die true nur zurückgibt, wenn das Attribut data-params="undefined" ist.

if (object.getAttribute("data-params") === "undefined") { 
    // the "data-params" attribute-value is exactly "undefined" 
    // note that `getAttribute()` is a 
} 

Was ich vermute, Sie wollen zu tun ist:

var typeOfObjectAttribute = typeof object.getAttribute("data-params"); 

if (typeOfObjectAttribute === null || typeOfObjectAttribute === "") { 
    // data-params attribute doesn't exist on that Node. 
} 

Beachten Sie, dass – nach Mozilla Developer Network (am Referenz für Element.getAttribute() unten) – heißt es:

getAttribute() Gibt den Wert eines angegebenen Attributs für das Element zurück. Wenn das angegebene Attribut nicht existiert, ist der zurückgegebene Wert entweder null oder "" (die leere Zeichenfolge) & hellip;

Es ist auch erwähnenswert, dass getAttribute() ein Verfahren des Elementknoten ist, eher als generische Objekte.

Im Übrigen könnten Sie auch folgende Vorgehensweise verwenden (wieder testen, dass das Attribut nicht set):

// here we look to see if the 'params' key is present in the 
// HTMLElement.dataset object of the element, and then invert 
// that result using the '!' operator, to check that the 
// attribute *isn't* present: 
if (!('params' in document.getElementById('elementID').dataset)) { 
    // the data-params attribute is not present. 
} 

Referenzen:

• Element.getAttribute().
• HTMLElement.dataset.
• in operator.
• typeof operator.

Answer 5

Sie können auch einfach die Dataset-API verwenden.

HTMLElement.dataset

Die HTMLElement.dataset schreibgeschützte Eigenschaft ermöglicht den Zugriff sowohl im Lese- und Schreibmodus, um alle benutzerdefinierten Datenattribute (Daten- *) auf das Element gesetzt. Es ist eine Zuordnung von DOMString, ein Eintrag für jedes benutzerdefinierte Datenattribut.

Leider funktioniert das nicht in IE10, aber ich bin mir ziemlich sicher, dass irgendwo da draußen ein Shim ist.

Hier ist ein Beispiel

var containerData \t = document.querySelector('#container').dataset, 
 
    contentData \t = document.querySelector('#content').dataset; 
 

 
// Check if dataset is empty or not. 
 
console.log(Object.keys(containerData).length === 0); 
 
console.log(Object.keys(contentData).length === 0); 
 

 
// Check for specific data 
 
if (containerData.hasOwnProperty('bar')) { 
 
    console.log(containerData.bar); 
 
} 
 

 
// Here is the dataset 
 
console.log(containerData);

<div id="container" data-foo="bar" data-bar="foo"> 
 
    <div id="content"> 
 
    Content 
 
    </div> 
 
</div>

Answer 6

gegen null prüfen auch die Lösung lieferte.

if (object.getAttribute("data-params") === null) { 
//data attribute doesn't exist 
}else{ 
//data attribute exists 
}