Testen des Typs eines DOM-Elements in JavaScript


98

Gibt es eine Möglichkeit, den Typ eines Elements in JavaScript zu testen?

Für die Antwort ist möglicherweise die Prototypbibliothek erforderlich oder nicht. Das folgende Setup verwendet jedoch die Bibliothek.

function(event) {
  var element = event.element();
  // if the element is an anchor
  ...
  // if the element is a td
  ...
}

Antworten:


125

Sie können verwenden typeof(N), um den tatsächlichen Objekttyp abzurufen. Sie möchten jedoch das Tag und nicht den Typ des DOM-Elements überprüfen.

Verwenden Sie in diesem Fall die Eigenschaft elem.tagNameoder elem.nodeName.

Wenn Sie wirklich kreativ werden möchten, können Sie stattdessen ein Wörterbuch mit Tagnamen und anonymen Schließungen verwenden, wenn Sie wechseln oder wenn / sonst.


68
if (element.nodeName == "A") {
 ...
} else if (element.nodeName == "TD") {
 ...
}

1
Manchmal ist es. Wie auch immer, Sie könnten immer element.nodeName.match(/\bTBODY\b/i)oder element.nodeName.toLowerCase() == 'tbody'usw. verwenden
Robusto

9
@ Robusto ist falsch. Wenn das Dokument HTML ist und die DOM-Implementierung korrekt ist, wird es immer in Großbuchstaben geschrieben. Laut: w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815 im Abschnitt "tagName" (für Elemente nodeName == tagName) "Das HTML-DOM gibt den tagName eines HTML-Elements in zurück das kanonische Großbuchstabenformular, unabhängig vom Fall im Quell-HTML-Dokument. "
Bobwienholt

19

Vielleicht müssen Sie auch den Knotentyp überprüfen:

if(element.nodeType == 1){//element of type html-object/tag
  if(element.tagName=="a"){
    //this is an a-element
  }
  if(element.tagName=="div"){
    //this is a div-element
  }
}

Bearbeiten: Der nodeType-Wert wurde korrigiert


3
Hüten Sie sich vor dem Fall von tagName.
Augenlidlosigkeit

@Casey: Es wird in einer HTML-Seite; Auf einer XHTML-Seite bleibt der Fall des Tags erhalten (also ist "a" auf HTML-Seiten "A" und auf XHTML-Seiten "a"): w3.org/TR/2000/REC-DOM-Level-2- Core-20001113 /… (Vorausgesetzt, die XHTML-Seite wurde korrekt und nicht als text/html
TJ Crowder

2
@TJCrowder so sieht es aus wie die beste Option istelement.tagName.toLowerCase() === 'a'
p3drosola

@Ped: Ja, oder element.nodeName.toLowerCase()wenn es möglich ist, dass elementdies kein Element ist (z. B. wenn Sie die nodeType == 1oben aufgeführte Prüfung nicht durchgeführt haben ). Die NodeSchnittstelle hat nodeName. Zum ElementBeispiel ist es das gleiche wie tagName. Für andere Arten von Knoten sind es Dinge wie "#text"oder "#document". Ich glaube, ich würde den nodeTypeScheck immer benutzen .
TJ Crowder

Update 2019: Zumindest auf modernem Chromium (v79.0.3945.79) ist die Tagname-Zeichenfolge in Großbuchstaben. "Bei DOM-Bäumen, die HTML-Dokumente darstellen, liegt der zurückgegebene Tag-Name immer in kanonischer Großbuchstabenform vor. Beispielsweise gibt tagName, das für ein <div> -Element aufgerufen wird," DIV " https://developer.mozilla.org/en- zurück. US / docs / Web / API / Element / tagName richtige Art zu vergleichen wärenode.tagName == 'DIV'
marcs


2

Normalerweise erhalte ich es vom Rückgabewert toString (). Es funktioniert in DOM-Elementen mit unterschiedlichem Zugriff:

var a = document.querySelector('a');

var img = document.createElement('img');

document.body.innerHTML += '<div id="newthing"></div>';
var div = document.getElementById('newthing');

Object.prototype.toString.call(a);    // "[object HTMLAnchorElement]"
Object.prototype.toString.call(img);  // "[object HTMLImageElement]"
Object.prototype.toString.call(div);  // "[object HTMLDivElement]"

Dann das relevante Stück:

Object.prototype.toString.call(...).split(' ')[1].slice(0, -1);

Es funktioniert in Chrome, FF, Opera, Edge, IE9 + (im älteren IE wird "[Objekt Objekt]" zurückgegeben).


2

Obwohl die vorherigen Antworten perfekt funktionieren, möchte ich nur eine weitere Möglichkeit hinzufügen, bei der die Elemente auch über die von ihnen implementierte Schnittstelle klassifiziert werden können.

Informationen zu verfügbaren Schnittstellen finden Sie in W3 Org

console.log(document.querySelector("#anchorelem") instanceof HTMLAnchorElement);
console.log(document.querySelector("#divelem") instanceof HTMLDivElement);
console.log(document.querySelector("#buttonelem") instanceof HTMLButtonElement);
console.log(document.querySelector("#inputelem") instanceof HTMLInputElement);
<a id="anchorelem" href="">Anchor element</a>
<div id="divelem">Div Element</div>
<button id="buttonelem">Button Element</button>
<br><input id="inputelem">

Die Schnittstellenprüfung kann auf zwei Arten als elem instanceof HTMLAnchorElementoder elem.constructor.name == "HTMLAnchorElement"beide Rückgaben durchgeführt werdentrue


0

Ich habe eine andere Möglichkeit, dasselbe zu testen.

Element.prototype.typeof = "element";
var element = document.body; // any dom element
if (element && element.typeof == "element"){
   return true; 
   // this is a dom element
}
else{
  return false; 
  // this isn't a dom element
}

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.