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

Question

Sự khác nhau giữa $('this')[0].nodeName và $('this')[0].tagName là gì?

Answer 1

This là giải thích khá tốt về sự khác biệt giữa hai loại.

---

Added văn bản từ bài viết:

tagName và nodeName đều tính Javascript hữu ích cho 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, hoặc là làm tốt nhưng nodeName được ưu tiên nếu bạn chỉ hỗ trợ A-grade trình duyệt và thẻName được ưu tiên nếu bạn định hỗ trợ IE5.5 là .

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

• Trong tất cả các phiên bản của trình duyệt IE, tagname trả ! khi kêu gọi một nút bình luận
• Đối với các nút văn bản, tagname trả undefined trong khi nodeName trả #text

nodeName có bộ riêng của mình là issues nhưng chúng ít nghiêm trọng hơn:

• IE 5.5 trả về ! khi được gọi trên nút nhận xét. Điều này ít độc hại hơn tagName bị hành vi này trên tất cả phiên bản của IE
• IE 5.5 không hỗ trợ nodeName cho phần tử document hoặc cho thuộc tính. Đây không phải là mối quan tâm đối với hầu hết các mục đích thực tế nhưng cần lưu ý trong bất kỳ trường hợp nào
• Konqueror bỏ qua các nút nhận xét khi sử dụng thuộc tính này. Nhưng sau đó một lần nữa, Konqueror, cùng với IE 5.5 không phải là một A-grade browser

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

Answer 2

Các tagName property có nghĩa là đặc biệt cho nút phần tử (loại 1 nút) để có được những loại yếu tố.

Có một số other types of nodes cũng như (nhận xét, thuộc tính, văn bản, v.v.). Để lấy tên của bất kỳ loại nút nào khác nhau, bạn có thể sử dụng nodeName property.

Khi sử dụng nodeName chống lại một nút yếu tố, bạn sẽ nhận được tên thẻ của nó, do đó, hoặc thực sự có thể được sử dụng, mặc dù bạn sẽ nhận được khi sử dụng better consistency between browsersnodeName.

Answer 3

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

nodeName là một tài sản được xác định trong giao diện Node
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095

tagName được một tài sản được xác định trong giao diện Yếu tố
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 tất cả các nút trong cây DOM (bao gồm cả chính đối tượng document). Giao diện Element chỉ được thực hiện bởi các nút trong cây DOM đại diện cho các phần tử trong một tài liệu HTML (các nút có nodeType === 1).

Answer 4

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ì vậy:

• chỉ sử dụng nodeType để nhận loại nút: nodeName phá vỡ cho nodeType === 1
• chỉ sử dụng tagName cho nodeType === 1