คุณสมบัติ head ใน HTML DOM

คุณสมบัติ head ใน HTML DOM เกี่ยวข้องกับองค์ประกอบ HTML <head> ใช้สำหรับคืนค่าองค์ประกอบ head หากมีหลาย head จะคืนค่าตัวแรก เป็นคุณสมบัติแบบอ่านอย่างเดียว (read-only)

ไวยากรณ์ (Syntax)

document.head

ตัวอย่าง

ตัวอย่างการดึง title ของเอกสารผ่านคุณสมบัติ head:

<!DOCTYPE html>
<html>
<head>
  <title>My title</title>
</head>
<body>
<h1>ตัวอย่างคุณสมบัติ head</h1>
<p>คลิกปุ่มด้านล่างเพื่อดู title ของเอกสารนี้</p>
<button onclick="getTitle()">Get Title</button>
<p id="Sample"></p>
<script>
  function getTitle() {
    var titleText = document.head.firstElementChild.innerHTML;
    document.getElementById("Sample").innerHTML = "Title ของเอกสารนี้คือ: " + titleText;
  }
</script>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงปุ่ม "Get Title"

เมื่อคลิกปุ่ม "Get Title" จะแสดง "Title ของเอกสารนี้คือ: My title"

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

• สร้าง <head> มี <title>My title</title> ภายใน
• สร้างปุ่ม "Get Title" เรียกใช้ getTitle() เมื่อคลิก
• ฟังก์ชัน getTitle() ใช้ document.head เข้าถึง head แล้ว .firstElementChild ได้ title element
• อ่าน innerHTML ของ title แล้วแสดงในย่อหน้า id="Sample"