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

Ответ 1

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

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

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

Ответ 2

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

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

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

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

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

nodeName имеет свой собственный набор вопросов, но они менее суровы:

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

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

Ответ 3

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

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

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

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

Ответ 4

И вот что происходит на 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 для получения типа node: nodeName breaks для nodeType === 1
• используйте tagName для nodeType === 1