Thuộc tính head DOM HTML được liên kết với phần tử HTML
. Nó được sử dụng để trả về phần tử . Nếu có nhiều phần tử head thì nó sẽ trả về phần tử head đầu tiên. Đây là thuộc tính chỉ đọc.Cú pháp
Sau đây là cú pháp cho thuộc tính head -
document.head
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính HTML head DOM -
<!DOCTYPE html> <html> <head> <title>My title</title> </head> <body> <h1>head property example</h1> <p>Get this document title by clicking on the below button</p> <button onclick="getTitle()">Get Title</button> <p id="Sample"></p> <script> function getTitle() { var x = document.head.firstElementChild.innerHTML; document.getElementById("Sample").innerHTML = "The title of this document is: "+x; } </script> </body> </html>
Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút “Lấy tiêu đề” -
Trong ví dụ trên -
Trước tiên, chúng tôi đã tạo một phần tử
có chứa phần tử<head> <title>My title</title> </head>
Sau đó, chúng tôi tạo một nút “Lấy tiêu đề” sẽ thực thi phương thức getTitle () khi người dùng nhấp vào.
<button onclick="getTitle()">Get Title</button>
Phương thức getTitle () sử dụng thuộc tính document head để lấy phần tử head và thuộc tính firstElementChild để lấy phần tử con đầu tiên là phần tử
Sau đó, chúng tôi sử dụng thuộc tính innerHTML trên phần tử tiêu đề để lấy văn bản bên trong nó và hiển thị nó trong đoạn văn có id “Sample” bằng thuộc tính innerHTML của nó -
function getTitle() { var x = document.head.firstElementChild.innerHTML; document.getElementById("Sample").innerHTML = "The title of this document is: "+x; }