Perbedaan antara .tagName dan .nodeName

Apa perbedaan antara $('this')[0].nodeNamedan $('this')[0].tagName?

The tagNameproperti dimaksudkan khusus untuk node elemen (tipe 1 node) untuk mendapatkan jenis elemen .

Ada beberapa jenis node lain juga (komentar, atribut, teks, dll.). Untuk mendapatkan nama salah satu dari berbagai jenis node, Anda dapat menggunakan nodeNameproperti .

Bila menggunakan nodeNameterhadap elemen node , Anda akan mendapatkan nama tag, sehingga baik benar-benar bisa digunakan, meskipun Anda akan mendapatkan konsistensi yang lebih baik antara browser saat menggunakan nodeName.

Ini adalah penjelasan yang cukup bagus tentang perbedaan keduanya.

Menambahkan teks dari artikel:

tagNamedan nodeNamekeduanya merupakan properti Javascript yang berguna untuk memeriksa nama elemen html. Untuk sebagian besar tujuan, keduanya akan baik-baik saja tetapi nodeName lebih disukai jika Anda hanya mendukung browser kelas-A dan tagName lebih disukai jika Anda bermaksud untuk mendukung IE5.5 juga.

Ada dua masalah dengan tagName:

• Di semua versi IE, tagName kembali !saat dipanggil di node komentar
• Untuk node teks, tagName kembali undefinedsedangkan nodeName kembali#text

nodeNamememiliki serangkaian masalahnya sendiri tetapi tidak terlalu parah:

• IE 5.5 kembali !ketika dipanggil pada node komentar. Ini kurang berbahaya dibandingkan tagName yang mengalami perilaku ini di semua versi IE
• IE 5.5 tidak mendukung nodeName untuk documentelemen atau untuk atribut. Tak satu pun dari ini harus menjadi perhatian untuk sebagian besar tujuan praktis tetapi harus diingat dalam hal apapun
• Konqueror mengabaikan node komentar saat menggunakan properti ini. Tapi sekali lagi, Konqueror, bersama dengan IE 5.5 bukanlah browser kelas A.

Jadi untuk sebagian besar tujuan praktis tetap berpegang pada nodeNamedukungannya untuk skenario yang lebih luas dan kompatibilitas yang berpotensi lebih baik ke depan. Belum lagi itu tidak mengganggu node komentar, yang memiliki kecenderungan untuk menyusup ke dalam kode tanpa pemberitahuan. Jangan khawatir tentang IE 5.5 atau Konqueror karena pangsa pasar mereka mendekati 0%.

Baca tentang properti tersebut di spesifikasi DOM Core.

nodeNameadalah properti yang ditentukan dalam antarmuka Node
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095

tagName adalah properti yang ditentukan dalam antarmuka Elemen
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815

btw antarmuka Node diimplementasikan oleh setiap node di pohon DOM (termasuk documentobjek itu sendiri). Antarmuka Elemen diimplementasikan hanya oleh node di pohon DOM yang mewakili elemen dalam dokumen HTML (node ​​dengan nodeType=== 1).

Dan inilah yang terjadi di Firefox 33 dan 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

Begitu:

• hanya digunakan nodeTypeuntuk mendapatkan jenis node:nodeName istirahat untuknodeType === 1
• hanya digunakan tagNameuntuknodeType === 1