27Apr, 2021

Language blog :

Thai

Share blog :

27 April, 2021

Thai

รู้จัก XPath ตัวชี้ทางเพื่อใช้หา element

Senna Labs,

5 mins read

Software Development

รู้จัก XPath ตัวชี้ทางเพื่อใช้หา element

XPath เป็นตัวชี้ทางเพื่อใช้หา element ใน ภาษา XML และ HTML เอกสารที่เป็น XML และ HTML จะมีข้อมูลที่ถูกครอบด้วยแท็กอยู่ ในส่วนของ HTML แท็กจะเป็นตัวกำหนดลักษณะที่ปรากฏของข้อมูลที่อยู่ภายในแท็ก เช่น <h1> Header </h1> tag h1 จะทำหน้าที่เน้น ตัวอักษรที่อยู่ภายในให้มีลักษณะ ใหญ่กว่าตัวอักษรที่อยู่ภายนอก มักใช้เป็นหัวเรื่องของเว็บไซต์โดยชื่อของ tag ต่าง ๆ และลักษณะของข้องมูลที่อยู่ภานใน จะถูกกำหนดไว้แล้ว ส่วน XML นั้น tag จะถูกใช้ในการเก็บข้อมูล และ โครงสร้างของข้อมูลนั้น ๆ

<?xml version="1.0" encoding="UTF-8"?><friend>  <first_name>Tove</first_name>  <last_name>Jani</first_name>  <phone_number>+660123456789</phone_number></friend>

^{ตัวอย่างการเก็บข้อมูลโดยใช้ XML}

ประเภทของ XPath

XPath แบ่งออกเป็น 2 ประเภท ดังนี้

1. Absolute XPath

เป็นการเขียนแบบเรียงลำดับชั้นตาม tag ไปตรง ๆ ตั้งแต่ tag ตัวแรกเรียงไปจนถึง tag ของ element ที่ต้องการค้นหา ข้อเสียของการเขียน Absolute XPath คือ การอ่านเข้าใจยาก และ ถ้า tag ลำดับก่อนหน้ามีการเปลี่ยนแปลง จะทำให้ XPath ที่เคยเขียนไว้ หา element ไม่เจอ

2. Relative XPath

เป็นการเขียนเพื่อระบุเจาะจง element ที่จะหาได้เลย ไม่ต้องไล่ลำดับจาก tag ตัวแรกก่อน โดยสามารถ ระบุ tag name หรือ attibute อย่างเช่น name class id ของ element ได้ด้วย ข้อดีของการเขียน Relative XPath คือ ความยืดหยุ่นในการใช้งาน ถ้าหากลำดับก่อนหน้ามีการเปลี่ยนแปลงก็จะไม่ส่งผลกระทบกับ XPath ที่เคยเขียนไว้

<!DOCTYPE html><html>  <head>    <title>Page Title</title>  </head>  <body>    <h1>This is a Heading</h1>    <p>This is a paragraph.</p>  </body></html>

ตัวอย่างการเขียน XPath เพื่อใช้ชี้ตำแหน่ง Heading ของเอกสาร HTML ด้านบน

Absolute XPath

/html/body/h1

Relative XPath

//h1

XPath Syntax การชี้ตำแหน่ง

nodename หรือ ชื่อ tag เลือก tag ทั้งหมดที่มีชื่อ nodename
/ เลือกลำดับถัดไปจากตำแหน่งปัจจุบัน
// เลือกลำดับได้ก็ได้จากตำแหน่งปัจจุบัน
. เลือกตำแหน่งปัจจุบัน
.. เลือก parent ของตำแหน่งปัจจุบัน
@ เลือก attributes

<?xml version="1.0" encoding="UTF-8"?><bookstore>  <book>    <title lang="en">Harry Potter</title>    <price>29.99</price>  </book>  <book>    <title lang="en">Learning XML</title>    <price>39.95</price>  </book></bookstore>

ตัวอย่างการชี้ตำแหน่งเอกสาร XML โดยใช้ XPath

bookstore เลือก element bookstore ทั้งหมด
/bookstore เลือก element bookstore จากตำแหน่งปัจจุบัน
bookstore/book เลือก element book ทั้งหมด ที่อยู่ลำดับชั้นที่ 1 ภายใน element bookstore ในตำแหน่งใดก็ได้
//book เลือก element book ทั้งหมดที่อยู่ในลำดับใดก็ได้จากตำแหน่งปัจจุบัน
bookstore//book เลือก element book ทั้งหมด ที่อยู่ลำดับชั้นใดก็ได้ element bookstore ในตำแหน่งใดก็ได้
//@lang เลือก element ที่มี attributes lang ทั้งหมด

การชี้ตำแหน่งแบบเจาะจง

