ทำความรู้จัก HTML DOM HTML คือ HyperText Markup Language เป็น...
Mindphp
ให้เรตสมาชิก: 2 / 5
ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

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 Tree ก็จะเป็นประมาณนี้และนอกจากนี้ DOM ยังสามาระแบ่งออกได้ 3 ประเภทก่อนจะไปพูดถึงประเภทของ DOM เรามาดูในรูป DOM Tree กันก่อนดีกว่า

  • จะเห็นว่า Root element <html> มันเป็นตัวเดียวที่อยู่บนสุดของ Tree และเป็น Root
  • ทุกๆ Node ยกเว้น Root จะต้องมี 1 Parent Node
  • นอกจากนี้จะเห็นได้ว่าจากรูป 1 Node จะมี Children หรือไม่มีก็ได้ อย่างเจ้าตัว <a>

แค่นี้ทุกคนก็คงเข้าใจโครงสร้างของมันกันนิดหน่อยแล้วใช่ไหมละ

ประเภทของ DOM

  1. Core DOM – การจัดรูปแบบ DOM Tree สำหรับทุกๆ เอกสาร
  2. XML DOM – การจัดรูปแบบ DOM Tree สำหรับเอกสาร XML
  3. 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สอบถามการใช้ javascript แปลงไฟล์เป็น base64
โดย fonfonn จ 08 ส.ค. 2022 9:25 am บอร์ด JavaScript & Jquery Ajax & Node.JS
0
6
จ 08 ส.ค. 2022 9:25 am โดย fonfonn
ทิปเล็กๆ ในการ Import Module เข้ามาใช้ยังไงไม่ให้ Error และใช้โมดูลทดแทน
โดย mindphp จ 08 ส.ค. 2022 12:41 am บอร์ด Python Knowledge
0
6
จ 08 ส.ค. 2022 12:41 am โดย mindphp
ไปทางไหนดี ทางที่คุ้ยเคยอาจไกล และใช้เวลาลองผิดลองถูกนานกว่า ไปตามป้ายบอกทาง
โดย mindphp จ 08 ส.ค. 2022 12:37 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
จ 08 ส.ค. 2022 12:37 am โดย mindphp
มี Hosting แนะนำไหมครับ ว่าจะลองเปลี่ยนเจ้า
โดย diirrunesigv พ 27 ก.ค. 2022 4:15 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
42
ส 06 ส.ค. 2022 8:10 pm โดย mindphp
ใช้ WordPress 6 ไม่คุ้นกับ Gutenberg เลยมีใครแนะนำตัวอื่นได้บ้าง
โดย lifesavingrx อ 14 มิ.ย. 2022 2:07 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
36
ส 06 ส.ค. 2022 8:08 pm โดย mindphp
สอบถามการใส่ การจัดการไฟล์ในส่วนของ เว็บเซอร์วิส ในภาษา python
โดย fonfonn ศ 05 ส.ค. 2022 10:25 pm บอร์ด Programming - C/C++ & java & Python
4
2114
ส 06 ส.ค. 2022 1:51 pm โดย fonfonn
ในไทยมี hosting wordpress joomla เจ้าให้พื้นที่แบบ unlimited ( ssd )
โดย Anonymous อ 02 ส.ค. 2022 4:28 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
155
ศ 05 ส.ค. 2022 7:19 pm โดย mindphp
สอบถามวิธีทำข้อความขึ้นมาแสดง
โดย Thanapoom1514 ศ 05 ส.ค. 2022 4:15 pm บอร์ด HTML CSS
3
127
ศ 05 ส.ค. 2022 6:38 pm โดย Thanapoom1514