เอกสารจาวาสคริปต์ DOM

สารบัญ

แสดงสารบัญ

วัตถุเอกสาร 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.style.property = new style: เปลี่ยนรูปแบบขององค์ประกอบ HTML

element.setAttribute(attribute, value): เปลี่ยนค่าแอตทริบิวต์ขององค์ประกอบ HTML

การเพิ่มและการลบองค์ประกอบ

document.createElement(element): สร้างองค์ประกอบ HTML
document.removeChild(element): ลบองค์ประกอบ HTML
document.appendChild(element): เพิ่มองค์ประกอบ HTML
document.replaceChild(new, old): แทนที่องค์ประกอบ HTML
document.write(text): เขียนลงในสตรีมเอาต์พุต HTML

การเพิ่มตัวจัดการเหตุการณ์

document.getElementById(id).onclick = function(){code}: การเพิ่มโค้ดตัวจัดการเหตุการณ์ให้กับเหตุการณ์ onclick

การค้นหาวัตถุ HTML

HTML DOM ระดับ 1 แรก (1998) กำหนดวัตถุ HTML 11 รายการ คอลเลกชันวัตถุ และคุณสมบัติ สิ่งเหล่านี้ยังคงใช้ได้ใน HTML5

ต่อมาใน HTML DOM ระดับ 3 มีการเพิ่มออบเจ็กต์ คอลเลกชัน และคุณสมบัติเพิ่มเติม

document.anchors: ส่งกลับทั้งหมด <a> องค์ประกอบที่มีแอตทริบิวต์ name ระดับ 1
document.applets: เลิกใช้แล้ว ระดับ 1
document.baseURI: ส่งกลับ URI ฐานสัมบูรณ์ของเอกสาร ระดับ: 3
document.body: ส่งกลับองค์ประกอบ <body> ระดับ 1
document.cookie: ส่งคืนคุกกี้ของเอกสาร ระดับ 1
document.doctype: ส่งคืนประเภทเอกสารของเอกสาร ระดับ: 3
document.documentElement: ส่งกลับ <html> องค์ประกอบ ระดับ: 3
document.documentMode: ส่งคืนโหมดที่เบราว์เซอร์ใช้ ระดับ: 3
document.documentURI: ส่งกลับ URI ของเอกสาร ระดับ: 3
document.domain: ส่งกลับชื่อโดเมนของเซิร์ฟเวอร์เอกสาร ระดับ 1
document.domConfig: ล้าสมัย ระดับ: 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