โพสต์นี้จะอธิบายการใช้แอตทริบิวต์ข้อมูลใน JavaScript
วิธีการใช้คุณสมบัติข้อมูลใน JavaScript?
ในจาวาสคริปต์ “ ข้อมูล ” ใช้สำหรับจัดเก็บข้อมูลพิเศษที่ไม่แสดงบนหน้าเว็บ ข้อมูลนี้สามารถเขียน เข้าถึง อ่าน และเปลี่ยนแปลงได้แบบไดนามิกตามความต้องการของผู้ใช้ ส่วนนี้ปฏิบัติงานที่กล่าวถึงในทางปฏิบัติเกี่ยวกับคุณลักษณะของข้อมูล
ไวยากรณ์
< ข้อมูลองค์ประกอบ -*= 'คุณค่าบางอย่าง' >
ในไวยากรณ์ข้างต้น:
- “ องค์ประกอบ ” หมายถึงองค์ประกอบ HTML ที่ใช้แอตทริบิวต์ข้อมูล
- “ ข้อมูล-* ” หมายถึงแอตทริบิวต์ข้อมูลหลายรายการ (*) ที่เริ่มต้นด้วยคำนำหน้า (data-) เช่น คีย์เวิร์ด data ตามด้วยยัติภังค์
- ค่าบางอย่าง: มันระบุค่าของแอตทริบิวต์ข้อมูล
ตอนนี้ ใช้ไวยากรณ์ข้างต้นเพื่อสร้างแอตทริบิวต์ข้อมูล
สร้างแอตทริบิวต์ข้อมูล
< รหัสดิวิชั่น = 'มายดิฟ' ข้อมูล - - ชื่อ = “อัลวิน” ข้อมูล - - อายุ = '40' ข้อมูล - - เพศ = 'ชาย' > กอง >รหัส HTML หนึ่งบรรทัดที่ระบุจะสร้างดังต่อไปนี้ “ ชื่อข้อมูล , ' ยุคข้อมูล ', และ ' ข้อมูล-เพศ ” แอตทริบิวต์ภายในองค์ประกอบ “div” ซึ่งมีรหัสเป็น “myDiv”
มาอ่าน/เข้าถึงแอตทริบิวต์ข้อมูลที่สร้างขึ้นกันดีกว่า
ตัวอย่างที่ 1: อ่าน/เข้าถึงแอตทริบิวต์ข้อมูลโดยใช้คุณสมบัติ 'ชุดข้อมูล'
ตัวอย่างนี้ใช้คุณสมบัติ 'ชุดข้อมูล' เพื่ออ่าน/เข้าถึงแอตทริบิวต์ข้อมูลเฉพาะหรือทั้งหมด
ก่อนอื่นให้ดูที่ “ ปุ่ม ” องค์ประกอบที่เรียกว่า “ jsFunc() ” เมื่อมีความเกี่ยวข้อง” เมื่อคลิก ” เหตุการณ์จะเกิดขึ้นเมื่อคลิกปุ่ม:
< ปุ่มบนคลิก = 'jsFunc()' > เข้าถึงแอตทริบิวต์ข้อมูล ปุ่ม >ตอนนี้ ดำเนินการต่อไปยังคำจำกัดความ “jsFunc()”:
< สคริปต์ >ฟังก์ชัน jsFunc ( ) {
ค่าคงที่ องค์ประกอบ = เอกสาร. รับ ElementById ( 'มายดิฟ' ) ;
คอนโซล บันทึก ( องค์ประกอบ. ชุดข้อมูล ) ;
}
สคริปต์ >
ในบรรทัดโค้ดด้านบน:
- “ jsFunc() ” ก่อนอื่นให้ประกาศตัวแปร “องค์ประกอบ” ที่ใช้ “ document.getElementById() ” เพื่อเข้าถึงองค์ประกอบ div ที่เพิ่มเข้ามาผ่านรหัส “myDiv”
- ต่อไปจะใช้ ' console.log() ” วิธีการที่จะใช้ “ ชุดข้อมูล ” เพื่อเข้าถึงแอตทริบิวต์ข้อมูลขององค์ประกอบ div ที่เข้าถึงและแสดงไว้ในเว็บคอนโซล
เอาท์พุต
กด F12 เพื่อเปิดเว็บคอนโซล:
จะเห็นได้ว่าเมื่อคลิกที่ปุ่มที่กำหนดคอนโซลจะแสดง “ DOMStringMap ” ที่มีแอตทริบิวต์ข้อมูลทั้งหมดขององค์ประกอบ div
เข้าถึงค่าเฉพาะ
หากผู้ใช้ต้องการเข้าถึงแอตทริบิวต์ข้อมูลเฉพาะ ให้ระบุชื่อด้วยคุณสมบัติ 'ชุดข้อมูล' ดังนี้:
< สคริปต์ >ฟังก์ชั่นรับ ( ) {
ค่าคงที่ องค์ประกอบ = เอกสาร. รับ ElementById ( 'มายดิฟ' ) ;
คอนโซล บันทึก ( องค์ประกอบ. ชุดข้อมูล . ชื่อ ) ;
}
สคริปต์ >
ในขณะนี้ แอตทริบิวต์ข้อมูล 'ชื่อ' สามารถเข้าถึงได้โดยใช้คำสั่ง ' ชุดข้อมูล ' คุณสมบัติ.
เอาท์พุต
จะเห็นได้ว่าคอนโซลแสดงเฉพาะค่าของแอตทริบิวต์ข้อมูลที่ระบุเมื่อคลิกปุ่มเท่านั้น
ตัวอย่างที่ 2: อ่าน/เข้าถึงแอตทริบิวต์ข้อมูลโดยใช้เมธอด 'getAttribute()'
ตัวอย่างนี้ใช้เมธอด 'getAttribute()' เพื่ออ่าน/เข้าถึงแอตทริบิวต์ข้อมูล
ในสถานการณ์สมมตินี้ องค์ประกอบปุ่มของตัวอย่างแรกยังรวมอยู่ด้วย:
< ปุ่มบนคลิก = 'jsFunc()' > เข้าถึงแอตทริบิวต์ข้อมูล ปุ่ม >มาดูการทำงานของเมธอด “getAttribute()” กัน:
< สคริปต์ >ฟังก์ชัน jsFunc ( ) {
ค่าคงที่ องค์ประกอบ = เอกสาร. รับ ElementById ( 'มายดิฟ' ) ;
คอนโซล บันทึก ( องค์ประกอบ. getAttribute ( 'ชื่อข้อมูล' ) ) ;
คอนโซล บันทึก ( องค์ประกอบ. getAttribute ( 'ยุคข้อมูล' ) ) ;
คอนโซล บันทึก ( องค์ประกอบ. getAttribute ( 'ข้อมูลเพศ' ) ) ;
}
สคริปต์ >
ในข้อมูลโค้ดข้างต้น:
- ตัวแปร “องค์ประกอบ” ใช้ “ document.getElementById() ” เพื่อเข้าถึงองค์ประกอบ div ที่เพิ่มเข้ามาโดยใช้รหัส “myDiv”
- ต่อไป “ console.log() ” วิธีการใช้ “ รับแอตทริบิวต์() ” เพื่อรับค่าแอตทริบิวต์ 'data' ที่ระบุขององค์ประกอบ div ที่ดึงข้อมูลมา จากนั้นแสดงในเว็บคอนโซล
- มีดำเนินการงานเดียวกันเพื่อเข้าถึงแอตทริบิวต์ข้อมูลที่ระบุที่เหลืออยู่
บันทึก: เมธอด “getAttribute()” ระบุแอตทริบิวต์ data โดยมีคำนำหน้า “data” ตามด้วยยัติภังค์ (-) เช่น (data-) ที่ไม่จำเป็นต้องใช้ในขณะที่ใช้คุณสมบัติ “dataset()”
เอาท์พุต
ผลลัพธ์ข้างต้นจะแสดงค่าแอตทริบิวต์ข้อมูลที่ระบุทั้งหมดเมื่อคลิกปุ่ม
ตัวอย่างที่ 3: เขียนแอตทริบิวต์ข้อมูลโดยใช้คุณสมบัติ 'ชุดข้อมูล'
ตัวอย่างนี้เขียนแอตทริบิวต์ข้อมูลโดยใช้คุณสมบัติ 'ชุดข้อมูล'
เนื้อหาขององค์ประกอบปุ่มมีการเปลี่ยนแปลงตามสถานการณ์ปัจจุบัน:
< ปุ่มบนคลิก = 'jsFunc()' > เขียนแอตทริบิวต์ข้อมูล ปุ่ม >ตอนนี้ ให้เขียนแอตทริบิวต์ข้อมูลใหม่ในองค์ประกอบ div ที่เพิ่ม:
< สคริปต์ >ฟังก์ชัน jsFunc ( ) {
ค่าคงที่ องค์ประกอบ = เอกสาร. รับ ElementById ( 'มายดิฟ' ) ;
องค์ประกอบ. ชุดข้อมูล . รหัส = 'บุคคล'
คอนโซล บันทึก ( องค์ประกอบ. ชุดข้อมูล ) ;
}
สคริปต์ >
ในบล็อคโค้ดด้านบน:
- “ ชุดข้อมูล ” คุณสมบัติเขียนชื่อแอตทริบิวต์ข้อมูลใหม่ “id” ด้วยค่าสตริงที่ระบุ
- ต่อไป “ คอนโซล.log() ” ใช้คุณสมบัติ “ชุดข้อมูล” เพื่อแสดงอินเทอร์เฟซ “DOMStringMap” ที่มีแอตทริบิวต์ข้อมูลที่เขียนใหม่บนเว็บคอนโซล
เอาท์พุต
ที่นี่ คอนโซลจะแสดง 'DOMStringMap' ที่มีแอตทริบิวต์ข้อมูลใหม่ 'id' ที่เขียนโดยใช้คุณสมบัติ 'ชุดข้อมูล'
ตัวอย่างที่ 4: อัปเดตค่าแอตทริบิวต์ข้อมูล
ตัวอย่างนี้อัปเดตค่าที่มีอยู่ของแอตทริบิวต์ข้อมูลเฉพาะด้วยความช่วยเหลือของคุณสมบัติ 'ชุดข้อมูล'
ข้อความขององค์ประกอบปุ่มมีการเปลี่ยนแปลงตามสถานการณ์ที่กำหนด:
< ปุ่มบนคลิก = 'jsFunc()' > อัปเดตแอตทริบิวต์ข้อมูล ปุ่ม >ตอนนี้ไปยังส่วน JavaScript:
< สคริปต์ >ฟังก์ชัน jsFunc ( ) {
ค่าคงที่ องค์ประกอบ = เอกสาร. รับ ElementById ( 'มายดิฟ' ) ;
องค์ประกอบ. ชุดข้อมูล . ชื่อ = 'จอห์น'
คอนโซล บันทึก ( องค์ประกอบ. ชุดข้อมูล . ชื่อ ) ;
}
สคริปต์ >
ในบล็อกโค้ดข้างต้น ค่าแอตทริบิวต์ข้อมูล 'ชื่อ' ที่ระบุจะได้รับการอัปเดตด้วยความช่วยเหลือของ ' ชุดข้อมูล ' คุณสมบัติ.
เอาท์พุต
คอนโซลจะแสดงค่าที่อัปเดตของแอตทริบิวต์ข้อมูลที่ระบุเมื่อคลิกปุ่ม
ตัวอย่างที่ 5: ลบแอตทริบิวต์ข้อมูล
ตัวอย่างนี้จะลบแอตทริบิวต์ข้อมูลเฉพาะโดยใช้คำสำคัญ 'ลบ'
ข้อความขององค์ประกอบปุ่มมีการเปลี่ยนแปลงตามความต้องการ:
< ปุ่มบนคลิก = 'jsFunc()' > ลบแอตทริบิวต์ข้อมูล ปุ่ม >ตอนนี้ทำตามบล็อกโค้ด JavaScript:
< สคริปต์ >ฟังก์ชัน jsFunc ( ) {
ค่าคงที่ องค์ประกอบ = เอกสาร. รับ ElementById ( 'มายดิฟ' ) ;
ลบองค์ประกอบ ชุดข้อมูล . อายุ ;
คอนโซล บันทึก ( องค์ประกอบ. ชุดข้อมูล . อายุ ) ;
}
สคริปต์ >
ข้อมูลโค้ดด้านบนระบุ ' ลบ ” ที่มีคุณสมบัติ “ชุดข้อมูล” เพื่อลบแอตทริบิวต์ข้อมูลที่เข้าถึง
เอาท์พุต
สังเกตว่าคอนโซลแสดง “ ไม่ได้กำหนด ” เมื่อคลิกปุ่มเพื่อยืนยันอย่างชัดเจนว่าแอตทริบิวต์ข้อมูลที่เข้าถึงถูกลบไปแล้ว
บทสรุป
ใน JavaScript คุณลักษณะของข้อมูลสามารถใช้ได้หลายวิธี เช่น อ่าน เข้าถึง เขียน อัปเดต และลบออกตามข้อกำหนด งานทั้งหมดนี้สามารถทำได้ด้วยความช่วยเหลือในตัว “ ชุดข้อมูล ' คุณสมบัติ. อย่างไรก็ตาม ผู้ใช้ยังสามารถเข้าถึงแอตทริบิวต์ข้อมูลได้ทีละรายการด้วยความช่วยเหลือของ ' รับแอตทริบิวต์() ' วิธี. โพสต์นี้ได้อธิบายการใช้งานแอตทริบิวต์ข้อมูลใน JavaScript ในทางปฏิบัติแล้ว