HTML โหนด DOM
ใน HTML DOM (Document Object Model) ทุกอย่างเป็นโหนด:
- เอกสารที่ตัวเองเป็นโหนดเอกสาร
- องค์ประกอบ HTML ทั้งหมดอยู่ในโหนดองค์ประกอบ
- แอตทริบิวต์ HTML ทั้งหมดอยู่ในโหนดแอตทริบิวต์
- ข้อความภายในองค์ประกอบ HTML มีโหนดข้อความ
- ความคิดเห็นที่โหนดแสดงความคิดเห็น
วัตถุเอกสาร
เมื่อเอกสาร HTML จะโหลดลงในเว็บเบราเซอร์มันจะกลายเป็นวัตถุเอกสาร
วัตถุเอกสารเป็นโหนดรากของเอกสาร HTML และ "owner" ของโหนดอื่น ๆ ทั้งหมด:
(โหนดองค์ประกอบโหนดข้อความแอตทริบิวต์โหนดและโหนด comment)
วัตถุเอกสารให้คุณสมบัติและวิธีการในการเข้าถึงวัตถุโหนดทั้งหมดจากภายใน JavaScript
Tip: เอกสารที่เป็นส่วนหนึ่งของวัตถุหน้าต่างและสามารถเข้าถึงได้เป็น window.document
สนับสนุนเบราว์เซอร์
| วัตถุ | |||||
|---|---|---|---|---|---|
| Document | ใช่ | ใช่ | ใช่ | ใช่ | ใช่ |
วัตถุเอกสารได้รับการสนับสนุนในเบราว์เซอร์ที่สำคัญทั้งหมด
คุณสมบัติของวัตถุเอกสารและวิธีการ
คุณสมบัติและวิธีการดังต่อไปนี้สามารถนำมาใช้ในเอกสาร HTML:
| คุณสมบัติ / วิธี | ลักษณะ |
|---|---|
| document.activeElement | ส่งกลับองค์ประกอบที่เน้นในขณะอยู่ในเอกสาร |
| เอกสาร. addEventListener() | แนบตัวจัดการเหตุการณ์เอกสาร |
| เอกสาร. adoptNode() | adopts โหนดจากเอกสารอื่น |
| document.anchors | ผลตอบแทนที่ได้คอลเลกชันของทุก <a> องค์ประกอบในเอกสารที่มีแอตทริบิวต์ชื่อ |
| document.applets | ผลตอบแทนของคอลเลกชันทั้งหมด <applet> องค์ประกอบในเอกสาร |
| document.baseURI | ส่งกลับ URI ฐานแน่นอนของเอกสาร |
| document.body | ชุดหรือผลตอบแทนที่ร่างกายของเอกสาร (the <body> element) |
| เอกสาร. close() | ปิดกระแสออกก่อนหน้านี้เปิดเอกสาร open() |
| document.cookie | ผลตอบแทนที่ได้คู่ชื่อ / ค่าทั้งหมดของ cookies ในเอกสาร |
| เอกสาร. createAttribute() | สร้างโหนดแอตทริบิวต์ |
| เอกสาร. createComment() | สร้างโหนดแสดงความคิดเห็นที่มีข้อความที่ระบุ |
| เอกสาร. createDocumentFragment() | สร้างโหนด DocumentFragment ที่ว่างเปล่า |
| เอกสาร. createElement() | สร้างโหนดธาตุ |
| เอกสาร. createTextNode() | สร้างโหนดข้อความ |
| document.doctype | ผลตอบแทนที่ได้ประกาศประเภทเอกสารที่เกี่ยวข้องกับเอกสาร |
| document.documentElement | ส่งคืนเอกสารองค์ประกอบของเอกสาร (the <html> element) |
| document.documentMode | ส่งกลับโหมดที่ใช้โดยเบราว์เซอร์เพื่อแสดงเอกสาร |
| document.documentURI | ตั้งค่าหรือผลตอบแทนที่ตั้งของเอกสาร |
| document.domain | ส่งคืนชื่อโดเมนของเซิร์ฟเวอร์ที่โหลดเอกสาร |
| document.domConfig | ล้าสมัย. ส่งคืนการตั้งค่า DOM ของเอกสาร |
| document.embeds | ผลตอบแทนของคอลเลกชันทั้งหมด <embed> องค์ประกอบเอกสาร |
| document.forms | ผลตอบแทนการเก็บรวบรวมทั้งหมด <form> องค์ประกอบในเอกสาร |
| เอกสาร. getElementById() | ส่งกลับองค์ประกอบที่มี ID แอตทริบิวต์ที่มีค่าที่ระบุ |
| เอกสาร. getElementsByClassName() | ส่งกลับ NodeList ที่มีองค์ประกอบทั้งหมดที่มีชื่อชั้นที่ระบุ |
| เอกสาร. getElementsByName() | ส่งกลับ NodeList ที่มีองค์ประกอบทั้งหมดที่มีชื่อระบุ |
| เอกสาร. getElementsByTagName() | ส่งกลับ NodeList ที่มีองค์ประกอบทั้งหมดที่มีชื่อแท็กระบุ |
| เอกสาร. hasFocus() | ส่งกลับค่าบูลีนระบุว่าเอกสารที่มีโฟกัส |
| document.head | ส่งคืน <head> องค์ประกอบของเอกสาร |
| document.images | ผลตอบแทนของคอลเลกชันทั้งหมด <img> องค์ประกอบในเอกสาร |
| document.implementation | ส่งคืนวัตถุ DOMImplementation ที่จัดการเอกสารนี้ |
| เอกสาร. importNode() | นำเข้าโหนดจากเอกสารอื่น |
| document.inputEncoding | ผลตอบแทนการเข้ารหัส, ชุดตัวอักษรที่ใช้สำหรับเอกสาร |
| document.lastModified | ส่งกลับวันเวลาและเอกสารที่แก้ไขล่าสุด |
| document.links | ผลตอบแทนที่ได้คอลเลกชันของทุก <a> และ <area> องค์ประกอบในเอกสารที่มีแอตทริบิวต์ href |
| เอกสาร. normalize() | ลบโหนดข้อความที่ว่างเปล่าและร่วมโหนดที่อยู่ติดกัน |
| เอกสาร. normalizeDocument() | ลบโหนดข้อความที่ว่างเปล่าและร่วมโหนดที่อยู่ติดกัน |
| เอกสาร. open() | เปิดกระแส output HTML เพื่อรวบรวมผลผลิตจากเอกสาร write() |
| เอกสาร. querySelector() | ส่งกลับองค์ประกอบแรกที่ตรงกับ CSS ระบุ selector(s) ในเอกสาร |
| เอกสาร. querySelectorAll() | ส่งกลับ NodeList คงมีองค์ประกอบทั้งหมดที่ตรงกับ CSS ระบุ selector(s) ในเอกสาร |
| document.readyState | ส่งคืน (loading) สถานะของเอกสาร |
| document.referrer | ส่งกลับ URL ของเอกสารที่โหลดเอกสารปัจจุบัน |
| เอกสาร. removeEventListener() | เอาตัวจัดการเหตุการณ์จากเอกสาร (ที่ได้รับที่แนบมากับ addEventListener() วิธีการ) |
| เอกสาร. renameNode() | เปลี่ยนชื่อโหนดที่ระบุ |
| document.scripts | ผลตอบแทนที่ได้คอลเลกชันของ <script> องค์ประกอบในเอกสาร |
| document.strictErrorChecking | ชุดหรือผลตอบแทนไม่ว่าจะเป็นข้อผิดพลาดการตรวจสอบจะถูกบังคับใช้หรือไม่ |
| document.title | ตั้งค่าหรือผลตอบแทนที่ชื่อเรื่องของเอกสาร |
| document.URL | ส่งกลับ URL เต็มของเอกสาร HTML |
| เอกสาร. write() | เขียนนิพจน์ HTML หรือรหัส JavaScript เพื่อให้เอกสาร |
| เอกสาร. writeln() | เช่นเดียวกับ write() แต่เพิ่มอักขระ newline หลังจากแต่ละคำสั่ง |
คำเตือน !!!
ใน W3C DOM หลักเอกสารวัตถุสืบทอดคุณสมบัติและวิธีการจากวัตถุโหนด
หลายคุณสมบัติเหล่านี้และวิธีการทำให้รู้สึกไม่ใช้ในเอกสาร
หลีกเลี่ยงการใช้คุณสมบัติโหนดวัตถุเหล่านี้และวิธีการที่วัตถุเอกสาร HTML:
| คุณสมบัติ / วิธี | เหตุผลในการหลีกเลี่ยง |
|---|---|
| document.attributes | เอกสารไม่ได้มีคุณลักษณะ |
| เอกสาร. hasAttributes() | เอกสารไม่ได้มีคุณลักษณะ |
| document.nextSibling | เอกสารไม่ได้มีพี่น้อง |
| document.nodeName | นี้อยู่เสมอ #document |
| document.nodeType | นี้อยู่เสมอ 9 (DOCUMENT_NODE) |
| document.nodeValue | เอกสารไม่ได้มีค่าโหนด |
| document.ownerDocument | เอกสารไม่ได้มีเอกสารเจ้าของ |
| document.ownerElement | เอกสารไม่ได้มีองค์ประกอบเจ้าของ |
| document.parentNode | เอกสารไม่ได้มีโหนดแม่ |
| document.previousSibling | เอกสารไม่ได้มีพี่น้อง |
| document.textContent | เอกสารไม่ได้มีเนื้อหาข้อความ |