คุณสมบัติ search ของ Anchor ใน HTML DOM

คุณสมบัติ search ของ Anchor

คุณสมบัติ search ที่เกี่ยวข้องกับแท็ก anchor (<a>) คืนค่าส่วน query string ของค่า href ส่วน query string อยู่หลังเครื่องหมาย ? ใน URL มักใช้ส่งข้อมูลไปยัง server เมื่อส่ง GET request ข้อมูลจะอยู่ในลิงก์เป็นข้อความเปล่า (cleartext)

ไวยากรณ์ (Syntax)

การอ่านค่า search

anchorObject.search

การกำหนดค่า search

anchorObject.search = querystring

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการเปลี่ยน query string ของลิงก์

<!DOCTYPE html>
<html>
<body>
    <p><a id="myAnchor" target="_blank" href="https://www.examplesite.com/ex.htm?id=Username">Example Site</a></p>
    <p>Click the button to change the querystring part of the above website</p>
    <p>Inspect the url before clicking the button to inspect the changes</p>
    <button onclick="demo()">Change Search</button>
    <script>
        function demo() {
            document.getElementById("myAnchor").search = "program=Sample";
        }
    </script>
</body>
</html>

ผลลัพธ์

ก่อนคลิกปุ่ม: ลิงก์คือ www.examplesite.com/ex.htm?id=Username

หลังคลิกปุ่ม Change Search: ลิงก์กลายเป็น www.examplesite.com/ex.htm?program=Sample

คำอธิบายโค้ด

1. ลิงก์ต้นฉบับ: มี query string ?id=Username
2. ปุ่ม Change Search: เรียกฟังก์ชัน demo()
3. ฟังก์ชัน demo(): ตั้งค่า search = "program=Sample" (ไม่ต้องใส่ ? เอง)

คำอธิบายเพิ่มเติม

• คุณสมบัติ search จะคืนค่ารวม ? เสมอ (เช่น ?id=123)
• เมื่อตั้งค่า ไม่ต้องใส่ ? นำหน้า (browser จะเพิ่มอัตโนมัติ)
• การเปลี่ยน search จะอัปเดต href ทั้งหมด แต่ไม่โหลดหน้าใหม่ทันที (ต้องคลิกลิงก์)
• ใช้ร่วมกับ URLSearchParams สำหรับจัดการ complex query strings:

  const params = new URLSearchParams(anchor.search);
  params.set('key', 'value');
  anchor.search = params.toString();

• คุณสมบัติ URL อื่นๆ ของ anchor: hash, host, hostname, pathname, port, protocol, username, password