🌈 สวัสดีเพื่อน ๆ ทุกคนวันนี้แอดจะพาเพื่อน ๆ มาดูความแตกต่างของ XPath และ CSS Selector กันนน~
.
⚡ ซึ่งทั้งสองเป็นเครื่องมือที่มีประสิทธิภาพที่ใช้ในการเข้าถึง Element ต่าง ๆ ของเว็บและสามารถเข้าถึง DOM ทั้งหมดของเว็บไซต์ได้อย่างรวดเร็วนั่นเอง ไม่มีตัวไหนดีกว่ากันอย่างชัดเจน เพราะแต่ละอันก็มีคุณสมบัติที่ดีของตัวมันเอง
.
ไปดูกันว่าทั้งสองนั้นต่างกันยังไง และมีรูปแบบการเขียนยังไง หากพร้อมแล้วไปดูกันเลยจ้า !!
.
👉 CSS Selector
ใช้สำหรับค้นหาหรือเลือก HTML Element ที่เราต้องการ ซึ่งจะใช้ในการทดสอบ หรือดึงข้อมูลจากหน้าเว็บนั่นเอง
.
📑 ตัวอย่าง
.
ต้องการดึง Element
#close
.
✨ ข้อดีของ CSS Selector
🔹 เร็วกว่า XPath
🔹 เรียนรู้และนำไปใช้ได้ง่ายกว่า
🔹 ใช้ได้กับทุกเบราว์เซอร์
🔹 ค้นหา Element ได้ง่าย
.
👉 XPath
ย่อมาจาก XML Path เป็นตัวช่วยระบุ Element ต่าง ๆ บน XML Document หรือบนหน้าเว็บที่ต้องการดึงข้อมูล หรือทดสอบ
.
📑 ตัวอย่าง
.
ต้องการดึง Element
//*[@id="close"]
.
✨ ข้อดีของ XPath
🔸 ช่วยให้สามารถเข้าถึง HTML DOM ได้อย่างง่ายดาย
🔸 รองรับเบราว์เซอร์รุ่นเก่า ๆ
🔸 มีความยืดหยุ่นกว่า CSS Selector
🔸 หากไม่ทราบชื่อ Element ก็สามารถค้นหาได้ง่าย
.
เป็นยังไงกันบ้างงง ? พอจะเห็นความแตกต่างของทั้งสองแล้วเนอะ และหากใครมีอะไรนอกเหนือจากนี้ คอมเมนต์ไว้ด้านล่างได้เลยน้าาาา และหวังว่าจะเป็นประโยชน์กับเพื่อน ๆ นะ 🥰
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
html div id 在 Which to use <div class="name"> or <div id="name">? - Stack ... 的推薦與評價
... <看更多>
相關內容
html div id 在 Using Div tags with CSS - ID's and classes - YouTube 的推薦與評價
In this tutorial we will look at the class selector is a name preceded by a full stop (“.”) and an ID selector is a name ... ... <看更多>
html div id 在 JavaScript document.createElement() By Practical Examples 的推薦與評價
createElement() to create a new HTML element and attach it to the DOM tree. ... If you want to add an id to a div , you set the id attribute of the element ... ... <看更多>