Różnica między .tagName i .nodeName

Jaka jest różnica między $('this')[0].nodeNamei $('this')[0].tagName?

tagNameNieruchomość jest przeznaczona specjalnie dla węzłów elementów (typ 1 węzły), aby uzyskać typ elementu .

Istnieje również kilka innych typów węzłów (komentarz, atrybut, tekst itp.). Aby uzyskać nazwę dowolnego z różnych typów węzłów, możesz użyć nodeNamewłaściwości .

Używając w nodeNameodniesieniu do węzła elementu , otrzymasz jego nazwę tagu, więc możesz naprawdę użyć obu, ale uzyskasz lepszą spójność między przeglądarkami podczas używania nodeName.

To całkiem dobre wyjaśnienie różnicy między nimi.

Dodany tekst z artykułu:

tagNamei nodeNameobie są użytecznymi właściwościami JavaScript do sprawdzania nazwy elementu html. W większości przypadków oba będą dobre, ale nodeName jest preferowane, jeśli obsługujesz tylko przeglądarki klasy A, a tagName jest preferowane, jeśli zamierzasz obsługiwać również IE5.5.

Istnieją dwa problemy z tagName:

• We wszystkich wersjach IE tagName zwraca !po wywołaniu w węźle komentarza
• W przypadku węzłów tekstowych zwraca tagName, a zwraca undefinednodeName#text

nodeNamema swój własny zestaw problemów, ale są one mniej poważne:

• IE 5.5 zwraca !po wywołaniu w węźle komentarza. Jest to mniej szkodliwe niż tagName, który cierpi z powodu tego zachowania we wszystkich wersjach IE
• IE 5.5 nie obsługuje nodeName dla documentelementu ani dla atrybutów. Żadne z nich nie powinno być powodem do niepokoju w większości praktycznych celów, ale w każdym przypadku należy o nich pamiętać
• Konqueror ignoruje węzły komentarzy podczas używania tej właściwości. Ale z drugiej strony, Konqueror, wraz z IE 5.5, nie jest przeglądarką klasy A.

Tak więc w większości praktycznych celów trzymaj się nodeNameze względu na obsługę szerszego zakresu scenariuszy i potencjalnie lepszą kompatybilność w przód. Nie wspominając o tym, że nie ma czkawki w węźle komentarza, który ma tendencję do wkradania się do kodu bez zapowiedzi. Nie martw się o IE 5.5 lub Konqueror, ponieważ ich udział w rynku jest bliski 0%.

Przeczytaj o tych właściwościach w specyfikacji DOM Core.

nodeNameto właściwość zdefiniowana w interfejsie węzła
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095

tagNameto właściwość zdefiniowana w interfejsie Element
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815

btw interfejs Node jest implementowany przez każdy węzeł w drzewie DOM (w tym documentsam obiekt). Interfejs Element jest implementowany tylko przez te węzły w drzewie DOM, które reprezentują elementy w dokumencie HTML (węzły z nodeType=== 1).

A oto co dzieje się w Firefoksie 33 i 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

Więc:

• używaj tylko nodeTypedo uzyskania typu węzła: nodeNameprzerwy dlanodeType === 1
• używać tylko tagNamedonodeType === 1