วัตถุเอกสาร HTML DOM เป็นเจ้าของวัตถุอื่น ๆ ทั้งหมดในหน้าเว็บของคุณ
วัตถุ HTML DOM เอกสาร
วัตถุเอกสารหมายถึงหน้าเว็บของคุณ
หากคุณต้องการที่จะเข้าถึงองค์ประกอบใด ๆ ในหน้าเว็บ HTML, คุณมักจะเริ่มต้นด้วยการเข้าถึงวัตถุเอกสาร
ด้านล่างนี้คือตัวอย่างบางส่วนของวิธีการที่คุณสามารถใช้วัตถุเอกสารการเข้าถึงและจัดการ HTML
หาองค์ประกอบ HTML
| วิธี | ลักษณะ |
|---|---|
| document.getElementById( id ) | หาองค์ประกอบธาตุประจำตัวประชาชน |
| document.getElementsByTagName( name ) | ค้นหาองค์ประกอบโดยใช้ชื่อแท็ก |
| document.getElementsByClassName( name ) | ค้นหาองค์ประกอบโดยชื่อชั้น |
การเปลี่ยนองค์ประกอบ HTML
| วิธี | ลักษณะ |
|---|---|
| element .innerHTML = new html content | เปลี่ยน HTML ภายในขององค์ประกอบ |
| element . attribute = new value | เปลี่ยนค่าแอตทริบิวต์ขององค์ประกอบ HTML |
| element .setAttribute (attribute, value) | เปลี่ยนค่าแอตทริบิวต์ขององค์ประกอบ HTML |
| element .style. property = new style | เปลี่ยนรูปแบบขององค์ประกอบของ HTML |
เพิ่มและลบองค์ประกอบ
| วิธี | ลักษณะ |
|---|---|
| document.createElement( element ) | สร้างองค์ประกอบ HTML |
| document.removeChild( element ) | ลบองค์ประกอบ HTML |
| document.appendChild( element ) | เพิ่มองค์ประกอบ HTML |
| document.replaceChild( element ) | เปลี่ยนองค์ประกอบ HTML |
| document.write( text ) | เขียนเข้าไปในกระแสเอาท์พุทแบบ HTML |
เพิ่มตัวจัดการเหตุการณ์
| วิธี | ลักษณะ |
|---|---|
| document.getElementById( id ).onclick = function(){ code } | เพิ่มรหัสการจัดการเหตุการณ์ไปยัง onclick เหตุการณ์ |
ค้นหาวัตถุ HTML
ครั้งแรก HTML DOM Level 1 (1998) ที่กำหนดไว้ 11 วัตถุ HTML, คอลเลกชันวัตถุและคุณสมบัติ เหล่านี้ยังคงถูกต้องใน HTML5
ต่อมาใน HTML DOM Level 3 วัตถุมากขึ้นคอลเลกชันและคุณสมบัติที่ถูกเพิ่ม
| คุณสมบัติ | ลักษณะ | DOM |
|---|---|---|
| document.anchors | ผลตอบแทนที่ได้ทั้งหมด <a> องค์ประกอบที่มีแอตทริบิวต์ชื่อ | 1 |
| document.applets | คืนทั้งหมด <applet> องค์ประกอบ (เลิกใช้ใน HTML5) | 1 |
| document.baseURI | ส่งกลับ URI ฐานแน่นอนของเอกสาร | 3 |
| document.body | ส่งกลับ <body> องค์ประกอบ | 1 |
| document.cookie | ส่งกลับคุกกี้ของเอกสาร | 1 |
| document.doctype | ผลตอบแทนที่ได้ DOCTYPE เอกสาร | 3 |
| document.documentElement | ส่งกลับ <html> องค์ประกอบ | 3 |
| document.documentMode | ผลตอบแทนที่ได้โหมดที่ใช้โดยเบราว์เซอร์ | 3 |
| document.documentURI | ผลตอบแทนที่ได้ URI ของเอกสาร | 3 |
| document.domain | ผลตอบแทนที่ได้ชื่อโดเมนของเซิร์ฟเวอร์เอกสาร | 1 |
| document.domConfig | ล้าสมัย. คืนค่าการกำหนดค่า DOM | 3 |
| document.embeds | ผลตอบแทนที่ได้ทั้งหมด <embed> องค์ประกอบ | 3 |
| document.forms | ผลตอบแทนที่ได้ทั้งหมด <form> องค์ประกอบ | 1 |
| document.head | ส่งกลับ <head> องค์ประกอบ | 3 |
| document.images | ผลตอบแทนที่ได้ทั้งหมด <img> องค์ประกอบ | 1 |
| document.implementation | ผลตอบแทนการดำเนินงาน DOM | 3 |
| document.inputEncoding | ผลตอบแทนการเข้ารหัสของเอกสาร (ชุดตัวอักษร) | 3 |
| document.lastModified | ผลตอบแทนที่ได้ในวันเวลาและเอกสารที่ได้รับการปรับปรุง | 3 |
| document.links | ผลตอบแทนทั้งหมด <area> และ <a> องค์ประกอบที่มีแอตทริบิวต์ href | 1 |
| document.readyState | ส่งกลับ (โหลด) สถานะของเอกสาร | 3 |
| document.referrer | ผลตอบแทนที่ได้ URI ของอ้างอิง (เอกสารเชื่อมโยง) | 1 |
| document.scripts | ผลตอบแทนที่ได้ทั้งหมด <script> องค์ประกอบ | 3 |
| document.strictErrorChecking | ผลตอบแทนถ้าการตรวจสอบข้อผิดพลาดจะถูกบังคับใช้ | 3 |
| document.title | ส่งกลับ <title> องค์ประกอบ | 1 |
| document.URL | ส่งกลับ URL ที่สมบูรณ์ของเอกสาร | 1 |