Differenza tra .tagName e .nodeName

Question

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

Answer 1

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

---

Aggiunto il testo dall'articolo:

tagName e nodeName sono entrambi utili proprietà JavaScript per controllo il nome di un elemento HTML. Per la maggior parte degli scopi, lo sarà , ma nodeName è preferibile se si supportano solo i browser di livello A e tagName è preferibile se si intende supportare IE5.5 come .

Ci sono due problemi con tagName:

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

nodeName ha il proprio set di issues ma sono meno severi:

• IE 5.5 restituisce ! quando viene chiamato su un nodo di commento. Questo è meno dannoso di tagName che soffre di questo comportamento di tutti tutte versioni di IE
• IE 5.5 non supporta Nomenodo per l'elemento document o per gli attributi. Nessuno di questi dovrebbe essere un problema per la maggior parte degli aspetti pratici , ma deve essere tenuto presente in ogni caso
• Konqueror ignora i nodi di commento quando si usa questa proprietà. Ma poi di nuovo, Konqueror, insieme a IE 5.5 non è un A-grade browser

Così, per scopi più pratici attaccano a nodeName grazie al suo sostegno per una vasta gamma di scenari e potenzialmente migliore di avanzare compatibilità. Per non parlare del fatto che non si tratta di un nodo di commento , che ha la tendenza a insinuarsi nel codice senza preavviso. Non preoccuparti di su IE 5.5 o Konqueror dato che la loro quota di mercato è vicina allo 0%.

Answer 2

Il tagName property è significato specificamente per nodi elemento (tipo 1 nodi) per ottenere il tipo di elemento .

Ci sono diversi other types of nodes (commento, attributo, testo, ecc.). Per ottenere il nome di uno dei vari tipi di nodi, è possibile utilizzare nodeName property.

Quando si utilizza nodeName contro un nodo elemento, si otterrà il nome tag, quindi o potrebbe davvero essere utilizzato, anche se si otterrà better consistency between browsers quando si utilizza nodeName.

Answer 3

Leggi queste proprietà nelle specifiche del DOM Core.

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

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

btw l'interfaccia Node è implementata da ogni nodo dell'albero DOM (incluso lo stesso oggetto document). L'interfaccia Element è implementata solo da quei nodi nell'albero DOM che rappresentano elementi in un documento HTML (nodi con nodeType === 1).

Answer 4

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 

Quindi:

• utilizzare solo nodeType a ottenere il tipo di nodo: nodeName rompe per nodeType === 1
• utilizzare solo tagName per nodeType === 1