Diferença entre .tagName e .nodeName

Qual é a diferença entre $('this')[0].nodeNamee $('this')[0].tagName?

A tagNamepropriedade destina-se especificamente aos nós do elemento ( nós do tipo 1) para obter o tipo de elemento .

Existem vários outros tipos de nós também (comentário, atributo, texto etc.). Para obter o nome de qualquer um dos vários tipos de nós, você pode usar a nodeNamepropriedade .

Ao usar nodeNamecontra um nó de elemento , você obterá o nome da tag, para que qualquer um possa realmente ser usado, embora você obtenha melhor consistência entre os navegadores ao usá-lo nodeName.

Esta é uma boa explicação da diferença entre os dois.

Texto adicionado do artigo:

tagNamee nodeNamesão propriedades Javascript úteis para verificar o nome de um elemento html. Para a maioria dos propósitos, ambos farão bem, mas o nodeName é o preferido se você estiver suportando apenas navegadores de categoria A e o tagName é o preferido se você também deseja suportar o IE5.5.

Há dois problemas com tagName:

• Em todas as versões do IE, o tagName retorna !quando chamado em um nó de comentário
• Para nós de texto, tagName retorna, undefinedenquanto nodeName retorna#text

nodeNametem seu próprio conjunto de problemas, mas eles são menos graves:

• O IE 5.5 retorna !quando chamado em um nó de comentário. Isso é menos prejudicial que o tagName, que sofre com esse comportamento em todas as versões do IE
• O IE 5.5 não suporta nodeName para o documentelemento ou para atributos. Nenhuma dessas questões deve ser uma preocupação para fins mais práticos, mas deve ser lembrada em qualquer caso
• O Konqueror ignora os nós de comentários ao usar esta propriedade. Mas, novamente, o Konqueror, juntamente com o IE 5.5, não é um navegador de nível A

Portanto, para fins mais práticos, atenha-se nodeNameao suporte a uma variedade maior de cenários e à compatibilidade futura potencialmente melhor. Sem mencionar que ele não soluça em um nó de comentários, que tem uma tendência a se infiltrar no código sem aviso prévio. Não se preocupe com o IE 5.5 ou o Konqueror, pois sua participação de mercado é próxima de 0%.

Leia sobre essas propriedades na especificação DOM Core.

nodeNameé uma propriedade definida na interface do Nó
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095

tagNameé uma propriedade definida na interface do elemento
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815

Entre a interface do nó é implementada por todos os nós na árvore do DOM (incluindo o documentpróprio objeto). A interface Element é implementada apenas pelos nós na árvore DOM que representam elementos em um documento HTML (nós com nodeType=== 1).

E é isso que acontece no Firefox 33 e 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

Assim:

• use apenas nodeTypepara obter o tipo de nó: nodeNameinterrupções paranodeType === 1
• use somente tagNameparanodeType === 1