Sự khác biệt giữa .tagName và .nodeName

Sự khác biệt giữa $('this')[0].nodeNamevà là $('this')[0].tagNamegì?

Các tagNametài sản có nghĩa là đặc biệt cho nút phần tử (gõ 1 nút) để có được những loại nguyên tố .

Có một số loại nút khác (bình luận, thuộc tính, văn bản, v.v.). Để có được tên của bất kỳ loại nút nào, bạn có thể sử dụng thuộc nodeNametính .

Khi sử dụng nodeNameđối với một nút phần tử , bạn sẽ nhận được tên thẻ của nó, do đó, thực sự có thể được sử dụng, mặc dù bạn sẽ có được sự thống nhất tốt hơn giữa các trình duyệt khi sử dụng nodeName.

Đây là một lời giải thích khá tốt về sự khác biệt giữa hai.

Đã thêm văn bản từ bài viết:

tagNamevà nodeNamecả hai thuộc tính Javascript hữu ích để kiểm tra tên của một phần tử html. Đối với hầu hết các mục đích, chúng sẽ hoạt động tốt nhưng nodeName được ưu tiên nếu bạn chỉ hỗ trợ các trình duyệt cấp A và tagName được ưu tiên nếu bạn có ý định hỗ trợ IE5.5.

Có hai vấn đề với tagName:

• Trong tất cả các phiên bản IE, tagName trả về !khi được gọi trên nút nhận xét
• Đối với các nút văn bản, tagName trả về undefinedtrong khi nútName trả về#text

nodeNamecó một loạt vấn đề riêng nhưng chúng ít nghiêm trọng hơn:

• IE 5.5 trả về !khi được gọi trên một nút bình luận. Điều này ít gây hại hơn tagName chịu hành vi này trên tất cả các phiên bản IE
• IE 5.5 không hỗ trợ nodeName cho documentphần tử hoặc cho các thuộc tính. Cả hai điều này không phải là mối quan tâm cho hầu hết các mục đích thực tế nhưng nên được ghi nhớ trong mọi trường hợp
• Konqueror bỏ qua các nút bình luận khi sử dụng thuộc tính này. Nhưng một lần nữa, Konqueror, cùng với IE 5.5 không phải là trình duyệt cấp A

Vì vậy, đối với hầu hết các mục đích thực tế, nodeNamenhờ vào sự hỗ trợ của nó cho một phạm vi rộng hơn và khả năng tương thích tốt hơn về phía trước. Chưa kể rằng nó không bị trục trặc trên một nút bình luận, mà có xu hướng leo vào mã không được báo trước. Đừng lo lắng về IE 5.5 hoặc Konqueror vì thị phần của họ gần 0%.

Đọc về các thuộc tính đó trong thông số DOM Core.

nodeNamelà một thuộc tính được xác định trong giao diện Nút
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095

tagName là một thuộc tính được xác định trong giao diện Element
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815

btw giao diện Node được thực hiện bởi mọi nút trong cây DOM (bao gồm cả documentchính đối tượng). Giao diện phần tử chỉ được triển khai bởi các nút trong cây DOM đại diện cho các phần tử trong tài liệu HTML (các nút có nodeType=== 1).

Và đây là những gì xảy ra trên Firefox 33 và 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

Vì thế:

• chỉ sử dụng nodeTypeđể có được loại nút: nodeNamebreak fornodeType === 1
• chỉ sử dụng tagNamechonodeType === 1