Diferencia entre .tagName y .nodeName

¿Cuál es la diferencia entre $('this')[0].nodeNamey $('this')[0].tagName?

La tagNamepropiedad está destinada específicamente a los nodos de elementos ( nodos de tipo 1) para obtener el tipo de elemento .

También hay varios otros tipos de nodos (comentario, atributo, texto, etc.). Para obtener el nombre de cualquiera de los diversos tipos de nodos, puede utilizar la nodeNamepropiedad .

Cuando se usa nodeNamecontra un nodo de elemento , obtendrá su nombre de etiqueta, por lo que cualquiera podría usarse, aunque obtendrá una mejor consistencia entre los navegadores cuando lo use nodeName.

Esta es una muy buena explicación de la diferencia entre los dos.

Texto agregado del artículo:

tagNamey nodeNameson propiedades útiles de Javascript para verificar el nombre de un elemento html. Para la mayoría de los propósitos, ambos funcionarán bien, pero se prefiere nodeName si solo admite navegadores de grado A y tagName si desea admitir también IE5.5.

Hay dos problemas con tagName:

• En todas las versiones de IE, tagName regresa !cuando se llama en un nodo de comentarios
• Para los nodos de texto, regresa tagName undefinedmientras que regresa nodeName#text

nodeNametiene su propio conjunto de problemas pero son menos severos:

• IE 5.5 regresa !cuando se llama en un nodo de comentario. Esto es menos dañino que tagName que sufre este comportamiento en todas las versiones de IE
• IE 5.5 no admite nodeName para el documentelemento o los atributos. Ninguno de estos debe ser una preocupación para la mayoría de los propósitos prácticos, pero debe tenerse en cuenta en cualquier caso
• Konqueror ignora los nodos de comentarios al usar esta propiedad. Pero, de nuevo, Konqueror, junto con IE 5.5 no es un navegador de grado A

Por lo tanto, para la mayoría de los propósitos prácticos, se adhieren a nodeNamesu compatibilidad con una gama más amplia de escenarios y una mejor compatibilidad hacia adelante. Sin mencionar que no tiene problemas en un nodo de comentarios, que tiene la tendencia de deslizarse en el código sin previo aviso. No se preocupe por IE 5.5 o Konqueror ya que su cuota de mercado está cerca del 0%.

Lea sobre esas propiedades en la especificación DOM Core.

nodeNamees una propiedad definida en la interfaz del Nodo
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095

tagNamees una propiedad definida en la interfaz de Element
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815

por cierto, la interfaz de nodo es implementada por cada nodo en el árbol DOM (incluido el documentobjeto mismo). La interfaz del elemento se implementa solo por aquellos nodos en el árbol DOM que representan elementos en un documento HTML (nodos con nodeType=== 1).

Y esto es lo que sucede en Firefox 33 y 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

Entonces:

• solo se usa nodeTypepara obtener el tipo de nodo: nodeNamesaltos paranodeType === 1
• solo usar tagNameparanodeType === 1