HTML Object แทนอิลิเมนต์ <html> รากของเอกสาร ใช้เข้าถึงเนื้อหาทั้งหมดภายในแท็ก html รูปแบบการเข้าถึง (Syntax) document.getElementsByTagName(HTML) ตัวอย่างการใช้งาน ดึงเนื้อหาทั้งหมดภายในแท็ก <html> แสดงผลเมื่อคลิกปุ่ม: <!DOCTYPE html> <html> <head> <style>

HTML DOM IFrame Object แทนอิลิเมนต์ <iframe> ใช้สร้างและควบคุม iframe ผ่าน JavaScript รูปแบบการสร้าง (Syntax) document.createElement(IFRAME); คุณสมบัติหลัก (Properties) คุณสมบัติคำอธิบาย contentDocumentคืนค่า Document object ที่สร้างโดย iframe content

HTML DOM Image Object แทนอิลิเมนต์ <img> ในเอกสาร HTML ใช้สร้าง จัดการ และเข้าถึงคุณสมบัติของรูปภาพได้ผ่าน JavaScript รูปแบบการสร้าง (Syntax) document.createElement(IMG); คุณสมบัติหลัก (Properties) คุณสมบัติคำอธิบาย altคืนค่าและแก้ไขแอตทริบิวต์ alt ของรูปภาพ

เมื่อสร้างเอกสาร HTML แท็ก DOCTYPE จะต้องอยู่บรรทัดแรกของเอกสารเสมอ เพื่อบอกเบราว์เซอร์ว่าเอกสารนี้เขียนด้วยรุ่น HTML ใด ไม่สนใจตัวพิมพ์เล็กหรือใหญ่ (case-insensitive) ตัวอย่างพื้นฐาน <!DOCTYPE html> <html> <head> <title>หัวข้อเอกสาร</title> </head> <body&

การฝังวิดีโอจาก YouTube ลงในหน้าเว็บเป็นเรื่องง่ายมาก โดยใช้การฝัง (embed) วิดีโอเข้าไปในโค้ด HTML ขั้นตอนการดึง Video ID ขั้นตอนที่ 1: ไปที่หน้าวิดีโอ YouTube ที่ต้องการ คลิกขวาที่วิดีโอ และเลือก Stats for nerds (สถิติสำหรับนักวิชาการ) จะปรากฏกล่องโต้ตอบแสดงข้อมูลสถิติของวิดีโอ ซึ่งจะเห็น Video I

คุณสมบัติ type ของ HTMLObjectElement (<object>) ใช้ **อ่านหรือตั้งค่า** MIME type ของเนื้อหาที่ฝังอยู่ เช่น application/pdf, image/svg+xml, video/mp4 รูปแบบการใช้งาน // อ่านค่า const mimeType = objectElement.type; // ตั้งค่า objectElement.type = application/pdf; MIME Types ที่พบบ่อย

คุณสมบัติ paddingLeft ของ HTMLElement.style ใช้ **อ่านหรือตั้งค่า** padding ด้านซ้ายขององค์ประกอบ เป็นส่วนหนึ่งของ CSS Box Model รูปแบบการใช้งาน // อ่านค่า (คืนค่า string พร้อมหน่วย เช่น 20px) const leftPadding = element.style.paddingLeft; // ตั้งค่า element.style.paddingLeft = 20px; element.style

คุณสมบัติ id ของ HTMLElement ใช้ **อ่านหรือตั้งค่า** ค่า ID ขององค์ประกอบ HTML ID ต้องเป็นค่าเฉพาะ (unique) ในหน้าเว็บเดียวกัน รูปแบบการใช้งาน // อ่านค่า const elementId = element.id; // ตั้งค่า element.id = newUniqueId; ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <head> <styl

คุณสมบัติ innerHTML ของ HTMLElement ใช้ **อ่านหรือตั้งค่า HTML markup** ภายในองค์ประกอบ รวมถึงแท็ก ย่อหน้า และเนื้อหาทั้งหมด ความแตกต่าง innerHTML vs innerText vs textContent คุณสมบัติ อ่านได้ เขียนได้ ความปลอดภัย innerHTML HTML string ทั

คุณสมบัติ innerText ของ HTMLElement ใช้ **อ่านหรือตั้งค่าข้อความที่มองเห็นได้** ภายในองค์ประกอบ HTML แตกต่างจาก innerHTML ที่รวมแท็ก HTML ด้วย ความแตกต่าง innerText vs innerHTML vs textContent คุณสมบัติ คืนค่า ตั้งค่า ประสิทธิภาพ innerText

