[HTML][JS] DOM คืออะไร ? เกี่ยวอะไรกับ HTML

mintmint
mintmint
Sep 2, 2018 · 3 min read

ทำความรู้จักกับเจ้า DOM ฉบับคนเพิ่งรู้แบบมิ้นมิ้น :)

บทความนี้ก็จะเป็นเหมือนบทความสรุปสิ่งที่เราเรียนรู้ เอามาแบ่งปันทุกคนนะคะ เผื่อจะเป็นประโยชน์สำหรับคนที่เพิ่งเริ่มศึกษาและยังไม่ค่อยเข้าใจแบบเรา หวังว่าจะชอบกันน้า 👋🏻

ก่อนจะทำความเข้าใจกับ DOM ทุกคนน่าจะรู้จัก Web browser กันเนอะ ง่าย ๆ มันก็คือตัวที่คอยแปลงชุดคำสั่งพวกภาษา HTML, JS หรือ CSS ให้เป็นหน้าเว็บที่ให้เราเห็นกันทุกวันนี้ หรืออาจจะเรียกอีกแบบว่า “หน้าบ้าน” นั่นเอง

แล้วมันเกี่ยวอะไร ยังไงกับ DOM


When a web page is loaded, the browser creates a Document Object Model of the page.

อ่ะ อ้างอิงคำมาจากเว็บ w3schools เขาว่ามาแบบนี้ค่ะ แปลไทยง่าย ๆ เลยก็คือ เมื่อหน้าเว็บนึงโหลดเสร็จเรียบร้อยแล้วเนี่ย เจ้า Browser มันจะสร้าง DOM ของหน้านั้นขึ้นมา ก็คือเจ้า Browser จะมอง HTML เป็นต้นไม้ (มองเป็นก้อน Object) หรือเรียกว่า DOM นั่นเอง จะให้เห็นภาพกว่านี้ลองเขียน HTML ตามนี้ดูนะคะ

จาก Code HTML ด้านบน จะแปลงเป็นโครงสร้าง DOM ได้ดังนี้ค่ะ

โครงสร้าง Object เป็นต้นไม้ มีกิ่งก้านสาขาแบบนี้ค่ะ

Tag ต่าง ๆ ในภาษา HTML ที่เรารู้จักกัน มันจะเรียนในโครงสร้างของ DOM ว่า Element ค่ะ ซึ่งเราจะใช้ DOM HTML ในการเข้าถึง Object ต่าง ๆ ในหน้าเว็บไซต์ค่ะ ก่อนที่มิ้นจะมาเขียนบทความนี้ มิ้นก็ได้โจทย์มาไว้ฝึกทำความเข้าใจเกี่ยวกับเจ้า DOM ด้วย ลองไปทำดูกันค่ะ ซึ่งจะเริ่มแบบ Basic แบบ เบสิ้คเบสิค นะคะ เผื่อคนที่ไม่เข้าใจจะเข้าใจได้มากขึ้นค่ะ


  1. ลองใช้ JavaScript เขียนเข้าไปใน DOM เพื่อไต่เข้าไปใน div
HTML
Tips : Pure JavaScript ต่างจากการเขียน jQuery โดยจะมีเครื่องหมาย = ค่ะ

ตามความเข้าใจของมิ้นนะคะ.. ไล่ Code ก็คือ เรามีเจ้า div ซึ่งเรียก div นั้นโดยใช้ชื่อ id ว่า myDiv นะคะ

แล้วเราก็เขียน JavaScript เพื่อให้ไปหา div นั้น โดยการตั้งตัวแปรชื่อว่า myDiv โดยให้ myDiv เท่ากับคำสั่ง document.getElementById ซึ่งคือการอ้างถึง Element: div โดยใช้ Attribute:id ซึ่งชื่อ id ก็คือ myDiv (ใครไม่เข้าใจไปดูรูปโครงสร้างต้นไม้ด้านบนอีกทีนึงน้า)

