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

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

คุณสมบัติ rel ของ Anchor คืนค่าแอตทริบิวต์ rel ของลิงก์ แอตทริบิวต์ rel อธิบายความสัมพันธ์ระหว่างเอกสารปัจจุบันกับเอกสารที่ลิงก์ไป

ไวยากรณ์ (Syntax)

การอ่านค่า rel

anchorObject.rel

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

anchorObject.rel = "value"

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

ตัวอย่างด้านล่างแสดงการอ่านค่า rel attribute

<!DOCTYPE html>
<html>
<body>
    <h1>Example</h1>
    <p><a id="anchorExample" rel="Rel Property" href="https://www.examplesite.com/"> Anchor Rel Property</a></p>
    <p>Click on the button</p>
    <button onclick="display()">Click me!</button>
    <p id="show"></p>
    <script>
        function display() {
            var docs = document.getElementById("anchorExample").rel;
            document.getElementById("show").innerHTML = docs;
        }
    </script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: แสดงลิงก์และปุ่ม

คลิก Click me!: แสดงค่า rel attribute คือ "Rel Property"

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

• ค่า rel ที่พบบ่อย:
  • nofollow - ไม่ต้อง follow link (SEO)
  • noopener - ป้องกัน window.opener (security)
  • noreferrer - ไม่ส่ง referrer header
  • external - ลิงก์นอกไซต์
  • author - ลิงก์ไปหน้าผู้เขียน
  • license - ลิงก์ไป license
  • prev/next - นำทางหน้าก่อน/ถัดไป
  • stylesheet - stylesheet (สำหรับ <link>)
  • preload/prefetch - resource hints
• สามารถรวมหลายค่าได้: rel="noopener noreferrer external"
• สำหรับ target="_blank" ควรใส่ rel="noopener noreferrer" เสมอ
• คุณสมบัติ rel ทำงานกับ <a>, <area>, <link>