คุณสมบัติ type ของ HTMLInputElement (เฉพาะ type button/submit/reset) ใช้ **อ่านประเภทของปุ่ม** เป็นค่า read-only ไม่สามารถเปลี่ยนได้ผ่าน JavaScript (ต้องเปลี่ยน attribute โดยตรง) รูปแบบการใช้งาน // อ่านค่าเท่านั้น (read-only) const buttonType = inputElement.type; // ผลลัพธ์: submit | button | reset

คุณสมบัติ value ของ HTMLInputElement (type=button/submit/reset) ใช้ **อ่านหรือเปลี่ยนข้อความที่แสดงบนปุ่ม** (button label) และค่าที่จะส่งไปกับฟอร์มเมื่อ submit รูปแบบการใช้งาน (Syntax) // อ่านค่า const btnValue = buttonElement.value; // ตั้งค่า buttonElement.value = ข้อความใหม่; ตัวอย่างการใช้งาน

คุณสมบัติ name ของ HTMLButtonElement หรือ HTMLInputElement (type=button/submit/reset) ใช้ **อ่านหรือเปลี่ยนค่า** ของแอตทริบิวต์ name ซึ่งใช้ระบุชื่อของปุ่มเมื่อส่งฟอร์ม รูปแบบการใช้งาน (Syntax) // อ่านค่า const buttonName = buttonElement.name; // ตั้งค่า buttonElement.name = newName; ตัวอย่างการใ

เมธอด stroke() ของ Canvas 2D Context ใช้ **วาดเส้นขอบ (outline)** ของเส้นทาง (path) ที่สร้างขึ้นด้วย moveTo(), lineTo(), arc(), bezierCurveTo() เป็นต้น รูปแบบการใช้งาน ctx.stroke(); // วาดเส้นขอบของ path ปัจจุบัน คุณสมบัติที่เกี่ยวข้องกับการวาดเส้น (Stroke Styles) คุณสมบัติ คำ

วัตถุ (Object) HTMLAddressElement ใช้แทนแท็ก <address> ใน DOM สามารถสร้าง เข้าถึง และจัดการได้ผ่าน JavaScript การสร้าง address element ด้วย JavaScript // สร้าง element const address = document.createElement(address); // เพิ่มเนื้อหา address.textContent = ABC Inc, P 120, Ontario, Canada; //

คุณสมบัติ shadowOffsetY ของ Canvas 2D Context ใช้กำหนด **ระยะห่างแนวตั้ง (vertical distance)** ของเงาจากรูปทรง หน่วยเป็นพิกเซล ค่าบวก = เงาลงด้านล่าง, ค่าลบ = เงาขึ้นด้านบน รูปแบบการใช้งาน ctx.shadowOffsetY = number; // พิกเซล บวกหรือลบได้ คุณสมบัติเงาครบชุด (Shadow Properties) คุณส

แอตทริบิวต์ disabled ของ <optgroup> ใช้ **ปิดใช้งานกลุ่มตัวเลือกทั้งกลุ่ม** ใน <select> ทำให้ <option> ทุกตัวในกลุ่มนั้นไม่สามารถเลือกได้ รูปแบบการใช้งาน <optgroup label=ชื่อกลุ่ม disabled> <option value=1>ตัวเลือก 1</option> <option value=2>ตัวเลือก 2&

คุณสมบัติ lineHeight ของ HTMLElement.style ใช้กำหนดหรืออ่านความสูงของบรรทัด (line height) คือระยะห่างระหว่างบรรทัดของข้อความ ในหน่วยต่างๆ รูปแบบการใช้งาน (Syntax) // อ่านค่า const currentLineHeight = element.style.lineHeight; // ตั้งค่า element.style.lineHeight = normal | number | length | % | ini

คุณสมบัติ shadowBlur ของ Canvas 2D Context ใช้กำหนดระดับความเบลอ (blur level) ของเงา ค่าเริ่มต้นคือ 0 (ไม่มีการเบลอ คมชัด) ค่าที่มากขึ้น = เงาเบลอมากขึ้น (นุ่มนวลกว่า) รูปแบบการใช้งาน = 0 คุณสมบัติเงาทั้งหมด (Shadow Properties) คุณสมบัติ คำอธิบาย ค่าเริ่มต้น

แอตทริบิวต์ required ของ <textarea> ใช้ระบุว่าฟิลด์นี้ **ต้องกรอกข้อมูลก่อนส่งฟอร์ม** หากผู้ใช้คลิก Submit โดยไม่ได้กรอก เบราว์เซอร์จะแสดงข้อความเตือนและยกเลิกการส่งฟอร์มโดยอัตโนมัติ (Client-side validation) รูปแบบการใช้งาน <textarea rows=6 cols=70 required></textarea> <!-- หรื