สิ่งที่คุณต้องรู้เกี่ยวกับ DOM ใน JavaScript



บทความนี้จะให้ความรู้โดยละเอียดและครอบคลุมเกี่ยวกับ Document Object Model เช่น DOM ใน JavaScript

คุณทราบหรือไม่ว่าเราสามารถใช้ JavaScript เพื่อปรับแต่งเนื้อหาบนหน้าเว็บได้ น่าสนใจใช่มั้ย? มาทำความเข้าใจว่า Document Object Model คืออะไร DOM ใน JavaScript ในลักษณะต่อไปนี้:

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” แล้วเราจะติดต่อกลับไป