การใช้งาน classList ใน HTML5


หลังจากพักร้อนไปจากการเขียนบทความหลายเดือน วันนี้ได้ฤกษ์กลับมาเขียนอีกรอบวันนี้จะมาว่าในเรื่องของการใช้งาน classList ที่มากับ HTML5 อยู่ในหมวดของ Nuts and Bolts

ถ้าเรามีโจทย์ว่าต้องการทำการเพิ่มหรือลบ class ออกจาก element ใดๆ แน่นอนเราต้องนึกถึง methods addClass() หรือ removeClass() ใน jQuery แน่นอน ซึ่งถ้าเราใช้งาน jQuery อยู่ก็คงจะไม่มีปัญหาใดๆ แต่ถ้าในกรณีที่เราไม่ได้ใช้งาน jQuery เราอาจเลือกการใช้งาน classList แทนได้ ซึ่งการใช้งาน clasList ตัวนี้จะแตกต่างจากการใช้งาน jQuery เนื่องจากเป้น native JavaScript (ไม่ต้องใช้ library ใดๆ) แต่ก็แน่นอนการใช้งาน classList  จะไม่สามารถใช้งานได้ใน IE 6,7,8 แต่ถ้าในกรณีที่เราใช้งานบน mobile เราก็ไม่ต้องไปเรียกใช้ jQuery โดยเฉพาะพวกที่อยู่ค่าย Sencha Touch คงจะไม่ต้องไปเอา jquery เข้ามาเพื่อใช้งาน addClass() หรือ removeClass() อย่างเดียวแน่นอน

การใช้งาน classList จะประกอบไปด้วย method ต่างๆ ดังนี้

1
2
3
4
5
6
7
8
{
length: {number}, /* จำนวนของ class ที่ add เข้ามาใน element นั้น */
add: function() { [native code] }, /* เพิ่ม class ให้กับ element */
contains: function() { [native code] }, /* ตรวจสอบว่า element มีการ add class นั้นเข้ามาหรือไม่ */
item: function() { [native code] }, /* reference ถึง class โดย index */
remove: function() { [native code] }, /* remove class ออกจาก element */
toggle: function() { [native code] } /* ทำการ toggle class */
}

ซึ่งในตัวอย่างที่เขียนในรูปนี้จะเป็นการเขียนแบบยาวเพื่อให้เห็นการใช้งาน method ต่างๆของ classList ซึ่งเราสามารถเขียน สั้นๆเพียงบรรทัดเดียวได้ ดังนี้

1
2
3
4
5
document.querySelector('div').onclick = function(){

this.classList.toggle('active');

}

ใครที่เคยใช้ jQuery อยู่แล้วน่าจะหยิบไปใช้ได้เลยเพราะเหมือนกันมากๆ

ลองเข้าไปดู sourcecode ได้ที่ http://jsfiddle.net/irobust/hVbUp/