Dom Selectors API ที่เทียบเท่า jQuery

ตั้งแต่อดีตก่อนที่เราจะได้รู้จักกับเจ้า jQuery อันแสนทรงพลังเวลาที่เราต้องการที่จะค้นหา element ใน Html เราก็ต้องใช้ Method ด้านล่าง

-getElementById()

getElementsByTagName()

ซึ่งมันก็ทำได้ดีระดับนึงแต่ข้อจำกัดของมันก็ค่อนข้างมาก เช่น  จะหา element ได้เราต้องรู้ Id หรือ Tag ของ element นั้นๆ เท่านั้นและก็ยังไม่สามารถทำการ ระบุ pattern ของ CSS ได้เหมือน jQuery ( $(‘.CSS’) ) จนกระทั้งเจ้า jQuery ออกมาทำให้สอง Method นั้นถูกลืมไปเลยแต่วันนี้เขากลับมาใหม่ครับ โดยเพิ่ง Method มาใหม่พร้อมๆ กับ Html5 ที่คล้าย jQuery มากๆๆ (น่าจะเลียนแบบมามังครับ) ตอบโจทย์ปัญหาเดิมๆ ที่ตัวเองทำไม่ได้ทั้งหมด โดยเพื่อนๆ สามารถดูได้จากตัวอย่างด้านล่างได้เลยครับ (ขำๆนะผมว่า jQuery ดีกว่า 5555)

-querySelector()

//get the body element
var body = document.querySelector('body');

//get the element with the ID 'myDiv'
var myDiv = document.querySelector('#myDiv');

//get first element with a class of 'selected'
var selected = document.querySelector('.selected');

//get first image with class of 'button'
var img = document.body.querySelector('img.button');

 

-querySelectorAll()

//get all <em> elements in a <div> (similar to getElementsByTagName('em'))
var ems = document.getElementById('myDiv').querySelectorAll('em');

//get all elements with class of 'selected'
var selecteds = document.querySelectorAll('.selected');

//get all <strong> elements inside of <p> elements
var strongs = document.querySelectorAll('p strong');

 

เรียกใช้

var i, len, strong;
for (i=0, len=strongs.length; i < len; i++)
{
strong = strongs[i]; //or strongs.item(i)
strong.className = 'important';
}

 

ก็อย่างที่เห็นว่ามันน่าจะทำงานได้ใกล้เคียงกับ jQuery ครับเราอาจจะใช้ในสถานะการณ์ที่เราต้องการทำงานที่ไม่สับซ้อนและก็ไม่อยากที่ Refer Script อะไรให้มันวุ่นวายแฮะๆๆ มันก็ง่ายดีเหมือนกันครับ

 

Browser ที่สามารถใช้ได้

Internet Explorer 8+

Firefox 3.5+

Safari 3.1+

Chrome

Opera 10+

 

Refer

Leave a Reply