HTMLAnchorElement.type — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAnchorElement.type

Beschreibung

Die Eigenschaft type der Schnittstelle HTMLAnchorElement spiegelt das Inhaltsattribut type eines <a>-Elements. Sie enthält einen Hinweis auf den MIME-Typ der Ressource, auf die der Link zeigt, z. B. "application/pdf" oder "text/html".

Der Wert ist rein informativ: Der Browser nutzt ihn nicht, um den Inhalt beim Laden zu verarbeiten. Maßgeblich bleibt der Content-Type-Header der Server-Antwort. Nützlich ist die Eigenschaft trotzdem, etwa um Links per CSS-Attributselektor (a[type="application/pdf"]) zu kennzeichnen, per Skript Download-Symbole zu ergänzen oder Links nach Dateityp zu filtern.

Ist das Attribut nicht gesetzt, liefert die Eigenschaft einen leeren String. Beim Schreiben wird das HTML-Attribut direkt aktualisiert. Eine Prüfung, ob der Wert ein gültiger MIME-Typ ist, findet dabei nicht statt.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Nur beim Setzen: der neue MIME-Typ, z. B. `"application/pdf"`. Wird unverändert in das Attribut `type` geschrieben.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs type oder ein leerer String "", wenn das Attribut fehlt.

Beispiele

MIME-Typ eines Links auslesen

// HTML: <a id="handbuch" href="/docs/handbuch.pdf" type="application/pdf">Handbuch</a>
const link = document.getElementById('handbuch');
console.log(link.type);
console.log(link.getAttribute('type'));

application/pdf application/pdf

Typ nachträglich setzen und fehlendes Attribut erkennen

const link = document.createElement('a');
link.href = '/export/daten.csv';
link.textContent = 'CSV herunterladen';

console.log(JSON.stringify(link.type)); // Attribut fehlt
link.type = 'text/csv';
console.log(link.outerHTML);
document.body.append(link);

"" <a href="/export/daten.csv" type="text/csv">CSV herunterladen</a>

PDF-Links automatisch kennzeichnen

const pdfLinks = [...document.querySelectorAll('a[href]')]
  .filter((a) => a.type === 'application/pdf');

pdfLinks.forEach((a) => {
  a.classList.add('ist-pdf');
  a.title = 'PDF-Dokument, öffnet in neuem Tab';
  a.target = '_blank';
  a.rel = 'noopener';
});

console.log(`${pdfLinks.length} PDF-Link(s) markiert`);

2 PDF-Link(s) markiert

Typ aus der Dateiendung ableiten

const mimeMap = { pdf: 'application/pdf', zip: 'application/zip', mp4: 'video/mp4' };

document.querySelectorAll('a[href]:not([type])').forEach((a) => {
  const endung = new URL(a.href).pathname.split('.').pop().toLowerCase();
  if (mimeMap[endung]) a.type = mimeMap[endung];
});

// Wichtig · Fallstricke

Nur ein Hinweis: Der Browser vertraut beim Laden dem Content-Type-Header des Servers, nicht dem Wert von type. Ein falscher Wert führt also nicht zu einer anderen Verarbeitung. Er kann Nutzer aber in die Irre führen.
Keine Prüfung: Beliebige Strings werden angenommen, ohne Fehlermeldung und ohne Normalisierung. Das gilt auch für die Groß-/Kleinschreibung: Vergleichen Sie am besten mit a.type.toLowerCase().
Keine Sicherheitsfunktion: Verlassen Sie sich nicht auf type, um gefährliche Downloads zu erkennen oder zu blockieren. Der Wert lässt sich im Markup beliebig setzen.
Nicht zu verwechseln mit HTMLInputElement.type oder HTMLButtonElement.type: Diese steuern tatsächlich das Verhalten des Elements.
Kompatibilität: Wird von allen modernen Browsern seit Langem unterstützt. HTMLAreaElement hat kein entsprechendes type.

Siehe auch

HTMLAnchorElement.text HTMLAnchorElement.hash HTMLAnchorElement.host HTMLAnchorElement.href HTMLAnchorElement.ping