วัตถุรายละเอียด HTML DOM

ออบเจ็กต์รายละเอียด HTML DOM เชื่อมโยงกับองค์ประกอบ HTML <รายละเอียด> สิ่งนี้ทำให้เราสามารถซ่อนข้อมูลที่สามารถแสดงได้ก็ต่อเมื่อผู้ใช้ต้องการดูเท่านั้น

คุณสมบัติ

ต่อไปนี้เป็นคุณสมบัติของวัตถุรายละเอียด -

Sr.No	คุณสมบัติ &คำอธิบาย
1	เปิด เพื่อตั้งค่าหรือส่งคืนว่ารายละเอียดควรปรากฏแก่ผู้ใช้หรือไม่

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

การสร้างวัตถุรายละเอียด -

var p = document.createElement("DETAILS");

ตัวอย่าง

ให้เราดูตัวอย่างสำหรับออบเจ็กต์ HTML DOM Details -

<!DOCTYPE html>
<html>
<body>
<h2>Details object</h2>
<p>Click the below button to create a DETAILS element about a monument</p>
<button onclick="detCreate()">CREATE</button>
<br><br>
<script>
   function detCreate() {
      var et = document.createElement("DETAILS");
      var sum=document.createElement("SUMMARY");
      var sumText=document.createTextNode("Eiffel Tower");
      var txt = document.createTextNode("It is one of the most popular monument in the world");
      sum.appendChild(sumText);
      et.appendChild(txt);
      document.body.appendChild(sum);
      document.body.appendChild(et);
   }
</script>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

วัตถุรายละเอียด HTML DOM

เมื่อคลิกปุ่มสร้างแล้วขยายรายละเอียดโดยคลิกที่ลูกศร -

วัตถุรายละเอียด HTML DOM

ในตัวอย่างข้างต้น −

เราได้สร้างปุ่ม CREATE ซึ่งจะเรียกใช้ฟังก์ชัน detCreate() เมื่อผู้ใช้คลิก -

<button onclick="detCreate()">CREATE</button>

ฟังก์ชัน detCreate() สร้างองค์ประกอบ

โดยใช้เมธอด createElement() ของอ็อบเจ็กต์เอกสารและกำหนดให้กับตัวแปร et จากนั้นเราจะสร้าง

องค์ประกอบอื่นซึ่งเป็นส่วนหนึ่งขององค์ประกอบ

และอยู่ภายในโดยเมธอด createElement() ของอ็อบเจ็กต์เอกสารและกำหนดให้กับผลรวมของตัวแปร

จากนั้นจึงสร้างโหนดข้อความสองโหนด sumtxt และ txt ที่ต่อท้ายองค์ประกอบ

และ

ตามลำดับ องค์ประกอบ

ที่สร้างขึ้นใหม่และองค์ประกอบรายละเอียดจะถูกผนวกเข้ากับเนื้อหาเอกสารโดยใช้เมธอด appendChild() และส่งผ่านองค์ประกอบที่จะผนวกเป็นพารามิเตอร์ -

function detCreate() {  
   var et = document.createElement("DETAILS");  
   var sum=document.createElement("SUMMARY");  
   var sumText=document.createTextNode("Eiffel Tower");  
   var txt = document.createTextNode("It is one of the most popular monument in the world");    
   sum.appendChild(sumText);  
   et.appendChild(txt);  
   document.body.appendChild(sum);  
   document.body.appendChild(et);
}