โดม” รายการโทเค็น ” มีคุณสมบัติหรือวิธีการมากมายที่ผู้ใช้ปลายทางสามารถเข้าถึงได้ตามความต้องการ คุณสมบัติและวิธีการที่ระบุไว้ในรายการนี้ดำเนินการเฉพาะกับชุดข้อมูลที่ให้มาและส่งกลับผลลัพธ์ตามนั้น มันเหมือนกับอาร์เรย์มากกว่าเพราะมันมีสมาชิกหลายตัวที่สามารถเลือกได้โดยดัชนีของพวกเขาและเช่นเดียวกับอาร์เรย์ดัชนีแรกคือ “ 0 '. แต่คุณไม่สามารถใช้วิธีการเช่น “ ป๊อป()”, “กด()” หรือ “เข้าร่วม() '.
บล็อกนี้จะอธิบายการทำงานของ HTML DOMTokenList Objects ด้วย JavaScript
วิธีทำงานกับวัตถุ JavaScript HTML DOMTokenList
HTML DOMTokenList นั้นไม่มีอะไรในตัวมันเอง และคุณค่าของมันนั้นก็เนื่องมาจากคุณสมบัติและวิธีการที่มีอยู่ในนั้น เรามาดูรายละเอียดคุณสมบัติและวิธีการเหล่านี้พร้อมกับการใช้งานที่เหมาะสมกัน
วิธีที่ 1: เพิ่ม () วิธีการ
“ เพิ่ม ()” แนบหรือกำหนดคลาส คุณสมบัติ หรือโทเค็นอย่างง่ายใหม่ด้วยองค์ประกอบที่เลือก ไวยากรณ์ของมันระบุไว้ด้านล่าง:
htmlองค์ประกอบ เพิ่ม ( oneOrMoreToken )
การใช้งานจะดำเนินการผ่านรหัสต่อไปนี้:
< ศีรษะ >
< สไตล์ >
.ขนาดตัวอักษร{
ขนาดตัวอักษร: ใหญ่;
}
.สี{
สีพื้นหลัง: cadetblue;
สี: ควันขาว;
}
< / สไตล์ >
< / ศีรษะ >
< ร่างกาย >
< h1 สไตล์ = 'สี: นักเรียนนายร้อยสีฟ้า;' > ลินุกซ์ < / h1 >
< ปุ่ม เมื่อคลิก = 'การกระทำ()' > บวก < / ปุ่ม >
< พี > กดปุ่มด้านบนเพื่อใช้สไตล์ < / พี >
< กอง รหัส = 'เลือก' >
< พี > ฉันถูกเลือกข้อความ < / พี >
< / กอง >
< สคริปต์ >
ฟังก์ชั่นการกระทำ () {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / สคริปต์ >
< / ร่างกาย >
คำอธิบายของโค้ดข้างต้นมีดังนี้:
- ขั้นแรก เลือกคลาส CSS สองคลาส “ ขนาดตัวอักษร ” และ “สี” และกำหนดคุณสมบัติ CSS แบบสุ่มเช่น “ ขนาดตัวอักษร”, “สีพื้นหลัง” และ “สี” '.
- จากนั้นสร้างปุ่มโดยใช้เครื่องหมาย “< ปุ่ม >” ซึ่งเรียกใช้แท็ก “ การกระทำ ()” โดยใช้ฟังก์ชัน “ เมื่อคลิก ” ผู้ฟังเหตุการณ์
- นอกจากนี้ให้สร้างผู้ปกครอง” กอง ” องค์ประกอบและกำหนดรหัสเป็น “ เลือกแล้ว ” และใส่ข้อมูลจำลองเข้าไปข้างใน
- หลังจากนั้น ให้กำหนด “ การกระทำ ()” และจัดเก็บการอ้างอิงขององค์ประกอบที่เลือกโดยการเข้าถึงรหัสเฉพาะของมัน
- สุดท้ายให้ใช้ ' คลาสลิสต์ ” คุณสมบัติในการกำหนดคลาสและแนบ “ เพิ่ม ()' วิธี. จากนั้นส่งคลาส CSS ภายในวงเล็บเมธอดนี้ และจะใช้คลาสเหล่านี้กับองค์ประกอบที่เลือก
ผลลัพธ์หลังจากการคอมไพล์โค้ดข้างต้นจะถูกสร้างขึ้นเป็น:
gif ข้างต้นยืนยันว่าคลาส CSS ได้รับการกำหนดให้กับองค์ประกอบที่เลือกผ่านทาง “ เพิ่ม ()' วิธี.
วิธีที่ 2: วิธีลบ ()
วิธีนี้จะลบคลาสหรือรหัสเฉพาะออกจากองค์ประกอบที่เลือกตั้งแต่หนึ่งรายการขึ้นไปตามโค้ดด้านล่าง:
< ศีรษะ >< สไตล์ >
.ขนาดตัวอักษร {
แบบอักษร- ขนาด : ใหญ่;
}
. สี {
พื้นหลัง- สี : นักเรียนนายร้อยบลู;
สี : ควันขาว;
}
< / สไตล์ >
< / ศีรษะ >
< ร่างกาย >
< h1 สไตล์ = 'สี: นักเรียนนายร้อยสีฟ้า;' > ลินุกซ์คำแนะนำ < / h1 >
< ปุ่ม เมื่อคลิก = 'การกระทำ()' >ตัวบวก< / ปุ่ม >
< พี >กดปุ่มด้านบนเพื่อใช้การจัดสไตล์< / พี >
< กอง รหัส = 'เลือก' ระดับ = 'สีขนาดตัวอักษร' >
< พี >ฉันเป็น เลือกแล้ว ข้อความ .< / พี >
< / กอง >
< สคริปต์ >
การทำงาน การกระทำ ( ) {
document.getElementById ( 'เลือก' ) .classList.remove ( 'สี' ) ;
}
< / สคริปต์ >
< / ร่างกาย >
คำอธิบายของโค้ดข้างต้นเป็นดังนี้:
- เริ่มแรกจะใช้โค้ดที่อธิบายไว้ในโค้ดด้านบนนี้เป็นตัวอย่าง
- ที่นี่ทั้ง “ สี ' และ ' ขนาดตัวอักษร ” คลาสถูกกำหนดโดยตรงให้กับองค์ประกอบที่เลือก
- หลังจากนั้นภายใน” การกระทำ ()” ฟังก์ชันที่ถูกเรียกใช้โดย “ เมื่อคลิก ” ผู้ฟังเหตุการณ์ “ ลบ ()” ใช้วิธีการโทเค็น
- วิธีนี้จะรับคลาสหนึ่งหรือหลายคลาสซึ่งจะถูกลบออกจากองค์ประกอบที่เลือก ในกรณีของเรา “ สี ” คลาสจะถูกลบออกจากองค์ประกอบ HTML ที่เลือก
ผลลัพธ์สำหรับโค้ดข้างต้นจะแสดงเป็น:
ผลลัพธ์ข้างต้นแสดงให้เห็นว่าคลาส CSS เฉพาะได้ถูกลบออกจากองค์ประกอบที่เลือกโดยใช้วิธี “remove()”
วิธีที่ 3: วิธีการสลับ ()
“ สลับ ()” วิธีการคือการรวมกันของทั้งสอง “ เพิ่ม ()' และ ' ลบ ()” วิธีการ ขั้นแรกให้กำหนดคลาส CSS ให้กับองค์ประกอบ HTML ที่เลือก จากนั้นจึงลบออกตามการกระทำของผู้ใช้
< html >< ศีรษะ >
< สไตล์ >
.ขนาดตัวอักษร {
แบบอักษร- ขนาด : xx-ใหญ่;
}
. สี {
พื้นหลัง- สี : นักเรียนนายร้อยบลู;
สี : ควันขาว;
}
< / สไตล์ >
< / ศีรษะ >
< ร่างกาย >
< h1 สไตล์ = 'สี: นักเรียนนายร้อยสีฟ้า;' > ลินุกซ์คำแนะนำ < / h1 >
< ปุ่ม เมื่อคลิก = 'การกระทำ()' >ตัวบวก< / ปุ่ม >
< พี >กดปุ่มด้านบนเพื่อใช้การจัดสไตล์< / พี >
< กอง รหัส = 'เลือก' >
< พี >ฉันเป็น เลือกแล้ว ข้อความ .< / พี >
< / กอง >
< สคริปต์ >
การทำงาน การกระทำ ( ) {
document.getElementById ( 'เลือก' ) .classList.toggle ( 'ขนาดตัวอักษร' ) ;
}
< / สคริปต์ >
< / ร่างกาย >
< / html >
คำอธิบายของโค้ดข้างต้นระบุไว้ด้านล่าง:
- โปรแกรมเดียวกันนี้ใช้ตามที่ใช้ในหัวข้อข้างต้นเท่านั้น “ สลับ ()” วิธีการถูกแทนที่ด้วย “ ลบ ()' วิธี.
เมื่อสิ้นสุดขั้นตอนการคอมไพล์ ผลลัพธ์จะเป็นดังนี้:
ผลลัพธ์จะแสดงว่ามีการเพิ่มและลบคลาส CSS เฉพาะตามการกระทำของผู้ใช้
วิธีที่ 4: ประกอบด้วย () วิธีการ
“ ประกอบด้วย ()” วิธีการใช้เพื่อตรวจสอบความพร้อมใช้งานของคลาส CSS เฉพาะเหนือองค์ประกอบ HTML และการใช้งานมีการระบุไว้ด้านล่าง:
< สคริปต์ >การทำงาน การกระทำ ( ) {
ให้ x = เอกสาร. รับ ElementById ( 'เลือก' ) . คลาสลิสต์ . ประกอบด้วย ( 'ขนาดตัวอักษร' ) ;
เอกสาร. รับ ElementById ( 'ทดสอบ' ) . ภายในHTML = x ;
}
สคริปต์ >
ส่วน HTML และ CSS ยังคงเหมือนเดิม เฉพาะใน “< สคริปต์ >” เมธอด “contains()” จะถูกนำมาใช้กับองค์ประกอบที่เลือกเพื่อตรวจสอบว่า “ ขนาดตัวอักษร ” นำไปใช้กับองค์ประกอบนั้นหรือไม่ จากนั้นผลลัพธ์จะปรากฏบนหน้าเว็บในองค์ประกอบ HTML ที่มีรหัส “ ทดสอบ '.
หลังจากการคอมไพล์โค้ดข้างต้นแล้วหน้าเว็บจะปรากฏดังนี้:
ผลลัพธ์ที่ได้แสดงว่าค่าของ “ จริง ” ถูกส่งคืนซึ่งหมายความว่ามีการใช้คลาส CSS เฉพาะกับองค์ประกอบ HTML ที่เลือก
วิธีที่ 5: วิธีรายการ ()
“ รายการ ()” วิธีการเลือกโทเค็นหรือคลาส CSS ตามหมายเลขดัชนีเริ่มต้นจาก “ 0 ” ดังที่แสดงด้านล่าง:
< ร่างกาย >< สไตล์ h1 = 'สี: นักเรียนนายร้อยสีฟ้า;' > ลินุกซ์ h1 >
< ปุ่มบนคลิก = 'การกระทำ()' > ตัวตรวจสอบ ปุ่ม >
< พี > ซีเอสเอส ระดับ ซึ่งได้รับมอบหมายในเบื้องต้น , ได้รับการเรียกคืน : : พี >
< รหัส h3 = 'กรณีการใช้งาน' ระดับ = 'FirstCls วินาที Cls ThirdCls' > h3 >
< สคริปต์ >
การทำงาน การกระทำ ( ) {
ให้ demoList = เอกสาร. รับ ElementById ( 'กรณีการใช้งาน' ) . คลาสลิสต์ . รายการ ( 0 ) ;
เอกสาร. รับ ElementById ( 'กรณีการใช้งาน' ) . ภายในHTML = รายการสาธิต ;
}
สคริปต์ >
ร่างกาย >
คำอธิบายของรหัสข้างต้น:
- ขั้นแรก คลาส CSS หลายคลาสจะถูกกำหนดให้กับองค์ประกอบที่เราเลือกโดยมีรหัสเป็น “ ใช้กรณี ” และเมธอด “action()” ที่ถูกเรียกใช้ผ่านทาง “ เมื่อคลิก ' เหตุการณ์.
- ในฟังก์ชันนี้ “ รายการ ()” วิธีการที่มีดัชนีเป็น “ 0 ” ถูกแนบไปกับองค์ประกอบที่เลือก ผลลัพธ์จะถูกเก็บไว้ในตัวแปร “ รายการสาธิต ” ซึ่งพิมพ์บนหน้าเว็บโดยใช้เครื่องหมาย “ ภายในHTML ' คุณสมบัติ.
หลังจากสิ้นสุดการคอมไพล์ ผลลัพธ์ที่ได้จะเป็นดังนี้:
ผลลัพธ์จะแสดงชื่อของคลาส CSS ซึ่งใช้ในตอนแรกกับองค์ประกอบที่เลือกและได้รับการดึงข้อมูล
วิธีที่ 6: คุณสมบัติความยาว
“ ความยาว ” คุณสมบัติของ tokenList ส่งคืนจำนวนองค์ประกอบหรือคลาสที่กำหนดซึ่งใช้กับองค์ประกอบที่เลือก กระบวนการดำเนินการมีการระบุไว้ด้านล่าง:
< สคริปต์ >การทำงาน การกระทำ ( ) {
ปล่อยให้พวกเขาพังทลายลง = เอกสาร. รับ ElementById ( 'กรณีการใช้งาน' ) . คลาสลิสต์ . ความยาว ;
เอกสาร. รับ ElementById ( 'กรณีการใช้งาน' ) . ภายในHTML = รื้อถอน ;
}
สคริปต์ >
ในบล็อคโค้ดด้านบน:
- อันดับแรก “ ความยาว ” ทรัพย์สินแนบไปกับ “ คลาสลิสต์ ” คุณสมบัติเพื่อดึงจำนวนคลาสที่กำหนดให้กับองค์ประกอบที่เลือก
- ต่อไปผลลัพธ์ของคุณสมบัติจะถูกเก็บไว้ในตัวแปร “ รื้อถอน ” ซึ่งจะแสดงบนเว็บเพจบนองค์ประกอบที่มีรหัสเป็น “ ใช้กรณี '.
- รหัสที่เหลือยังคงเหมือนกับในส่วนด้านบน
ผลลัพธ์ที่สร้างขึ้นหลังจากการคอมไพล์มีการระบุไว้ด้านล่าง:
ผลลัพธ์จะส่งกลับคลาสที่ใช้กับองค์ประกอบ
วิธีที่ 7: วิธีการแทนที่ ()
“ แทนที่ ()” วิธีการคือวิธีที่รับพารามิเตอร์อย่างน้อยสองตัวและแทนที่พารามิเตอร์แรกด้วยพารามิเตอร์ตัวที่สองสำหรับองค์ประกอบที่เลือก ดังที่แสดงด้านล่าง:
< สคริปต์ >การทำงาน การกระทำ ( ) {
ให้ demoList = เอกสาร. รับ ElementById ( 'กรณีการใช้งาน' ) . คลาสลิสต์ . แทนที่ ( 'ขนาดตัวอักษร' , 'สี' ) ;
}
สคริปต์ >
ที่นี่ CSS “ ขนาดตัวอักษร ” คลาสถูกแทนที่ด้วย CSS “ สี ” คลาสสำหรับองค์ประกอบที่มีรหัสเป็น “ ใช้กรณี '. โค้ด HTML และ CSS ที่เหลือยังคงเหมือนกับในส่วนข้างต้น
หลังจากแก้ไข “ สคริปต์ ” ส่วนหนึ่งและรวบรวมไฟล์ HTML หลัก ผลลัพธ์จะมีลักษณะดังนี้:
ผลลัพธ์แสดงว่าคลาส CSS เฉพาะถูกแทนที่ด้วยคลาสอื่น
วิธีที่ 8: ทรัพย์สินมูลค่า
“ ค่า ” คุณสมบัติรายการโทเค็นดึงค่าที่ต้องการที่กำหนดให้กับองค์ประกอบ HTML ที่เลือก เมื่อมันถูกแนบติดกับ “ คลาสลิสต์ ” คุณสมบัติคลาสที่กำหนดให้กับองค์ประกอบที่เลือกจะถูกดึงออกมาดังแสดงด้านล่าง:
< สคริปต์ >การทำงาน การกระทำ ( ) {
ให้ demoVal = เอกสาร. รับ ElementById ( 'กรณีใช้' ) . คลาสลิสต์ . ค่า ;
เอกสาร. รับ ElementById ( 'พิมพ์' ) . ภายในHTML = สาธิตVal ;
}
สคริปต์ >
คำอธิบายของข้อมูลโค้ดที่ระบุไว้ข้างต้น:
- ข้างใน ' การกระทำ ()” ส่วนของฟังก์ชั่น “ ค่า ” คุณสมบัติแนบติดกับ “ คลาสลิสต์ ” คุณสมบัติเพื่อดึงคลาสที่กำหนดทั้งหมดขององค์ประกอบ HTML ที่เลือก
- จากนั้น ผลลัพธ์ของคุณสมบัติข้างต้นจะถูกเก็บไว้ในตัวแปร “ สาธิตVal ” และแทรกไว้เหนือองค์ประกอบที่มีรหัสเป็น “print”
หลังจากสิ้นสุดขั้นตอนการคอมไพล์ ผลลัพธ์บนเว็บเพจจะถูกสร้างขึ้นดังนี้:
ผลลัพธ์จะแสดงชื่อของคลาส CSS ที่ถูกนำไปใช้กับองค์ประกอบที่เลือก
บทสรุป
วัตถุ HTML DOM TokenList เปรียบเสมือนอาร์เรย์ที่จัดเก็บวิธีการและคุณสมบัติหลายวิธีซึ่งใช้เพื่อใช้ฟังก์ชันการทำงานเฉพาะเหนือองค์ประกอบ HTML ที่ให้มา วิธีการที่สำคัญและใช้กันอย่างแพร่หลายโดย TokenList คือ “ เพิ่ม()”, “ลบ()”, “สลับ()”, “มี()”, “รายการ()” และ “แทนที่() '. คุณสมบัติที่ TokenList มอบให้คือ “ ความยาว ' และ ' ค่า '. บทความนี้ได้อธิบายขั้นตอนการทำงานกับวัตถุ JavaScript HTML DOMTokenList