Unterschied zwischen .tagName und .nodeName

Was ist der Unterschied zwischen $('this')[0].nodeNameund $('this')[0].tagName?

Die tagNameEigenschaft ist speziell für Elementknoten ( Knoten vom Typ 1) gedacht , um den Elementtyp abzurufen .

Es gibt auch verschiedene andere Knotentypen (Kommentar, Attribut, Text usw.). Um den Namen eines der verschiedenen Knotentypen abzurufen, können Sie die nodeNameEigenschaft verwenden .

Bei Verwendung nodeNamefür einen Elementknoten erhalten Sie dessen Tag-Namen, sodass beide wirklich verwendet werden können, obwohl Sie bei der Verwendung eine bessere Konsistenz zwischen den Browsern erzielen nodeName.

Dies ist eine ziemlich gute Erklärung für den Unterschied zwischen den beiden.

Text aus dem Artikel hinzugefügt:

tagNameund nodeNamesind beide nützliche Javascript-Eigenschaften zum Überprüfen des Namens eines HTML-Elements. In den meisten Fällen reicht beides aus, aber nodeName wird bevorzugt, wenn Sie nur Browser der Klasse A unterstützen, und tagName wird bevorzugt, wenn Sie auch IE5.5 unterstützen möchten.

Es gibt zwei Probleme mit tagName:

• In allen Versionen von IE wird tagName zurückgegeben, !wenn es auf einem Kommentarknoten aufgerufen wird
• Bei Textknoten wird tagName zurückgegeben, undefinedwährend nodeName zurückgegeben wird#text

nodeNamehat seine eigenen Probleme, aber sie sind weniger schwerwiegend:

• IE 5.5 kehrt zurück, !wenn es auf einem Kommentarknoten aufgerufen wird. Dies ist weniger schädlich als tagName, das in allen IE-Versionen unter diesem Verhalten leidet
• IE 5.5 unterstützt NodeName für das documentElement oder für Attribute nicht. Keines davon sollte für die meisten praktischen Zwecke von Belang sein, sollte aber auf jeden Fall berücksichtigt werden
• Konqueror ignoriert Kommentarknoten, wenn diese Eigenschaft verwendet wird. Andererseits ist Konqueror zusammen mit IE 5.5 kein Browser der Klasse A.

Halten Sie sich daher für die meisten praktischen Zwecke nodeNamean die Unterstützung einer breiteren Palette von Szenarien und die möglicherweise bessere Vorwärtskompatibilität. Ganz zu schweigen davon, dass es auf einem Kommentarknoten keinen Schluckauf gibt, der dazu neigt, sich unangekündigt in Code einzuschleichen. Machen Sie sich keine Sorgen um IE 5.5 oder Konqueror, da ihr Marktanteil nahe 0% liegt.

Weitere Informationen zu diesen Eigenschaften finden Sie in der DOM Core-Spezifikation.

nodeNameist eine Eigenschaft, die in der Knotenschnittstelle
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095 definiert ist

tagNameist eine Eigenschaft, die in der Elementschnittstelle
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815 definiert ist

Übrigens wird die Knotenschnittstelle von jedem Knoten im DOM-Baum (einschließlich des documentObjekts selbst) implementiert . Die Elementschnittstelle wird nur von den Knoten im DOM-Baum implementiert, die Elemente in einem HTML-Dokument darstellen (Knoten mit nodeType=== 1).

Und genau das passiert in Firefox 33 und Chrome 38:

HTML:

<div class="a">a</div>

Js:

node = e
node.nodeType === 1
node.nodeName === 'DIV'
node.tagName  === 'DIV'

node = e.getAttributeNode('class')
node.nodeType === 2
node.nodeName === 'class'
node.tagName  === undefined

node = e.childNodes[0]
node.nodeType === 3
node.nodeName === '#text'
node.tagName  === undefined

So:

• Nur verwenden nodeType, um den Knotentyp abzurufen: nodeNamePausen fürnodeType === 1
• nur verwenden tagNamefürnodeType === 1