/bookstore/book[1] เลือก element book ตัวแรก ที่อยู่ลำดับชั้นที่ 1 ภายใน element bookstore ในตำแหน่งปัจจุบัน
/bookstore/book[last()] เลือก element book ตัวสุดท้าย ที่อยู่ลำดับชั้นที่ 1 ภายใน element bookstore ในตำแหน่งปัจจุบัน
/bookstore/book[last()-1] เลือก element book ตัวก่อนหน้าตัวสุดท้าย ที่อยู่ลำดับชั้นที่ 1 ภายใน element bookstore ในตำแหน่งปัจจุบัน
/bookstore/book[position()<3] เลือก element book 2ตัวแรก ที่อยู่ลำดับชั้นที่ 1 ภายใน element bookstore ในตำแหน่งปัจจุบัน
//title[@lang] เลือก element title และมี attributes lang ทั้งหมด ในตำแหน่งใดก็ได้
//title[@lang='en'] เลือก element title และมี attributes lang มีค่าเป็น “en” ทั้งหมด ในตำแหน่งใดก็ได้
/bookstore/book[price>35.00] เลือก element book ที่มี element price มีค่ามากกว่า 35 ที่อยู่ลำดับชั้นที่ 1 ภายใน element bookstore ในตำแหน่งปัจจุบัน
/bookstore/book[price>35.00]/title เลือก element title ที่อยูในลำดับชั้นที่ 1 ใน element book ที่มี element price มีค่ามากกว่า 35 อยู่ลำดับชั้นที่ 1 ภายใน element bookstore ในตำแหน่งปัจจุบัน

Written by

Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

February, 2025

5 February, 2025

JS class syntax

เชื่อว่าหลายๆคนที่เขียน javascript กันมา คงต้องเคยสงสัยกันบ้าง ว่า class ที่อยู่ใน js เนี่ย มันคืออะไร แล้วมันมีหน้าที่ต่างกับการประกาศ function อย่างไร? เรามารู้จักกับ class ให้มากขึ้นกันดีกว่า class เปรียบเสมือนกับ blueprint หรือแบบพิมพ์เขียว ที่สามารถนำไปสร้างเป็นสิ่งของ( object ) ตาม blueprint หรือแบบพิมพ์เขียว( class ) นั้นๆได้ โดยภายใน class

Senna Labs,

4 mins read

Thai

Software Development

February, 2025

5 February, 2025

15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G

ผู้ให้บริการเครือข่ายในสหรัฐฯ ได้เปิดตัว 5G ในหลายรูปแบบ และเช่นเดียวกับผู้ให้บริการเครือข่ายในยุโรปหลายราย แต่… 5G มันคืออะไร และทำไมเราต้องให้ความสนใจ บทความนี้ได้รวบรวม 15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G เพราะเราปฏิเสธไม่ได้เลยว่ามันกำลังจะถูกใช้งานอย่างกว้างขวางขึ้น 1. 5G หรือ Fifth-Generation คือยุคใหม่ของเทคโนโลยีเครือข่ายไร้สายที่จะมาแทนที่ระบบ 4G ที่เราใช้อยู่ในปัจจุบัน ซึ่งมันไม่ได้ถูกจำกัดแค่มือถือเท่านั้น แต่รวมถึงอุปกรณ์ทุกชนิดที่เชื่อมต่ออินเตอร์เน็ตได้ 2. 5G คือการพัฒนา 3 ส่วนที่สำคัญที่จะนำมาสู่การเชื่อมต่ออุปกรณ์ไร้สายต่างๆ ขยายช่องสัญญาณขนาดใหญ่ขึ้นเพื่อเพิ่มความเร็วในการเชื่อมต่อ การตอบสนองที่รวดเร็วขึ้นในระยะเวลาที่น้อยลง ความสามารถในการเชื่อมต่ออุปกรณ์มากกว่า 1 ในเวลาเดียวกัน 3. สัญญาณ 5G นั้นแตกต่างจากระบบ

Senna Labs,

4 mins read

Thai

Software Development

February, 2025

5 February, 2025

จัดการ Array ด้วย Javascript (Clone Deep)

ในปัจจุบันนี้ ปฏิเสธไม่ได้เลยว่าภาษาที่ถูกใช้ในการเขียนเว็บต่าง ๆ นั้น คงหนีไม่พ้นภาษา Javascript ซึ่งเป็นภาษาที่ถูกนำไปพัฒนาเป็น framework หรือ library ต่าง ๆ มากมาย ผู้พัฒนาหลายคนก็มีรูปแบบการเขียนภาษา Javascript ที่แตกต่างกัน เราเลยมีแนวทางการเขียนที่หลากหลาย มาแบ่งปันเพื่อน ๆ เกี่ยวกับการจัดการ Array ด้วยภาษา Javascript กัน เรามาดูตัวอย่างกันเลยดีกว่า โดยปกติแล้วการ copy ค่าจาก value type ธรรมดา สามารถเขียนได้ดังนี้

Senna Labs,

4 mins read

Thai

Software Development