Differenza tra .tagName e .nodeName

Qual è la differenza tra $('this')[0].nodeNamee $('this')[0].tagName?

La tagNameproprietà è specifica per i nodi di elementi ( nodi di tipo 1) per ottenere il tipo di elemento .

Esistono anche altri tipi di nodi (commento, attributo, testo, ecc.). Per ottenere il nome di uno dei vari tipi di nodi, è possibile utilizzare la nodeNameproprietà .

Quando si utilizza nodeNamecontro un nodo elemento , si otterrà il nome del tag, quindi potrebbe davvero essere utilizzato, anche se si otterrà una migliore coerenza tra i browser durante l'utilizzo nodeName.

Questa è una spiegazione abbastanza buona della differenza tra i due.

Aggiunto testo dall'articolo:

tagNamee nodeNamesono entrambe utili proprietà Javascript per controllare il nome di un elemento html. Per la maggior parte, entrambi andranno bene, ma nodeName è preferito se si supportano solo i browser di livello A e tagName è preferito se si intende supportare anche IE5.5.

Esistono due problemi con tagName:

• In tutte le versioni di IE, tagName restituisce !quando viene chiamato su un nodo di commento
• Per i nodi di testo, restituisce tagName undefinedmentre restituisce nodeName#text

nodeNameha una propria serie di problemi ma sono meno gravi:

• IE 5.5 ritorna !quando viene chiamato su un nodo di commento. Questo è meno dannoso di tagName che soffre di questo comportamento in tutte le versioni di IE
• Internet Explorer 5.5 non supporta nodeName per l' documentelemento o per gli attributi. Nessuno di questi dovrebbe essere un problema per la maggior parte degli scopi pratici, ma dovrebbe essere tenuto presente in ogni caso
• Konqueror ignora i nodi di commento quando si utilizza questa proprietà. Ma poi di nuovo, Konqueror, insieme a IE 5.5 non è un browser di livello A.

Quindi, per la maggior parte degli scopi pratici, attenersi al nodeNamesuo supporto per una più ampia gamma di scenari e una migliore compatibilità futura. Per non parlare del fatto che non si rompe in un nodo di commento, che ha la tendenza a insinuarsi nel codice senza preavviso. Non preoccuparti di IE 5.5 o Konqueror in quanto la loro quota di mercato è vicina allo 0%.

Leggi queste proprietà nelle specifiche DOM Core.

nodeNameè una proprietà definita nell'interfaccia del nodo
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095

tagNameè una proprietà definita nell'interfaccia Element
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815

tra l'altro l'interfaccia del nodo è implementata da ogni nodo nella struttura del DOM (incluso l' documentoggetto stesso). L'interfaccia Element è implementata solo da quei nodi nella struttura DOM che rappresentano elementi in un documento HTML (nodi con nodeType=== 1).

E questo è ciò che accade su Firefox 33 e 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

Così:

• usare solo nodeTypeper ottenere il tipo di nodo: nodeNamepause pernodeType === 1
• usare solo tagNamepernodeType === 1