HTML DOM: วิธีใช้ Document Object Model

วัตถุเอกสารแสดงถึงไฟล์ เอกสารที่แสดงในหน้าต่างนั้น อ็อบเจ็กต์ Document มีคุณสมบัติต่างๆที่อ้างถึงอ็อบเจ็กต์อื่นซึ่งอนุญาตให้เข้าถึงและปรับเปลี่ยนเนื้อหาเอกสาร ในบทความนี้เราจะทำความเข้าใจกับ HTML DOM

การโอเวอร์โหลดเทียบกับการแทนที่ c ++

• แนวคิด HTML DOM
• HTML DOM คืออะไร
• HTML DOM ไม่ใช่อะไร
• DOM มาจากไหน
• คุณสมบัติของ HTML DOM
• การค้นหาองค์ประกอบ HTML

แนวคิด HTML DOM

วิธีการเข้าถึงและแก้ไขเนื้อหาที่เป็นเอกสารเรียกว่าไฟล์ Document Object Model หรือ DOM ออบเจ็กต์ถูกจัดเรียงตามลำดับชั้น โครงสร้างลำดับชั้นนี้ใช้กับการจัดระเบียบของออบเจ็กต์ในเอกสารเว็บ

• หน้าต่างออบเจ็กต์ & ลบด้านบนสุดของลำดับชั้น เป็นองค์ประกอบสูงสุดของลำดับชั้นของวัตถุ
• วัตถุเอกสาร & ลบเอกสาร HTML แต่ละรายการที่โหลดลงในหน้าต่างจะกลายเป็นวัตถุเอกสาร เอกสารประกอบด้วยเนื้อหาของหน้า
• แบบฟอร์มอ็อบเจ็กต์ & ลบทุกอย่างที่อยู่ในแท็ก…ตั้งค่าอ็อบเจ็กต์ฟอร์ม
• องค์ประกอบการควบคุมฟอร์ม & ลบวัตถุฟอร์มมีองค์ประกอบทั้งหมดที่กำหนดไว้สำหรับวัตถุนั้นเช่นช่องข้อความปุ่มปุ่มตัวเลือกและช่องทำเครื่องหมาย

HTML DOM คืออะไร

Document Object Model คือ API การเขียนโปรแกรมสำหรับเอกสาร โมเดลวัตถุนั้นมีลักษณะใกล้เคียงกับโครงสร้างของเอกสารที่จำลองขึ้น ตัวอย่างเช่นพิจารณาตารางนี้ซึ่งนำมาจากเอกสาร HTML:

 
 
 
Shady Grove
 
เอโอเลียน
 
 
 
เหนือแม่น้ำชาร์ลี
 
Dorian
 
    

HTML DOM ไม่ใช่อะไร

ส่วนนี้ออกแบบมาเพื่อให้ความเข้าใจที่แม่นยำยิ่งขึ้นเกี่ยวกับ Document Object Model โดยแยกความแตกต่างจากระบบอื่น ๆ ที่อาจดูเหมือน

แม้ว่า Document Object Model จะได้รับอิทธิพลอย่างมากจาก Dynamic HTML แต่ในระดับ 1 ก็ไม่ได้ใช้ Dynamic HTML ทั้งหมด โดยเฉพาะเหตุการณ์ยังไม่ได้กำหนด ระดับ 1 ได้รับการออกแบบมาเพื่อวางรากฐานที่มั่นคงสำหรับฟังก์ชันประเภทนี้โดยการจัดเตรียมรูปแบบเอกสารที่ยืดหยุ่นและยืดหยุ่น

Document Object Model ไม่ใช่ข้อกำหนดไบนารี โปรแกรม Document Object Model ที่เขียนด้วยภาษาเดียวกันจะเป็นซอร์สโค้ดที่เข้ากันได้กับทุกแพลตฟอร์ม แต่ Document Object Model ไม่ได้กำหนดรูปแบบของการทำงานร่วมกันแบบไบนารีใด ๆ

Document Object Model ไม่ใช่วิธีการคงออบเจ็กต์ไว้เป็น XML หรือ HTML แทนที่จะระบุว่าจะแสดงอ็อบเจ็กต์ใน XML อย่างไร Document Object Model จะระบุว่าเอกสาร XML และ HTML ถูกแสดงเป็นอ็อบเจ็กต์อย่างไรเพื่อให้สามารถใช้ในโปรแกรมเชิงวัตถุได้

Document Object Model ไม่ใช่ชุดของโครงสร้างข้อมูลเป็นโมเดลอ็อบเจ็กต์ที่ระบุอินเทอร์เฟซ แม้ว่าเอกสารนี้จะมีไดอะแกรมที่แสดงความสัมพันธ์แม่ / ลูก แต่ก็เป็นความสัมพันธ์เชิงตรรกะที่กำหนดโดยอินเตอร์เฟสการเขียนโปรแกรมไม่ใช่การแสดงโครงสร้างข้อมูลภายในใด ๆ

Document Object Model ไม่ได้กำหนด 'ความหมายภายในที่แท้จริง' ของ XML หรือ HTML ความหมายของภาษาเหล่านั้นถูกกำหนดโดยภาษาเอง

Document Object Model เป็นโมเดลการเขียนโปรแกรมที่ออกแบบมาเพื่อเคารพความหมายเหล่านี้ Document Object Model ไม่มีการแบ่งส่วนใด ๆ สำหรับวิธีที่คุณเขียนเอกสาร XML และ HTML เอกสารใด ๆ ที่สามารถเขียนในภาษาเหล่านี้สามารถแสดงใน Document Object Model ได้

