คุณทราบหรือไม่ว่าเราสามารถใช้ JavaScript เพื่อปรับแต่งเนื้อหาบนหน้าเว็บได้ น่าสนใจใช่มั้ย? มาทำความเข้าใจว่า Document Object Model คืออะไร DOM ใน JavaScript ในลักษณะต่อไปนี้:
- DOM ใน JavaScript คืออะไร?
- การดำเนินการของ DOM ใน JavaScript
- การสืบค้น DOM
- ฟังเหตุการณ์
- การโต้ตอบกับแบบฟอร์ม
- การสร้างองค์ประกอบ HTML
- การเพิ่ม CSS
DOM ใน JavaScript คืออะไร?
Document Object Model หรือ DOM ถูกสร้างขึ้นโดยเบราว์เซอร์เมื่อโหลดเว็บเพจ ในรูปแบบกราฟิกมันเหมือนกับต้นไม้ขององค์ประกอบที่เรียกว่าโหนดซึ่งใช้เพื่อแสดงทุกองค์ประกอบในหน้า
DOM ทั้งหมดของหน้าเว็บของเราอยู่ภายในออบเจ็กต์เอกสาร โดยทางโปรแกรมโมเดลนี้ช่วยให้เราสามารถอ่านหรือแม้แต่เปลี่ยนแปลงเนื้อหาของเพจของเราผ่านทาง . มันไม่เจ๋งเหรอ?
การแปลง double เป็น int java
การดำเนินการของ DOM ใน JavaScript
การกระทำบางอย่างที่เราสามารถทำได้กับโมเดลนี้ ได้แก่ :
เปลี่ยน / ลบองค์ประกอบ HTML ใน DOM / บนเพจ
เปลี่ยนและเพิ่มสไตล์ CSS ให้กับองค์ประกอบ
อ่านและเปลี่ยนแอตทริบิวต์ (href, src, alt) ฯลฯ
สร้างองค์ประกอบใหม่และแทรกลงใน DOM / เพจ
c ++ goto คำสั่ง
แนบตัวฟังเหตุการณ์เข้ากับองค์ประกอบ (คลิกกดแป้นส่ง)
การสืบค้น DOM ใน JavaScript
การจับองค์ประกอบ HTML หรือการเก็บไว้เพื่อเพิ่ม / เปลี่ยนแปลงหรือเนื้อหาเรียกว่าการสืบค้น
รหัส HTML:
Javascript และ DOM h1 {font-size: 60px}
รหัส JavaScript:
var title = document.getElementById ('title') // สี cgangin เป็นสีแดง title.style.color = 'red' var body = document.getElementById ('body') // เปลี่ยนสีพื้นหลังเป็นสีฟ้าอ่อน body.style backgroundColor = 'lightblue'
เราเปลี่ยนสีข้อความของชื่อเรื่องจากสีดำเป็นสีแดงโดยใช้ JavaScript เราทำได้โดยใช้ . สไตล์ จากนั้นคุณสมบัติเปลี่ยนค่าของ สี เท่ากับ สุทธิ .
ตอนนี้เรามาเปลี่ยนสีพื้นหลังขององค์ประกอบร่างกายเป็น ฟ้าอ่อน .
อะไรคือซีเรียลไลซ์ใน java
ด้วยเหตุนี้เราจึงมาถึงจุดสิ้นสุดของบทความ DOM ใน JavaScript ฉันหวังว่าคุณจะเข้าใจวิธีการทำงานของ Document Object Models และวิธีใช้ DOM เดียวกันใน JavaScript
ตอนนี้คุณรู้เกี่ยวกับ DOM ใน JavaScript แล้วให้ตรวจสอบไฟล์ โดย Edureka การฝึกอบรมการรับรองการพัฒนาเว็บจะช่วยให้คุณเรียนรู้วิธีสร้างเว็บไซต์ที่น่าประทับใจโดยใช้ HTML5, CSS3, Twitter Bootstrap 3, jQuery และ Google API และปรับใช้กับ Amazon Simple Storage Service (S3)
มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของ“ DOM in JavaScript” แล้วเราจะติดต่อกลับไป