โมเดลอ็อบเจ็กต์เอกสารนี้อนุญาตให้เข้าถึงและแก้ไขเนื้อหาเอกสารทั้งหมดและเป็นมาตรฐานโดย World Wide Web Consortium (W3C) รุ่นนี้ได้รับการสนับสนุนโดยเบราว์เซอร์สมัยใหม่เกือบทั้งหมด
W3C DOM สร้างมาตรฐานคุณสมบัติส่วนใหญ่ของ DOM เดิมและเพิ่มคุณสมบัติใหม่ ๆ ด้วย นอกเหนือจากการสนับสนุนรูปแบบ [] รูปภาพ [] และคุณสมบัติอาร์เรย์อื่น ๆ ของอ็อบเจ็กต์ Document แล้วยังกำหนดวิธีการที่อนุญาตให้สคริปต์เข้าถึงและจัดการองค์ประกอบเอกสารใด ๆ ไม่ใช่แค่องค์ประกอบที่มีวัตถุประสงค์พิเศษเช่นแบบฟอร์มและรูปภาพ
คุณสมบัติเอกสารใน W3C DOM
รุ่นนี้รองรับคุณสมบัติทั้งหมดที่มีอยู่ใน Legacy DOM นอกจากนี้นี่คือรายการคุณสมบัติของเอกสารที่สามารถเข้าถึงได้โดยใช้ W3C DOM
| ซีเนียร์ |
คุณสมบัติและคำอธิบาย |
| 1 |
body การอ้างอิงถึงออบเจ็กต์ Element ที่แสดงถึงแท็ก <body> ของเอกสารนี้ Ex - document.body |
| 2 |
defaultView คุณสมบัติอ่านอย่างเดียวและแสดงถึงหน้าต่างที่แสดงเอกสาร Ex - document.defaultView |
| 3 |
documentElement การอ้างอิงแบบอ่านอย่างเดียวไปยังแท็ก <html> ของเอกสาร Ex - document.documentElement8 / 31/2551 |
| 4 |
implementation เป็นคุณสมบัติแบบอ่านอย่างเดียวและแสดงถึงวัตถุ DOMImplementation ที่แสดงถึงการนำไปใช้งานที่สร้างเอกสารนี้ Ex - document.implementation |
วิธีการเอกสารใน W3C DOM
รุ่นนี้รองรับวิธีการทั้งหมดที่มีอยู่ใน Legacy DOM นอกจากนี้นี่คือรายการวิธีการที่สนับสนุนโดย W3C DOM
| ซีเนียร์ |
คุณสมบัติและคำอธิบาย |
| 1 |
createAttribute( name) ส่งคืนโหนด Attr ที่สร้างขึ้นใหม่พร้อมชื่อที่ระบุ Ex - document.createAttribute (ชื่อ) |
| 2 |
createComment( text) สร้างและส่งคืนโหนดข้อคิดเห็นใหม่ที่มีข้อความที่ระบุ Ex - document.createComment (ข้อความ) |
| 3 |
createDocumentFragment( ) สร้างและส่งคืนโหนด DocumentFragment ที่ว่างเปล่า Ex - document.createDocumentFragment () |
| 4 |
createElement( tagName) สร้างและส่งคืนโหนดองค์ประกอบใหม่พร้อมชื่อแท็กที่ระบุ Ex - document.createElement (tagName) |
| 5 |
createTextNode( text) สร้างและส่งคืนโหนดข้อความใหม่ที่มีข้อความที่ระบุ Ex - document.createTextNode (ข้อความ) |
| 6 |
getElementById( id) ส่งคืนองค์ประกอบของเอกสารนี้ที่มีค่าที่ระบุสำหรับแอตทริบิวต์ id หรือค่าว่างหากไม่มีองค์ประกอบดังกล่าวในเอกสาร Ex - document.getElementById (id) |
| 7 |
getElementsByName( name) ส่งคืนอาร์เรย์ของโหนดขององค์ประกอบทั้งหมดในเอกสารที่มีค่าที่ระบุสำหรับแอตทริบิวต์ name หากไม่พบองค์ประกอบดังกล่าวให้ส่งกลับอาร์เรย์ที่มีความยาวเป็นศูนย์ Ex - document.getElementsByName (ชื่อ) |
| 8 |
getElementsByTagName( tagname) ส่งคืนอาร์เรย์ของโหนดองค์ประกอบทั้งหมดในเอกสารนี้ที่มีชื่อแท็กที่ระบุ โหนดองค์ประกอบจะปรากฏในอาร์เรย์ที่ส่งคืนในลำดับเดียวกับที่ปรากฏในแหล่งเอกสาร Ex - document.getElementsByTagName (tagname) |
| 9 |
importNode( importedNode, deep) สร้างและส่งคืนสำเนาของโหนดจากเอกสารอื่นที่เหมาะสำหรับการแทรกลงในเอกสารนี้ ถ้าอาร์กิวเมนต์ลึกเป็นจริงมันจะคัดลอกลูกของโหนดซ้ำ ๆ ด้วย รองรับใน DOM เวอร์ชัน 2 Ex - document.importNode (importNode ลึก) |
ตัวอย่าง
นี่เป็นเรื่องง่ายมากที่จะจัดการองค์ประกอบเอกสาร (การเข้าถึงและการตั้งค่า) โดยใช้ W3C DOM คุณสามารถใช้วิธีการใดก็ได้เช่นgetElementById, getElementsByName, หรือ getElementsByTagName.
นี่คือตัวอย่างในการเข้าถึงคุณสมบัติเอกสารโดยใช้วิธี W3C DOM
<html>
<head>
<title> Document Title </title>
<script type = "text/javascript">
<!--
function myFunc() {
var ret = document.getElementsByTagName("title");
alert("Document Title : " + ret[0].text );
var ret = document.getElementById("heading");
alert(ret.innerHTML );
}
//-->
</script>
</head>
<body>
<h1 id = "heading">This is main title</h1>
<p>Click the following to see the result:</p>
<form id = "form1" name = "FirstForm">
<input type = "button" value = "Click Me" onclick = "myFunc();" />
<input type = "button" value = "Cancel">
</form>
<form d = "form2" name = "SecondForm">
<input type = "button" value = "Don't ClickMe"/>
</form>
</body>
</html>
NOTE - ตัวอย่างนี้ส่งคืนอ็อบเจ็กต์สำหรับฟอร์มและองค์ประกอบและเราจะต้องเข้าถึงค่าโดยใช้คุณสมบัติอ็อบเจ็กต์ที่ไม่ได้กล่าวถึงในบทช่วยสอนนี้