Різниця між .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 повертається, !коли викликається у вузлі коментаря
• Для текстових вузлів, тегName повертається, 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- властивість, визначена в інтерфейсі Element
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815

btw Інтерфейс вузла реалізується кожним вузлом у 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