คู่มือเอกสาร HTML DOMTokenList

DOMTokenList

DOMTokenList เป็นกลุ่มโทเคนที่แยกด้วยช่องว่าง

สามารถเข้าถึง DOMTokenList ด้วยดัชนี (เริ่มต้นจาก 0)

ตัวแปร lengthคืนจำนวนโทเคนใน DOMTokenList

หมายเหตุ:ของส่วนที่มี HTML อิเล็กทรอนิกส์ ตัวแปร classListแสดงว่าเป็น DOMTokenList

DOMTokenList นามสกุลและวิธี

ชื่อ คำอธิบาย
add() เพิ่มโทเคนหนึ่งหรือหลายตัวไปยังลิสต์
contains() เมื่อลิสต์มีชั้น ก็คืนค่า true
entries() คืนค่าเลขศูนย์ที่มีกุญแจ/ค่าในลิสต์
forEach() ปฏิบัติกิจกรรมกับลูปแบบทั้งหมดของตัวแทน (token) ในรายการ
item() คืนตัวแทน (token) ที่ตัวแทน (token) หนึ่งในรายการที่มีหมายเลขที่กำหนด
keys() คืนค่าตัวแทนนำทางออกเรียงที่มีค่าของใบแผนของลิสต์
length คืนจำนวนตัวแทน (token) ในรายการ
remove() ลบตัวแทน (token) หนึ่งหรือหลายอันในรายการ
replace() แทนที่ตัวแทน (token) ในรายการ
supports() คืนค่า true หากตัวแทน (token) ในรายการคือตัวแทนที่รองรับโดยแอตทริบิวต์
toggle() เปลี่ยนสถานะของตัวแทน (token) ในลิสต์
value คืนค่าตัวแทนลิสต์ที่มีค่าของตัวแทน (token)
values() คืนค่าตัวแทนนำทางออกเรียงที่มีค่าจากบันทึกตารางในลิสต์

ตัวอย่าง

ตัวอย่าง 1

เพิ่มคลาส "myStyle" ไปที่อิเลิม:

element.classList.add("myStyle");

ลองทดลองด้วยตัวเอง

ตัวอย่าง 2

ลบคลาส "myStyle" ออกจากอิเลิม:

element.classList.remove("myStyle");

ลองทดลองด้วยตัวเอง

ตัวอย่าง 3

เปิดและปิด "myStyle":

element.classList.toggle("myStyle");

ลองทดลองด้วยตัวเอง

มีตัวอย่างเพิ่มเติมให้ดูที่ด้านล่างของหน้า。

ไม่ใช่ตัวแทน Array

DOMTokenList ไม่ใช่ตัวแทน Array!

DOMTokenList อาจดูเหมือนตัวแทน Array แต่ในความเป็นจริงมันไม่ใช่ตัวแทน Array。

คุณสามารถวนลูป DOMTokenList และใช้อินเดกซ์เพื่ออ้างอิงตัวแทน (token) ของมัน。

แต่คุณไม่สามารถใช้เมธอดของ Array บน DOMTokenList ได้ เช่น push()、pop() หรือ join()。

ตัวอย่าง

ตัวอย่าง 1

เพิ่มคลาสหลายรายการไปที่อิเลิม:

element.classList.add("myStyle", "anotherClass", "thirdClass");

ลองทดลองด้วยตัวเอง

ตัวอย่าง 2

ลบคลาสหลายรายการจากอิเลิม:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

ลองทดลองด้วยตัวเอง

ตัวอย่าง 3

เรียกใช้จำนวนคลาสของอิเลิม:

let numb = element.classList.length;

ลองทดลองด้วยตัวเอง

ตัวอย่าง 4

เรียกใช้คลาสของอิเลิม "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

ลองทดลองด้วยตัวเอง

ตัวอย่าง 5

รับคลาสแรกขององค์ประกอบ

let className = element.classList.item(0);

ลองทดลองด้วยตัวเอง

ตัวอย่าง 6

มีคลาส "myStyle" หรือไม่?

let x = element.classList.contains("myStyle");

ลองทดลองด้วยตัวเอง

ตัวอย่าง 7

ถ้าองค์ประกอบมีคลาส "myStyle" ลบ "anotherClass"

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

ลองทดลองด้วยตัวเอง

ตัวอย่าง 8

เปลี่ยนคลาสเพื่อสร้างปุ่มด้านลง

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

ลองทดลองด้วยตัวเอง

ตัวอย่าง 9

สร้างแถวนำที่มีความเหมือนกับแถวนำที่แข็ง

// รับแถวนำ
const navbar = document.getElementById("navbar");
// รับตำแหน่งตัวโยนของแถวนำ
const sticky = navbar.offsetTop;
// ใส่คลาส sticky ในแถวนำเมื่อคุณไปถึงตำแหน่งหลายตัว
// ลบออกเมื่อออกจากตำแหน่งหลายตัว
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

ลองทดลองด้วยตัวเอง