ความแตกต่างระหว่าง HTML Attributes และ DOM Properties

ความแตกต่างระหว่าง HTML Attributes และ DOM Properties

HTML attributes และ DOM properties เป็นคนละอย่างกันโดยพื้นฐาน แม้อาจมี attribute และ property ที่ใช้ชื่อเดียวกันได้ แต่สามารถตั้งค่าให้มีค่าต่างกันได้

• ความแตกต่างหลักระหว่าง attributes และ properties

  • การซีเรียลไลซ์เป็น HTML: attribute จะถูกซีเรียลไลซ์เป็น HTML แต่ property จะไม่ถูกซีเรียลไลซ์
  • ประเภทของค่า: ค่า attribute เป็นสตริงเสมอ แต่ property เป็นได้ทุกประเภท
  • การแยกตัวพิมพ์เล็ก-ใหญ่: ชื่อ attribute ไม่แยกตัวพิมพ์เล็ก-ใหญ่ แต่ชื่อ property แยกตัวพิมพ์เล็ก-ใหญ่ อย่างไรก็ตาม ค่า attribute จะแยกตัวพิมพ์เล็ก-ใหญ่

• การสะท้อน (Reflection)

  • เพื่อความสะดวก สเปกส่วนใหญ่จะสร้าง property ที่เทียบเท่ากันสำหรับทุก attribute ที่กำหนดไว้
  • เมื่อ property สะท้อน attribute, attribute จะเป็นแหล่งข้อมูลต้นทาง การตั้งค่า attribute จะทำให้ property อัปเดต และการอ่านจาก property ก็คือการอ่านจาก attribute
  • แต่ตัวสะท้อนบางแบบซับซ้อนกว่านั้น บางครั้งชื่อ property กับชื่อ attribute ที่สะท้อนก็อาจต่างกัน

• การตรวจสอบความถูกต้อง, การบังคับแปลงชนิด และค่าเริ่มต้น

  • property มีการตรวจสอบความถูกต้องและมีค่าเริ่มต้น แต่ attribute ไม่มี
  • property บางตัวจะมีการบังคับแปลงชนิด

• value ของฟิลด์ input

  • มีทั้ง attribute value และ property value แต่ property value ไม่ได้สะท้อน attribute value ตรงกันข้าม property defaultValue ต่างหากที่สะท้อน attribute value
  • property value ไม่ได้สะท้อน attribute ใดเลย เรื่องนี้ไม่ใช่กรณีที่พบได้น้อย เพราะมี properties จำนวนมาก เช่น offsetWidth, parentNode เป็นต้น
  • ในตอนแรก property value จะตาม property defaultValue จากนั้นเมื่อ property value ถูกตั้งค่าผ่าน JavaScript หรือผ่านการโต้ตอบของผู้ใช้ ก็จะเปลี่ยนไปใช้ค่าภายใน

• attributes ควรมีไว้เพื่อการกำหนดค่า

  • attributes ควรมีไว้เพื่อการกำหนดค่า ส่วน properties ควรสามารถเก็บสถานะได้
  • ต้นไม้ light-DOM ควรมีเจ้าของเพียงรายเดียว
  • องค์ประกอบ <details> และ <dialog> แสดงสถานะ open ผ่าน attribute open และเบราว์เซอร์จะเพิ่ม/ลบ attribute นี้เองตามการโต้ตอบของผู้ใช้ ซึ่งมองว่าเป็นความผิดพลาดเชิงออกแบบ

• วิธีที่เฟรมเวิร์กรับมือกับความแตกต่างนี้

  • Preact และ VueJS จะตั้งค่า prop เป็น property ถ้า propName in element เป็นจริง มิฉะนั้นจะตั้งเป็น attribute กล่าวคือให้ความสำคัญกับ property มากกว่า attribute
  • React ทำตรงกันข้าม โดยจะตั้งเป็น attribute ยกเว้นกรณีที่กำหนดไว้ล่วงหน้าว่าควรใช้ property
  • lit-html ยังคงแยก attribute และ property ออกจากกัน และถ้าต้องการตั้งเป็น property แทน attribute ต้องใส่ . นำหน้าชื่อ

ความเห็นของ GN⁺

• การรู้ความแตกต่างระหว่าง HTML attributes และ DOM properties เป็นเรื่องสำคัญเมื่อทำงานกับ DOM ในระดับล่าง ในกรณีส่วนใหญ่ความต่างอาจไม่มากนัก แต่เมื่อใช้เฟรมเวิร์กควรระวัง

• ดูเหมือนว่าการแยกให้ attribute หมายถึงการตั้งค่า (configuration) และ property หมายถึงสถานะ (state) เป็นแนวทางที่เหมาะสม ปัจจุบัน HTML elements บางตัวไม่ได้ยึดหลักนี้ จึงน่าเสียดาย

• โดยเฉพาะเมื่อใช้ custom elements กับ React ต้องระวัง React จะตั้งค่าของ custom elements เป็น attributes แทนที่จะเป็น properties ดังนั้นสิ่งที่รองรับเฉพาะ property อาจทำงานไม่ได้ ซึ่งคาดว่าจะได้รับการปรับปรุงใน React 19

• การเปรียบเทียบว่าเฟรมเวิร์กหลักอย่าง Preact, Vue, React, lit-html จัดการกับ attributes และ properties อย่างไร ก็เป็นเรื่องน่าสนใจ เพราะสะท้อนปรัชญาและการตัดสินใจด้านการออกแบบของแต่ละเฟรมเวิร์ก

• มาตรฐานเว็บและการใช้งานจริงของเบราว์เซอร์ไม่ได้เป็นมิตรกับนักพัฒนาเสมอไป กรณีของ attribute และ property value ใน <input> เป็นตัวอย่างชัดเจน แม้จะเปลี่ยนได้ยากเพราะความเข้ากันได้ย้อนหลัง แต่ก็หวังว่าในอนาคตจะมีการออกแบบที่สอดคล้องกันมากขึ้น

[superwoou]

https://emewjin.github.io/html-attribute-dom-property/

[superwoou]

แปล attribute และ property เป็น "คุณสมบัติ" เหมือนกันไปเลยสินะ..