JavaScript ฮ์ทมและดอมเอกสาร

โอปเจกต์ HTML DOM ของเอกสารเป็นเจ้าของขององค์ประกอบทั้งหมดในหน้าเว็บของคุณ

โอปเจกต์ HTML DOM Document

โอปเจกต์เอกสารแทนนั้นเป็นตัวแทนของหน้าเว็บของคุณ

หากคุณต้องการเข้าถึงองค์ประกอบใดใด ๆ ในหน้าเว็บ HTML ของคุณ คุณจะเริ่มจากการเข้าถึงโอปเจกต์ document

ต่อไปนี้คือตัวอย่างของวิธีการใช้โอปเจกต์ document ในการเข้าถึงและปฏิบัติต่อ HTML

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

วิธี รายละเอียด
document.getElementById(id) หาองค์ประกอบด้วย id ขององค์ประกอบ
document.getElementsByTagName(name) หาองค์ประกอบด้วยชื่อแท็ก
document.getElementsByClassName(name) หาองค์ประกอบด้วยชื่อชั้น

เปลี่ยน HTML องค์ประกอบ

วิธี รายละเอียด
element.innerHTML = เนื้อหา HTML ใหม่ เปลี่ยน inner 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> ที่มีคุณสมบัติ name 1
document.applets คืนค่าแบบนี้ทั้งหมด <applet> อีเมล（ไม่แนะนำใช้ใน HTML5） 1
document.baseURI คืนค่า URI ฐานของเอกสาร 3
document.body คืนค่าองค์ประกอบ <body> ของเอกสาร 1
document.cookie คืนค่า 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> Ԫ 1
document.readyState شĵ(װ)״̬ 3
document.referrer شURIURI 1
document.scripts شȫ <script> Ԫ 3
document.strictErrorChecking شǷʹǿǷ 3
document.title ش <title> Ԫ 1
document.URL ش URL 1