แล้วก็สั่งให้ console.log ตังแปร myDiv ออกมา เราก็จะสามารถเข้าถึงเจ้าก่อน div HTML ที่เราเขียนไว้ด้านบนไว้แล้วค่ะ


2. ข้อนี้จะ Custom หลาย ๆ อย่าง เพื่อให้ทุกคนเห็นภาพได้ง่ายขึ้นนะคะ

ข้อนี้เราจะสร้าง div ที่มีชื่อ class ชื่อว่า “test” ซ้ำกัน 5 ตัวค่ะ (ใน HTML ชื่อ id จะซ้ำกันไม่ได้ แต่ชื่อ class สามารถซ้ำกันได้ค่ะ)

html

ต่อมาเราจะเขียน pure js เพื่อเข้าไปที่ element:div โดยใช้ attribute:class ที่ชื่อว่า test ค่ะ

js

ผลลัพธ์ที่เราเข้าถึง DOM จะแสดงมาแบบนี้ค่ะ มี div ที่ชื่อว่า test อยู่ 5 ตัวจริง ๆ

ต่อมาให้เราลองลองเพิ่มคำสั่ง myDivList[1].innerHTML = ‘555’โดยการทำงานของคำสั่งนี้ก็คือ เข้าไปที่ element:div โดยใช้ attribute:class ที่ชื่อ class ว่า test ตำแหน่งที่ [1] .innerHTML ก็คือเพิ่ม text หรือเปลี่ยนค่า text เป็น 555 ค่ะ

ผลลัพธ์ที่ได้ในฝั่ง HTML ก็จะเปลี่ยนไปเป็นดังนี้ค่ะ

ต่อมาลองเพิ่มคำสั่ง document.getElementsByTagName(‘span’) ก็คือให้เข้าถึง element:span หรือ Tag span ค่ะ

แต่ว่าใน Code ของเราไม่ได้สร้าง Tag span ไว้ ก็เลยไม่สามารถเข้าถึงได้ค่ะ ผลลัพธ์ก็คือ [] = ค่าว่างนั่นเอง

แต่ถ้าเราลองไปเพิ่ม Tag span ใน Code HTML ของเรา ดังนี้

เราก็จะสามารถเข้าถึง element:span ได้ 2 อัน แบบนี้เลยค่า :)

สุดท้าย มิ้นลองเขียน for เพื่อให้มันเข้าไปเพิ่มค่าใน element:div ที่ใช้ attribute:class ที่ชื่อว่า ‘test’ ทั้ง 5 ตัวนะคะ Code จะเขียนดังนี้

ผลลัพธ์ที่ได้ก็คือ div ทั้ง 5 อันในฝั่ง HTML ก็จะมีค่าที่เริ่มตั้งแต่ 1 จนถึง 5 แบบนี้ค่ะ

https://jsfiddle.net/ เอาไว้เขียน js แบบผ่าน online ค่ะ ใช้เจ้านี่สะดวกดีค่ะ

Code ทำความเข้าใจเพิ่มเติ่ม :

👋🏻 เป็นไงคะ? มาถึงตรงนี้งงกันมั้ย? มิ้นก็หวังว่าทุกคนจะเข้าใจกับเจ้า DOM กันมากขึ้นนะคะ ซึ่งถ้าเราเข้าใจกับมันแล้วเนี่ย สามารถเอาเจ้านี่ไปใช้อะไรหลาย ๆ อย่างได้อีกมากมายค่ะ เช่นเอาไปเขียน logic เรียกใช้งานใน JavaScript หรือเราไปเข้าถึงเวลาเราจะเขียน CSS การเข้าถึง DOM ก็จำเป็นค่ะ มิ้นก็หวังว่าบทความนี้จะเป็นประโยชน์กับทุก ๆ คนนะคะ เดี๋ยวไว้วันหน้ามาใหม่น้า บัยย 👋🏻👋🏻

mintmint

Written by

mintmint

สมุดบันทึกของมิ้นมิ้น

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade