Разница между .tagName и .nodeName

В чем разница между $('this')[0].nodeNameи $('this')[0].tagName?

tagNameСвойство предназначено специально для узлов элементов (типа 1 узлов) , чтобы получить тип элемента .

Есть также несколько других типов узлов (комментарий, атрибут, текст и т. Д.). Чтобы получить имя любого из различных типов узлов, вы можете использовать nodeNameсвойство .

При использовании в nodeNameотношении узла элемента вы получите его имя тега, так что любой из них действительно может быть использован, хотя вы получите лучшую согласованность между браузерами при использовании nodeName.

Это довольно хорошее объяснение разницы между ними.

Добавлен текст из статьи:

tagNameи nodeNameоба полезных свойства Javascript для проверки имени html-элемента. В большинстве случаев все будет хорошо, но nodeName предпочтительнее, если вы поддерживаете только браузеры класса A, а tagName предпочтительнее, если вы намерены также поддерживать IE5.5.

Есть две проблемы с tagName:

• Во всех версиях IE tagName возвращается !при вызове на узле комментария
• Для текстовых узлов tagName возвращает, undefinedтогда как nodeName возвращает#text

nodeNameимеет свои проблемы, но они менее серьезны:

• IE 5.5 возвращается !при вызове на узле комментария. Это менее вредно, чем tagName, который страдает от такого поведения во всех версиях IE
• IE 5.5 не поддерживает nodeName для documentэлемента или атрибутов. Ни один из них не должен вызывать беспокойства в большинстве практических целей, но следует помнить в любом случае
• Konqueror игнорирует узлы комментариев при использовании этого свойства. Но опять же, Konqueror вместе с IE 5.5 не является браузером класса A

Так что для большинства практических целей придерживайтесь nodeNameиз-за его поддержки более широкого диапазона сценариев и потенциально лучшей прямой совместимости. Не говоря уже о том, что он не работает с узлом комментария, который имеет тенденцию заползать в код без объявления. Не беспокойтесь о IE 5.5 или Konqueror, поскольку их рыночная доля составляет около 0%.

Читайте об этих свойствах в спецификации DOM Core.

nodeNameэто свойство, определенное в интерфейсе узла
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095

tagNameэто свойство, определенное в интерфейсе элемента
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815

Кстати, интерфейс Node реализуется каждым узлом дерева DOM (включая сам documentобъект). Интерфейс Element реализуется только теми узлами в дереве DOM, которые представляют элементы в документе HTML (узлы с nodeType=== 1).

И вот что происходит в Firefox 33 и 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

Так:

• использовать только nodeTypeдля получения типа узла: nodeNameразрывы дляnodeType === 1
• использовать только tagNameдляnodeType === 1