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

Question

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

Answer 1

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

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

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

Answer 2

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

---

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

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

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

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

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

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

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

Answer 3

Прочтите об этих свойствах в спецификации 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

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

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