Document Object Model แม้จะมีชื่อ แต่ก็ไม่ใช่คู่แข่งกับ Component Object Model (COM) COM เช่น CORBA เป็นวิธีที่ไม่ขึ้นกับภาษาในการระบุอินเทอร์เฟซและอ็อบเจ็กต์ Document Object Model คือชุดของอินเทอร์เฟซและอ็อบเจ็กต์ที่ออกแบบมาสำหรับจัดการเอกสาร HTML และ XML DOM อาจเป็นนำไปใช้งานโดยใช้ระบบที่ไม่ขึ้นกับภาษาเช่น COM หรือ CORBA นอกจากนี้ยังอาจนำไปใช้โดยใช้การผูกเฉพาะภาษาเช่นการผูก Java หรือ ECMAScript ที่ระบุในเอกสารนี้

รูปแบบวัตถุเอกสารมาจากไหน

Document Object Model มาจากข้อกำหนดเพื่ออนุญาตให้สคริปต์ JavaScript และโปรแกรม Java สามารถพกพาได้ระหว่างเว็บเบราว์เซอร์ Dynamic HTML เป็นบรรพบุรุษในทันทีของ Document Object Model และเดิมทีคิดว่าส่วนใหญ่ในแง่ของเบราว์เซอร์

วิธีใช้แทนที่ใน java

อย่างไรก็ตามเมื่อมีการจัดตั้ง Document Object Model Working Group ก็จะเข้าร่วมโดยผู้ขายในโดเมนอื่น ๆ เช่นตัวแก้ไข HTML หรือ XML และที่เก็บเอกสาร ผู้ขายเหล่านี้หลายรายเคยทำงานกับ SGML ก่อนที่ XML จะได้รับการพัฒนาด้วยเหตุนี้ Document Object Model จึงได้รับอิทธิพลจาก SGML Groves และมาตรฐาน HyTime ผู้ขายเหล่านี้บางรายได้พัฒนาแบบจำลองวัตถุของตนเองสำหรับเอกสารเพื่อจัดหาAPI การเขียนโปรแกรมสำหรับตัวแก้ไข SGML / XML หรือที่เก็บเอกสารและโมเดลอ็อบเจ็กต์เหล่านี้มีผลต่อ Document Object Model ด้วย

คุณสมบัติของ HTML DOM

มาดูคุณสมบัติของออบเจ็กต์เอกสารที่อ็อบเจ็กต์เอกสารสามารถเข้าถึงและแก้ไขได้

1. วัตถุหน้าต่าง: Window Object จะอยู่ที่ด้านบนสุดของลำดับชั้นเสมอ
2. วัตถุเอกสาร: เมื่อเอกสาร HTML ถูกโหลดลงในหน้าต่างเอกสารนั้นจะกลายเป็นวัตถุเอกสาร
3. แบบฟอร์มวัตถุ: มันแสดงโดย แบบฟอร์ม แท็ก
4. ลิงค์วัตถุ: มันแสดงโดย ลิงค์ แท็ก
5. วัตถุยึด: มันแสดงโดย href แท็ก
6. องค์ประกอบการควบคุมแบบฟอร์ม: แบบฟอร์มสามารถมีองค์ประกอบการควบคุมได้มากมายเช่นช่องข้อความปุ่มปุ่มตัวเลือกและช่องทำเครื่องหมายเป็นต้น

วิธีการ ของ Document Object :

1. เขียน (“ สตริง”): เขียนสตริงที่กำหนดบนเอกสาร
2. getElementById (): ส่งคืนองค์ประกอบที่มีค่า id ที่กำหนด
3. getElementsByName (): ส่งคืนองค์ประกอบทั้งหมดที่มีค่าชื่อที่กำหนด
4. getElementsByTagName (): ส่งคืนองค์ประกอบทั้งหมดที่มีชื่อแท็กที่กำหนด
5. getElementsByClassName (): ส่งคืนองค์ประกอบทั้งหมดที่มีชื่อคลาสที่กำหนด

การค้นหาองค์ประกอบ HTML

เมื่อคุณต้องการเข้าถึงองค์ประกอบ HTML ด้วย JavaScript คุณต้องหาองค์ประกอบก่อน

มีสองวิธีในการดำเนินการนี้:

• การค้นหาองค์ประกอบ HTML ตาม id
• ค้นหาองค์ประกอบ HTML ตามชื่อแท็ก
• ค้นหาองค์ประกอบ HTML ตามชื่อคลาส

การค้นหาองค์ประกอบ HTML ตาม Id

วิธีที่ง่ายที่สุดในการค้นหาองค์ประกอบ HTML ใน DOM คือการใช้รหัสองค์ประกอบ

ตัวอย่าง

การค้นหาองค์ประกอบ HTML ตามชื่อแท็ก

ตัวอย่างนี้ค้นหาองค์ประกอบที่มี id =” main” จากนั้นจะพบทั้งหมด

องค์ประกอบภายใน 'หลัก':

ด้วยเหตุนี้เราจึงมาถึงตอนท้ายของบทความ HTML DOM นี้ ฉันหวังว่าคุณจะเข้าใจในแง่มุมต่างๆของ HTML DOM, Document Object Model

java รับวันที่จากสตริง

ตรวจสอบ ซึ่งมาพร้อมกับการฝึกอบรมสดที่นำโดยผู้สอนและประสบการณ์โครงการในชีวิตจริง การฝึกอบรมนี้ทำให้คุณมีความเชี่ยวชาญในทักษะในการทำงานกับเทคโนโลยีเว็บส่วนหลังและส่วนหน้า รวมถึงการฝึกอบรมเกี่ยวกับ Web Development, jQuery, Angular, NodeJS, ExpressJS และ MongoDB

มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบล็อก 'รูปภาพ HTML' แล้วเราจะติดต่อกลับไป