.TagName ve .nodeName arasındaki fark

Arasındaki fark nedir $('this')[0].nodeNameve $('this')[0].tagName?

tagNameÖzelliği için özel olarak ifade edilmektedir öğe düğümleri tipini elde etmek için (1 düğümleri tip) elemanı .

Başka birkaç düğüm türü de vardır (yorum, nitelik, metin vb.). Çeşitli düğüm türlerinden herhangi birinin adını almak için nodeNameözelliği kullanabilirsiniz .

Bir eleman düğümünenodeName karşı kullanırken , etiket adını alırsınız, bu nedenle her ikisi de gerçekten kullanılabilir, ancak kullanırken tarayıcılar arasında daha iyi tutarlılık elde edersiniz .nodeName

Bu ikisi arasındaki farkın oldukça iyi bir açıklaması.

Makaleden metin eklendi:

tagNameve nodeNameher ikisi de bir html öğesinin adını kontrol etmek için kullanışlı Javascript özellikleridir. Çoğu amaç için, ya iyi olur, ancak yalnızca A sınıfı tarayıcıları destekliyorsanız nodeName tercih edilir ve IE5.5'i de desteklemeyi düşünüyorsanız tagName tercih edilir.

İki sorun var tagName:

• IE'nin tüm sürümlerinde !, bir açıklama düğümünde çağrıldığında tagName döner
• Metin düğümleri için tagName dönerken undefinednodeName döner#text

nodeNamekendi sorunları vardır, ancak daha az şiddetlidir:

• IE 5.5 !bir açıklama düğümünde çağrıldığında geri döner . Bu, IE'nin tüm sürümlerinde bu davranıştan muzdarip tagName'den daha az zararlıdır
• IE 5.5, documentöğe veya öznitelikler için düğüm adı desteklemiyor . Bunların hiçbiri en pratik amaçlar için bir endişe olmamalı, ancak her durumda akılda tutulmamalıdır.
• Konqueror bu özelliği kullanırken yorum düğümlerini yok sayar. Ama sonra tekrar, Konqueror, IE 5.5 ile birlikte A sınıfı bir tarayıcı değil

Bu nedenle, en pratik amaçlar nodeNameiçin, daha geniş bir senaryo yelpazesi ve potansiyel olarak daha iyi ileri uyumluluk desteği nedeniyle bağlı kalın. Açıklanamayan koda girme eğilimi olan bir açıklama düğümü üzerinde sıkıntı çekmediğinden bahsetmiyorum bile. Pazar payı% 0'a yakın olduğu için IE 5.5 veya Konqueror hakkında endişelenmeyin.

DOM Core spesifikasyonundaki bu özellikler hakkında bilgi edinin.

nodeNameDüğüm arayüzünde tanımlanan bir özelliktir
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095

tagNameÖğe arayüzünde tanımlanan bir özelliktir
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815

btw Düğüm arabirimi, DOM ağacındaki her düğüm ( documentnesnenin kendisi dahil ) tarafından uygulanır. Öğe arayüzü yalnızca DOM ağacındaki bir HTML belgesindeki öğeleri temsil eden düğümler tarafından uygulanır ( nodeType=== 1 olan düğümler ).

Ve bu Firefox 33 ve Chrome 38'de olan şey:

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

Yani:

• Sadece kullanmak nodeTypedüğüm türünü almak için: nodeNameiçin aralarınodeType === 1
• tek kullanım tagNameiçinnodeType === 1