ออบเจ็กต์ปุ่ม HTML DOM เชื่อมโยงกับองค์ประกอบ
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติของวัตถุปุ่ม HTML DOM -
| ทรัพย์สิน | คำอธิบาย |
|---|---|
| ออโต้โฟกัส | การตั้งค่าหรือย้อนกลับว่าปุ่มจะโฟกัสอัตโนมัติหรือไม่เมื่อหน้าเว็บโหลด |
| ปิดการใช้งาน | การตั้งค่าหรือย้อนกลับว่าปุ่มที่กำหนดถูกปิดใช้งานหรือไม่ |
| แบบฟอร์ม | การคืนค่าการอ้างอิงของแบบฟอร์มที่มีปุ่ม |
| formAction | การตั้งค่าหรือคืนค่าแอตทริบิวต์ formAction ของปุ่ม |
| formEnctype | การตั้งค่าหรือคืนค่าแอตทริบิวต์ formEnctype ของปุ่ม |
| formMethod | การตั้งค่าหรือคืนค่าแอตทริบิวต์ formMethod ของปุ่ม |
| formNoValidate | การตั้งค่าหรือส่งคืนว่าข้อมูลในแบบฟอร์มควรได้รับการตรวจสอบความถูกต้องหรือไม่ในการส่ง |
| formTarget | การตั้งค่าหรือคืนค่าแอตทริบิวต์ formTarget ของปุ่ม |
| ชื่อ | การตั้งค่าหรือคืนค่าแอตทริบิวต์ชื่อของปุ่ม |
| พิมพ์ | การตั้งค่าหรือส่งคืนประเภทปุ่ม |
| ค่า | การตั้งค่าหรือคืนค่าปุ่ม |
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การสร้างวัตถุปุ่ม -
var x = document.createElement("BUTTON"); ตัวอย่าง
ให้เราดูตัวอย่างของวัตถุปุ่ม HTML DOM -
<!DOCTYPE html>
<html>
<body>
<p>Click on the below button to create a BUTTON element</p>
<button onclick="buttonCreate()">CREATE</button>
<br><br>
<script>
function buttonCreate() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("NEW BUTTON");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกสร้าง -
ในตัวอย่างข้างต้น −
ขั้นแรกเราได้สร้างองค์ประกอบปุ่ม CREATE ปุ่มนี้จะเรียกใช้ฟังก์ชัน buttonCreate() เมื่อคลิก
<button onclick="buttonCreate()">CREATE</button>
เมธอด buttonCreate() ใช้เมธอด createElement() ของอ็อบเจ็กต์เอกสารเพื่อสร้างองค์ประกอบปุ่มและกำหนดให้กับตัวแปร x โหนดข้อความถูกสร้างขึ้นโดยใช้องค์ประกอบสร้างและกำหนดให้กับตัวแปร t จากนั้นโหนดข้อความ t จะถูกผนวกเข้ากับปุ่มโดยใช้วิธี appendchild จากนั้นปุ่มพร้อมกับโหนดข้อความลูกจะถูกผนวกเข้ากับเนื้อหาของเอกสารโดยใช้เมธอด document.body.appendChild()
function buttonCreate() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("NEW BUTTON");
x.appendChild(t);
document.body.appendChild(x);
} 