Element: getAttributeNames()-Methode
Die getAttributeNames()
-Methode der Element
-Schnittstelle gibt die Attributnamen des Elements als ein Array
von Zeichenfolgen zurück. Wenn das Element keine Attribute hat, wird ein leeres Array zurückgegeben.
Das Verwenden von getAttributeNames()
zusammen mit getAttribute()
ist eine speichereffiziente und leistungsfähige Alternative zum Zugriff auf Element.attributes
.
Die von getAttributeNames()
zurückgegebenen Namen sind qualifizierte Attributnamen. Das bedeutet, dass Attribute mit einem Namespace-Präfix mit diesem Namespace-Präfix zurückgegeben werden (nicht der tatsächliche Namespace), gefolgt von einem Doppelpunkt und dann dem Attributnamen (zum Beispiel xlink:href
), während Attribute ohne Namespace-Präfix unverändert zurückgegeben werden (zum Beispiel href
).
Syntax
getAttributeNames()
Parameter
Keine.
Rückgabewert
Ein (Array
) von Zeichenfolgen.
Beispiele
Das folgende Beispiel zeigt:
- Für ein Attribut, das ein Namespace-Präfix hat, gibt
getAttributeNames()
dieses Namespace-Präfix zusammen mit dem Attributnamen zurück. - Für ein Attribut, das kein Namespace-Präfix hat, gibt
getAttributeNames()
nur den Attributnamen unverändert zurück.
Es ist wichtig zu verstehen, dass:
- Ein Attribut im DOM mit einem Namespace vorhanden sein kann, aber ohne ein Namespace-Präfix.
- Für ein Attribut im DOM, das einen Namespace hat, aber kein Namespace-Präfix, wird
getAttributeNames()
nur den Attributnamen zurückgeben, ohne Hinweis darauf, dass das Attribut in einem Namespace ist.
Das folgende Beispiel enthält einen solchen Fall "mit Namespace, aber ohne Namespace-Präfix".
const element = document.createElement("a");
// set "href" attribute with no namespace and no namespace prefix
element.setAttribute("href", "https://example.com");
// set "href" attribute with namespace and also "xlink" namespace prefix
element.setAttributeNS(
"http://www.w3.org/1999/xlink",
"xlink:href",
"https://example.com",
);
// set "show" attribute with namespace but no namespace prefix
element.setAttributeNS("http://www.w3.org/1999/xlink", "show", "new");
// Iterate over element's attributes
for (const name of element.getAttributeNames()) {
const value = element.getAttribute(name);
console.log(name, value);
}
// logs:
// href https://example.com
// xlink:href https://example.com
// show new
Spezifikationen
Specification |
---|
DOM Standard # ref-for-dom-element-getattributenames① |
Browser-Kompatibilität
BCD tables only load in the browser