ออบเจ็กต์ Blockquote ใน HTML DOM

ออบเจ็กต์ Blockquote (Blockquote Object)

ออบเจ็กต์ Blockquote ใน HTML DOM แทนอิลิเมนต์ HTML <blockquote> ใช้สำหรับยกข้อความจากแหล่งอื่น (quotation) ต่างจากแท็ก <q> (inline quotation) ที่ <blockquote> เป็น block-level element และไม่เพิ่มเครื่องหมายคำพูดอัตโนมัติ เราสามารถสร้างและเข้าถึงคุณสมบัติของ <blockquote> ได้ด้วย blockquote object

ไวยากรณ์ (Syntax)

การสร้าง blockquote object

var x = document.createElement("BLOCKQUOTE");

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการสร้าง <blockquote> แบบไดนามิกพร้อมแอตทริบิวต์ cite

<!DOCTYPE html>
<html>
<body>
    <p>Click on the below button to create a blockquote object</p>
    <button onclick="createBloc()">CREATE</button>
    <script>
        function createBloc() {
            var x = document.createElement("BLOCKQUOTE");
            var t = document.createTextNode("This is a random block quote. This is some sample text.");
            x.setAttribute("cite", "https://www.examplesite.com");
            x.setAttribute("id", "myQuote");
            x.appendChild(t);
            document.body.appendChild(x);
        }
    </script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: แสดงปุ่ม CREATE เท่านั้น

คลิก CREATE: สร้าง blockquote ใหม่พร้อมข้อความและ cite attribute

คำอธิบายโค้ด

1. ปุ่ม CREATE: เรียกฟังก์ชัน createBloc()
2. ฟังก์ชัน createBloc():

   function createBloc() {
       var x = document.createElement("BLOCKQUOTE");
       var t = document.createTextNode("This is a random block quote. This is some sample text.");
       x.setAttribute("cite", "https://www.examplesite.com");
       x.setAttribute("id", "myQuote");
       x.appendChild(t);
       document.body.appendChild(x);
   }

คำอธิบายเพิ่มเติม

• <blockquote> เป็น block-level element ใช้สำหรับยกข้อความยาว (multi-line)
• <q> เป็น inline element ใช้สำหรับยกข้อความสั้น - browser จะเพิ่มเครื่องหมายคำพูดอัตโนมัติ
• แอตทริบิวต์ cite ระบุ URL แหล่งที่มาของคำคำพูด (สำหรับ screen readers, search engines)
• ค่า cite ไม่แสดงผลบนหน้าจอโดยตรง แต่เข้าถึงได้ผ่าน DOM
• มักใช้ร่วมกับ <cite> element (ต่างจาก attribute cite) สำหรับแสดงแหล่งที่มาอ่านได้
• CSS เริ่มต้นของ browser: margin ซ้าย-ขวา, margin บน-ล่าง