HTML คือ HyperText Markup Language เป็น ภาษาคอมพิวเตอร์ที่ใช้สร้างหน้าเว็บในรูปแบบของ ไฟล์ Html (คือไฟล์ที่มีนามสกุลเป็น .htm หรือ .html) ซึ่งมีเว็บเบราว์เซอร์ เป็นโปรแกรมที่ใช้แปลงไฟล์ HTML เพื่อ แสดงผลในรูปของหน้าเว็บ แล้ว HTML DOM ละ DOM ย่อมาจาก Document Object Model ถ้าให้อธิบายง่ายๆก็คือมันเป็นตัวจัดการเอกสารของ HTML โดยจะเป็นในรูปแบบ DOM Tree และใช้เพื่อ JavaScript ควบคุมการทำงานของ DOM
อย่างที่บอกไปข้างต้นว่า HTML เป็นภาษาคอมพิวเตอร์ที่ใช้สำหรับการเขียนเว็บไซต์ ส่วน HTML DOM คือตัวจัดการเอกสารของ HTML ที่อยู่ในรูปแบบของ DOM Tree เจ้าตัว DOM Tree เนียคือตัวที่คอยแปลงชุดคำสั่งพวกภาษา HTML, JS หรือ CSS ให้เป็นหน้าเว็บที่เราใช้งานในปัจจุบันโดยเจ้าตัว Browser จะมองภาษา HTML เป็น Object หรือก็คือที่เราเรียกว่า DOM แล้วเจ้า ตัว DOM หรือ Object มันมองเห็น HTML เป็นแบบไหนกันละ
หน้าตาของเจ้า DOM Tree ก็จะเป็นประมาณนี้และนอกจากนี้ DOM ยังสามาระแบ่งออกได้ 3 ประเภทก่อนจะไปพูดถึงประเภทของ DOM เรามาดูในรูป DOM Tree กันก่อนดีกว่า
- จะเห็นว่า Root element <html> มันเป็นตัวเดียวที่อยู่บนสุดของ Tree และเป็น Root
- ทุกๆ Node ยกเว้น Root จะต้องมี 1 Parent Node
- นอกจากนี้จะเห็นได้ว่าจากรูป 1 Node จะมี Children หรือไม่มีก็ได้ อย่างเจ้าตัว <a>
แค่นี้ทุกคนก็คงเข้าใจโครงสร้างของมันกันนิดหน่อยแล้วใช่ไหมละ
ประเภทของ DOM
- Core DOM – การจัดรูปแบบ DOM Tree สำหรับทุกๆ เอกสาร
- XML DOM – การจัดรูปแบบ DOM Tree สำหรับเอกสาร XML
- HTML DOM – การจัดรูปแบบ DOM Tree สำหรับเอกสาร HTML
การจัดการ Object ภายใน DOM
ตามมาตรฐานของ W3C อนุญาตให้เราสามารถเขียนสคริปต์เพื่อจัดการ Object ต่าง ๆ ที่อยู่ภายใน DOM ได้ ไม่ว่าจะเป็นการเพิ่มเติม การปรับเปลี่ยนแก้ไข หรือแม้แต่การลบ Element ก็สามารถทำได้แบบ Dynamic ซึ่งผลจากการแก้ไขก็จะแสดงให้เห็นบนเบราว์เซอร์ทันที
โดยเจ้าโครงสร้างของ HTML DOM ถ้าหากพูดว่า โครงสร้างของ DOM บางคนอาจจะไม่รู้จักงั้นถ้าให้พูดว่า Element ทุกคนก็คงจะเอ่ออันนี้นี้เอง หลายๆคนคงทราบกันแล้วว่าหากเราจะเข้่าถึง Element หรือเจ้า HTML DOM ในภาษา JS เราก็จะใช้ในส่วนของตัว
document.getElementById(“element”);พอจะรู้กันแล้วใช่ไหมว่า HTML DOM มันคือไรนอกจากรู้ DOM ยังมีผลให้เกิดการแพร่พันธ์ุอีกด้วย ถ้าหลายๆคนส่งสัยว่าการแพร่พันธุ์มันคืออะไรเรื่องนี้ผมเคยเขียนในส่วนของบทความ การหยุดการกายพันธุ์ ไปแล้วสามารถเข้าไปหาอ่านกันได้นะคับ
ยกตัวอย่างบางส่วนของ methods
- getElementById('id') – เกทอิลิเมนต์ด้วย id ที่เรากำหนด, และ id ต้องมีหนึ่งเดียวในเอกสาร HTML
- getElementsByTagName('name') – เกทอิลิเมนต์ด้วยชื่อ Tag ตามที่เรากำหนด ผลลัพธ์ที่ได้จะเป็น array ของ object เวลาเราจะอ้างอิงแต่ละ object
- appendChild('node') – แทรก child node
- removeChild('node') – remove child node
จากเท่าที่ใช้มาส่วนมากเราก็จะเห็นกันบ่อยที่่สุดก็น่าจะเป็น getElementById เดี๋ยวเราไปลองดูกันดีกว่าว่าเราสามารถ getElementById ได้ยังไง
เรามาลองเขียน Javascript เพื่อเข้าถึง Element หรือ DOM กันดีกว่า โดยเราต้องทำการสร้าง div ขึ้นมาก่อน
<div id="Div1">Div<div>โดยเราสามารถเขียน Javascript เข้าไปทำงานของ Div ได้แบบนี้
let Div1 = document.getElementById('Div1');จากที่ผมผมทำการสร้าง div และตั้ง id ว่า div1 โดยการเรียกใช้เนียก็คือ ให้ Div1 เท่ากับ document.getElemntById มันก็คือการอ้างอิงจาก Element div โดยใช้ Attribute ID ที่มีชื่อว่า Div1
สรุป HTML DOM คือตัวจัดการเอกสารของ HTML ที่อยู่ในรูปแบบของ DOM Tree เจ้าตัว DOM Tree เนียคือตัวที่คอยแปลงชุดคำสั่งพวกภาษา HTML, JS หรือ CSS ให้เป็นหน้าเว็บที่เราใช้งานในปัจจุบันโดยเจ้าตัว Browser จะมองภาษา HTML เป็น Object หรือก็คือที่เราเรียกว่า DOM แล้วเจ้า ตัว DOM หรือ Object โดยเจ้าโครงสร้างของ HTML DOM ถูกเรียนกว่า Element โดยเราสามารถเขียน Javascript เพื่อควบคุมการทำงานต่างๆของ Element ได้อีกด้วย นอกจากนี้เจ้าตัว DOM Tree ยังทำให้เกิดปัญหาการแพร่พันธ์ุ หากใครสงสัยการแพร่พันธ์ุคือไรสามารถเข้าไปดูได้ที่นี้ การหยุดการแพร่พันธุ์ event.propagation หรือหากสนใจการเขียน JavaScript Functionsก็สามารถเข้าไปดูได้ที่นี้เลย
อ้างอิง
ทำความรู้จัก HTML DOM ,[ออนไลน์], เข้าถึงได้จาก http://computer2know.blogspot.com/2018/01/html-dom.html
ทำความรู้จักกับ DOM เรื่องที่นักพัฒนาเว็บควรรู้ ,[ออนไลน์], เข้าถึงได้จาก https://ai-no-tsubasa.blogspot.com/2019/03/back-to-basic-dom.html
HTML DOM ,[ออนไลน์], เข้าถึงได้จาก https://www.w3schools.com/js/js_htmldom.asp
