JavaScript: document.head সম্পূর্ণ বাংলা টিউটোরিয়াল
document.head হলো JavaScript DOM (Document Object Model)-এর একটি প্রপার্টি, যা HTML ডকুমেন্টের <head> এলিমেন্টকে রিটার্ন করে। এর মাধ্যমে আপনি ডাইনামিকভাবে মেটা ট্যাগ, স্ক্রিপ্ট, লিংক ইত্যাদি যোগ বা পরিবর্তন করতে পারেন।
<head> ট্যাগ কী?
HTML ডকুমেন্টের <head> অংশে থাকে মেটা তথ্য, CSS ফাইল, স্ক্রিপ্ট ফাইল, টাইটেল ইত্যাদি যা পেজের দৃশ্যমান অংশ নয়, তবে ব্রাউজার এবং সার্চ ইঞ্জিনের জন্য গুরুত্বপূর্ণ।
একটি সাধারণ
<head> উদাহরণ:
<head>
<title>আমার ওয়েবসাইট</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
JavaScript দিয়ে document.head ব্যবহারের কিছু কৌশল
// head এলিমেন্ট দেখা
console.log(document.head);
// নতুন মেটা ট্যাগ যোগ করা
let meta = document.createElement("meta");
meta.name = "viewport";
meta.content = "width=device-width, initial-scale=1.0";
document.head.appendChild(meta);
// নতুন স্টাইলশীট যোগ করা
let styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = "theme.css";
document.head.appendChild(styleLink);
document.head এর গুরুত্বপূর্ণ বৈশিষ্ট্য টেবিলে
| প্রপার্টি/মেথড | ব্যাখ্যা |
|---|---|
| document.head | HTML ডকুমেন্টের head এলিমেন্টকে রিটার্ন করে |
| document.head.appendChild() | head অংশে নতুন এলিমেন্ট যোগ করে |
| document.head.querySelector() | head এর ভিতরের নির্দিষ্ট এলিমেন্ট খুঁজে পায় |
উদাহরণ: <title> ডাইনামিকভাবে পরিবর্তন
// ডাইনামিকভাবে টাইটেল পরিবর্তন
document.head.querySelector("title").innerText = "নতুন টাইটেল";
⚠️ গুরুত্বপূর্ণ বিষয়
document.headসবসময় একটি নির্দিষ্ট<head>এলিমেন্ট রিটার্ন করে (null নয়)।- এটি ডাইনামিক স্ক্রিপ্ট বা স্টাইল লোড করতে ব্যবহৃত হয় স্পা (SPA) বা SEO-ফ্রেন্ডলি পেজে।
✅ সারাংশ
- document.head আপনাকে HTML ডকুমেন্টের
<head>অংশ অ্যাক্সেস করতে দেয়। - এটির মাধ্যমে আপনি মেটা ইনফো, স্ক্রিপ্ট ও CSS ডাইনামিকভাবে যোগ বা মডিফাই করতে পারেন।