Différence entre .tagName et .nodeName

Quelle est la différence entre $('this')[0].nodeNameet $('this')[0].tagName?

La tagNamepropriété est destinée spécifiquement aux nœuds d'élément ( nœuds de type 1) pour obtenir le type d' élément .

Il existe également plusieurs autres types de nœuds (commentaire, attribut, texte, etc.). Pour obtenir le nom de l'un des différents types de nœuds, vous pouvez utiliser la nodeNamepropriété .

Lors de l'utilisation nodeNamecontre un nœud d'élément , vous obtiendrez son nom de balise, donc l'un ou l'autre pourra vraiment être utilisé, même si vous obtiendrez une meilleure cohérence entre les navigateurs lors de l'utilisation nodeName.

C'est une assez bonne explication de la différence entre les deux.

Ajout du texte de l'article:

tagNameet nodeNamesont toutes deux des propriétés Javascript utiles pour vérifier le nom d'un élément html. Dans la plupart des cas, l'un ou l'autre fonctionnera bien, mais nodeName est préférable si vous ne supportez que les navigateurs de qualité A et tagName est préférable si vous avez l'intention de prendre en charge IE5.5 également.

Il y a deux problèmes avec tagName:

• Dans toutes les versions d'IE, tagName retourne !lorsqu'il est appelé sur un nœud de commentaire
• Pour les nœuds de texte, tagName renvoie undefinedtandis que nodeName renvoie#text

nodeNamea ses propres problèmes, mais ils sont moins graves:

• IE 5.5 retourne !lorsqu'il est appelé sur un nœud de commentaire. Ceci est moins dangereux que tagName qui souffre de ce comportement dans toutes les versions d'IE
• IE 5.5 ne prend pas en charge nodeName pour l' documentélément ou pour les attributs. Aucun de ces éléments ne devrait être une préoccupation pour la plupart des objectifs pratiques, mais doit être gardé à l'esprit dans tous les cas
• Konqueror ignore les nœuds de commentaire lors de l'utilisation de cette propriété. Mais là encore, Konqueror, avec IE 5.5 n'est pas un navigateur de qualité A

Donc, pour la plupart des raisons pratiques, tenez-vous-en en nodeNameraison de sa prise en charge d'un plus large éventail de scénarios et d'une compatibilité ascendante potentiellement meilleure. Sans oublier qu'il ne fait pas de hoquet sur un nœud de commentaire, qui a tendance à se glisser dans le code à l'improviste. Ne vous inquiétez pas pour IE 5.5 ou Konqueror car leur part de marché est proche de 0%.

Découvrez ces propriétés dans la spécification DOM Core.

nodeNameest une propriété définie dans l'interface Node
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095

tagNameest une propriété définie dans l'interface Element
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815

btw l'interface Node est implémentée par chaque nœud de l'arborescence DOM (y compris l' documentobjet lui-même). L'interface Element est implémentée uniquement par les nœuds de l'arborescence DOM qui représentent des éléments dans un document HTML (nœuds avec nodeType=== 1).

Et voici ce qui se passe sur Firefox 33 et 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

Alors:

• utiliser uniquement nodeTypepour obtenir le type de nœud: nodeNamepause pournodeType === 1
• utiliser uniquement tagNamepournodeType === 1