ความแตกต่างระหว่าง. tagName และ. nodeName

อะไรคือความแตกต่างระหว่าง$('this')[0].nodeNameและ$('this')[0].tagName?

tagNameคุณสมบัติที่มีความหมายเฉพาะสำหรับโหนดองค์ประกอบ (พิมพ์ 1 โหนด) เพื่อให้ได้ชนิดขององค์ประกอบ

มีโหนดประเภทอื่น ๆเช่นกัน (ความคิดเห็นแอตทริบิวต์ข้อความ ฯลฯ ) จะได้รับชื่อใด ๆ ของประเภทโหนดต่างๆที่คุณสามารถใช้คุณสมบัติnodeName

เมื่อใช้nodeNameกับโหนดองค์ประกอบที่คุณจะได้รับชื่อแท็กของตนเพื่อให้ทั้งสามารถนำมาใช้จริงๆแม้ว่าคุณจะได้รับความสอดคล้องที่ดีระหว่างเบราว์เซอร์nodeNameเมื่อใช้

นี่เป็นคำอธิบายที่ดีเกี่ยวกับความแตกต่างระหว่างทั้งสอง

เพิ่มข้อความจากบทความ:

tagNameและnodeNameเป็นคุณสมบัติ Javascript ที่มีประโยชน์สำหรับการตรวจสอบชื่อขององค์ประกอบ html สำหรับวัตถุประสงค์ส่วนใหญ่อาจทำได้ดี แต่ควรใช้ nodeName หากคุณสนับสนุนเฉพาะเบราว์เซอร์เกรด A และต้องการให้ใช้ tagName หากคุณตั้งใจจะสนับสนุน IE5.5 ด้วย

มีสองประเด็นเกี่ยวกับtagName:

• ใน IE ทุกเวอร์ชัน tagName จะส่งกลับ!เมื่อเรียกบนโหนดข้อคิดเห็น
• สำหรับโหนดข้อความ tagName จะส่งกลับundefinedในขณะที่ nodeName ส่งกลับ#text

nodeNameมีชุดปัญหาของตัวเองแต่มีความรุนแรงน้อยกว่า:

• IE 5.5 จะส่งกลับ!เมื่อเรียกบนโหนดข้อคิดเห็น สิ่งนี้เป็นอันตรายน้อยกว่า tagName ซึ่งได้รับผลกระทบจากพฤติกรรมนี้ใน IE ทุกเวอร์ชัน
• IE 5.5 ไม่รองรับ nodeName สำหรับdocumentองค์ประกอบหรือแอตทริบิวต์ สิ่งเหล่านี้ไม่ควรเป็นข้อกังวลสำหรับวัตถุประสงค์ในทางปฏิบัติส่วนใหญ่ แต่ควรคำนึงถึงไม่ว่าในกรณีใด ๆ
• Konqueror ละเว้นโหนดข้อคิดเห็นเมื่อใช้คุณสมบัตินี้ แต่แล้วอีกครั้ง Konqueror พร้อมกับ IE 5.5 ไม่ใช่เบราว์เซอร์เกรด A

ดังนั้นเพื่อวัตถุประสงค์ในทางปฏิบัติส่วนใหญ่จะยึดติดกับnodeNameเนื่องจากการรองรับสถานการณ์ที่หลากหลายและอาจเข้ากันได้ดีขึ้นในอนาคต ไม่ต้องพูดถึงว่าจะไม่เกิดอาการสะอึกบนโหนดความคิดเห็นซึ่งมีแนวโน้มที่จะเล็ดลอดเข้าไปในโค้ดโดยไม่ได้แจ้งเตือน ไม่ต้องกังวลกับ IE 5.5 หรือ Konqueror เนื่องจากส่วนแบ่งการตลาดอยู่ใกล้ 0%

อ่านเกี่ยวกับคุณสมบัติเหล่านั้นในข้อมูลจำเพาะ DOM Core

nodeNameเป็นคุณสมบัติที่กำหนดในอินเทอร์เฟซ Node
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095

tagNameเป็นคุณสมบัติที่กำหนดไว้ในอินเทอร์เฟซองค์ประกอบ
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815

btw อินเทอร์เฟซโหนดถูกนำไปใช้โดยทุกโหนดในทรี DOM (รวมถึงdocumentอ็อบเจ็กต์เอง) อินเทอร์เฟซองค์ประกอบถูกใช้งานโดยโหนดเหล่านั้นในโครงสร้าง DOM ที่แสดงถึงองค์ประกอบในเอกสาร HTML เท่านั้น (โหนดที่มีnodeType=== 1)

และนี่คือสิ่งที่เกิดขึ้นใน Firefox 33 และ 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

ดังนั้น:

• ใช้nodeTypeเพื่อรับประเภทโหนดเท่านั้น: nodeNameแบ่งสำหรับnodeType === 1
• ใช้tagNameสำหรับnodeType === 1