คืนค่าการตั้งค่าทั้งหมด
คุณแน่ใจว่าต้องการคืนค่าการตั้งค่าทั้งหมด ?
ลำดับตอนที่ #13 : DOM สำหรับนักพัฒนาเว็บไซต์
Engine Craft อนที่ 13 :
DOM สำหรับนัพันาเว็บไ์
แรอนนัู่ระรอเฟรมเียนโ้ html เพื่อวาอ์ประอบอเว็บไ์ เธอประาศ class ับ id ไว้ใน tag ่า ๆ อย่าเป็นระเบียบ านั้นึเริ่มลมือเียน .css เพื่อแ่หน้าเว็บ
“Hardcode เหมือนเิมเลยนะเธอ” แรอนมอำนวนบรรทัโ้ที่ยาวเป็นพือเฟรม แม้อนนี้เธอะัระเบียบใหู้ีึ้นแล้ว็าม “class ับ id ประาศไว้ทำไมน่ะ”
เฟรมหันหน้ามาทำาปิบ ๆ “เอาไว้สะวในารอ้าอิวัถุใน html ไ โยเพาะเวลาะเียน .css เพื่อแ่หน้าเว็บ หรือเียน javascript วบุมารทำานเนี่ยสำัมาเลยนะ”
“มอเป็นวัถุั้นเหรอ” แรอนิ “ล้ายับ OOP เลยนะ”
“ใ่” เฟรมอบ่อนหันไปเียนภาพบนระานไวท์บอร์อเธอ่อ “วิธีารมอ html เป็นวัถุเราเรียว่า DOM หรือื่อเ็มือ Document object model ึ่โรสร้า DOM ะเิึ้นหลัโหลเว็บเสร็ อยาใหู้ภาพัวอย่านี้”
“เวลาเียน javascript เพียว ๆ ะเห็นำว่า document หรือ element บ่อย ๆ ในที่นี้ document ือวัถุที่อยู่สูสุ ถัมาเป็น root element”
“ถัมา้าในะเป็นเนื้อหาอ html อาะมี head มี body และแย่อยลไปอี”
แรอนมอามแผนภาพอเฟรม “แล้ว DOM เี่ยว้ออะไรับ css”
ระรอสาวี้ไปที่ element body “สมมุิว่าเราพิมพ์แบบนี้”
a {
color: green
}
“แท็ื่อ a ทั้หม็ะมี้อวามสีเียวใ่ไหมล่ะ แ่ถ้าเราประาศ class ไว้ เรา็ะสามารถปรับแ่เพาะ class นั้นไ้ เ่น”
a {
color: green;
}
a.social {
text-decoration: none;
}
“หมายวามว่าลิ์ที่เป็น social เรา้อารให้ลิ์เหล่านั้นไม่มีเส้นใ้ ในะที่ลิ์ทุลิ์มี้อวามเป็นสีเียว เป็น้น”
“ถ้าเ้าใ DOM แล้ว นาย็ะสามารถวบุมัระเบียบารทำานในแ่ละส่วนอเว็บไ์ไ้ียิ่ึ้นไล่ะ”
แรอนเอาำปั้นทุบมือ “เ้าใแล้ว แบบนี้่อยูน่าสนุึ้นมาหน่อย นึว่า html หนึ่หน้าะ้อเียนโ้ยาว ๆ ในหน้าเียวัน แล้วำหน style ลไปในแท็เลยะอี”
เฟรมมอแรอนแร “ใรไม่แย .css ับ javascript ออมาา html ันบหัวว่ำนะ”
*พรู* แรูนผมฟ้าพ่นน้ำออมาเหมือนรู้ัว
ความคิดเห็น