জাভাস্ক্রিপ্ট এইচটিএমএল ডোম নেভিগেশন
এইচটিএমএল ডোমের সাহায্যে আপনি নোডের সম্পর্ক ব্যবহার করে নোড ট্রি নেভিগেট করতে পারেন।
ডোম নোড
W3C এর এইচটিএমএল ডোমের স্ট্যান্ডার্ড অনুযায়ী, একটি এইচটিএমএল ডকুমেন্টের সবকিছুই একটি নোডঃ
- সম্পূর্ণ ডকুমেন্ট একটি ডকুমেন্ট নোড
- প্রতিটি এইচটিএমএল এলিমেন্ট একটি এলিমেন্ট নোড
- এইচটিএমএল এলিমেন্টের ভিতরের টেক্সট হচ্ছে টেক্সট নোড
- প্রতিটি এইচটিএমএল এট্রিবিউট হলো এট্রিবিউট নোড
- সকল কমেন্ট হচ্ছে কমেন্ট নোড
এইচটিএমএল ডোমের মাধ্যমে নোড ট্রির সকল নোডকে জাভাস্ক্রিপ্ট দ্বারা এক্সেস করা যাবে।
নতুন নোড তৈরি করা যাবে এবং সমস্ত নোড পরিবর্তন বা বাদ দেওয়া যাবে।
নোডের সম্পর্ক
এই সম্পর্ককে বর্ণনা করতে প্যারেন্ট,চাইল্ড এবং সিবলিং ব্যবহার করা হয়।
- একটি নোড ট্রির মধ্যে সবচেয়ে উপরের নোডকে রুট(বা রুট নোড) বলা হয়
- প্রতিটি নোডের শুধুমাত্র একটাই প্যারেন্ট থাকে, রুট ছাড়া (যার কোন প্যারেন্ট নেই)
- একটি নোডের অনেকগুলো চিলড্রেন থাকতে পারে
- সিবলিং(ব্রাদারস-সিস্টারস) হলো সেই নোড যাদের একই প্যারেন্ট থাকে
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h1>ডোম টিউটোরিয়াল</h1>
<p>স্যাট একাডেমী</p>
</body>
</html>
উপরের এইচটিএমএল থেকে আমরা যা শিখলামঃ
- <html> হচ্ছে একটি রুট নোড
- <html> এর কোন প্যারেন্ট নেই
- <html> হচ্ছে <head> এবং<body> এর প্যারেন্ট
- <head>হচ্ছে <html>এর প্রথম চাইল্ড
- <body> হলো <html> এর শেষ চাইল্ড
এবং
- <head> এর একটি চাইল্ড আছেঃ <title>
- <title> এর একটি চাইল্ড টেক্সট নোড রয়েছেঃ "জাভাস্ক্রিপ্ট উদাহরণ"
- <body> এর দুইটি চাইল্ড আছেঃ <h1> এবং <p>
- <h1> এর একটি চাইল্ড আছেঃ "ডোম টিউটোরিয়াল"
- <p> এর একটি চাইল্ড আছেঃ "স্যাট একাডেমী"
- <h1> এবং <p> হচ্ছে সিবলিং
নোডের মধ্যে নেভিগেট করা
আপনি জাভাস্ক্রিপ্ট দিয়ে নোডের মধ্যে নেভিগেট করতে নিম্নলিখিত নোড প্রোপার্টি ব্যবহার করতে পারেনঃ
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
সতর্কতা!
ডোম(DOM) প্রক্রিয়াকরণে একটি ভুল ধারণা হলো একটি এলিমেন্ট নোডে শুধু টেক্সট থাকবে।
এই উদাহরণেঃ <title>ডোম টিউটোরিয়াল</title>, এলিমেন্ট নোড <title> টেক্সট ধারণ করে না। এটি "ডোম টিউটোরিয়াল" ভ্যালুসহ একটি টেক্সট নোড(text node) ধারণ করে।
নোডের innerHTMLপ্রোপারটি অথবা nodeValue দ্বারা টেক্সট নোডের ভ্যালু এক্সেস করা যেতে পারে।
চাইল্ড নোড এবং নোড ভ্যালু
innerHTML প্রোপারটি ছাড়াও আপনি একটি এলিমেন্টের কন্টেন্টকে পেতে childNodes এবং nodeValue প্রোপারটি ব্যবহার করতে পারেন।
নিম্নলিখিত উদাহরণে আমরা একটি <h1> এলিমেন্টের নোড ভ্যালুকে সংগ্রহ করে এবং একটি <p> এলিমেন্টে ব্যবহার করেছি।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3 id="heading">জাভাস্ক্রিপ্ট টিউটোরিয়াল</h3>
<p id="test">হ্যালো</p>
<script>
var headingText = document.getElementById("heading").childNodes[0].nodeValue;
document.getElementById("test").innerHTML = headingText;
</script>
</body>
</html>
ফলাফল
উপরোক্ত উদাহরণে getElementById হলো একটি মেথড, childNodes এবং nodeValue হচ্ছে প্রোপার্টি।
এই টিউটোরিয়ালে innerHTML প্রোপার্টি ব্যবহার করা হয়েছে। তবে ট্রি স্ট্রাকচার এবং ডোমের নেভিগেশন জানার জন্য উপরোক্ত মেথডটি অবশ্যই শেখা প্রয়োজন।
firstChild প্রোপারটির ব্যবহার এবং childNodes[0] এর ব্যবহার একই রকমঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3 id="heading">জাভাস্ক্রিপ্ট টিউটোরিয়াল</h3>
<p id="test">হ্যালো</p>
<script>
var headingText = document.getElementById("heading").firstChild.nodeValue;
document.getElementById("test").innerHTML = headingText;
</script>
</body>
</html>
ফলাফল
ডোম রুট নোড
শুধুমাত্র দুটি উপায়ে সম্পূর্ণ ডকুমেন্টকে এক্সেস করা যায়ঃ
- document.body - ডকুমেন্টের বডি
- document.documentElement - সম্পূর্ণ ডকুমেন্ট
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3>জাভাস্ক্রিপ্ট টিউটোরিয়াল</h3>
<p>স্যাট একাডেমী</p>
<button onclick="myFunc()">ক্লিক করুন</button>
<script>
function myFunc(){
alert(document.body.innerHTML);
}
</script>
</body>
</html>
ফলাফল
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3>জাভাস্ক্রিপ্ট টিউটোরিয়াল</h3>
<p>স্যাট একাডেমী</p>
<button onclick="myFunc()">ক্লিক করুন</button>
<script>
function myFunc(){
alert(document.documentElement.innerHTML);
}
</script>
</body>
</html>
ফলাফল
nodeName প্রোপার্টি
nodeName প্রোপার্টি দ্বারা একটি নোডের নাম নির্দেশ করা হয়।
- nodeName প্রোপার্টি read-only
- একটি এলিমেন্ট নোডের nodeName এবং TagName একই রকম
- একটি এট্রিবিউট নোডের nodeName হলো এট্রিবিউটের নাম
- একটি টেক্সট নোডের nodeName সবসময় #text হয়
- ডকুমেন্ট নোডের nodeName সবসময় #document হয়
নোটঃ nodeName সবসময় একটি এইচটিএমএল এলিমেন্টের বড়হাতের অক্ষরের ট্যাগ নাম ধারণ করে।
nodeValue প্রোপার্টি
nodeValue প্রোপার্টি একটি নোডের ভ্যালু নির্দেশ করে।
- এলিমেন্ট নোডের nodeValue এর ভ্যালু undefined থাকে
- টেক্সট নোডের nodeValue ঐ টেক্সটকেই নির্দেশ করে
- এট্রিবিউট নোডের nodeValue হলো এট্রিবিউটের ভ্যালু
nodeType প্রোপার্টি
nodeType প্রোপার্টি নোডের টাইপ রিটার্ন করে। nodeType হলো read only প্রোপার্টি।
সবচেয়ে গুরুত্বপূর্ণ নোড টাইপগুলো হচ্ছেঃ
| ইলিমেন্ট টাইপ | নোডটাইপ |
|---|---|
| Element | ১ |
| Attribute | ২ |
| Text | ৩ |
| Comment | ৮ |
| Document | ৯ |