জেভাস্ক্রিপ্ট এইচটিএমএল ডম নেভিগেশন

HTML DOM-এর সাহায্যে, আপনি নোড ট্রিতে নোডগুলির সম্পর্ক দিয়ে নোড ট্রিতে সফর করতে পারেন

ডম নোড

W3C HTML DOM প্রতিষ্ঠানের মতে, HTML ডকুমেন্টের সকল জিনিসকে নোড বলা হয়:

  • সমগ্র ডকুমেন্টকে ডকুমেন্ট নোড বলা হয়
  • প্রত্যেক HTML ইলেমেন্টকে ইলেমেন্ট নোড বলা হয়
  • HTML ইলেমেন্টের মধ্যে টেক্সটকে টেক্সট নোড বলা হয়
  • প্রত্যেক HTML অ্যাট্রিবিউটকে অ্যাট্রিবিউট নোড বলা হয়
  • সকল মন্তব্যকে মন্তব্য নোড বলা হয়
DOM HTML ট্রি

HTML DOM-এর সাহায্যে, নোড ট্রিতের সমস্ত নোডকে JavaScript-এর মাধ্যমে পরিগণনা করা যায়

নতুন নোড তৈরি করা যায়, এছাড়াও সমস্ত নোডকে সংশোধন এবং মোছা যায়

নোড সম্পর্ক

নোড ট্রিতে নোডগুলির মধ্যে একটি স্তরবদ্ধ সম্পর্ক আছে

  • শব্দ (মাতা, সন্তান এবং সহস্রত্বী, parent, child এবং sibling) এই সম্পর্ককে বর্ণনা করার জন্য ব্যবহৃত হয়
  • নোড ট্রির শীর্ষ নোডকে মূল নোড বলা হয় (মূল নোড কোন মাতা নেই)
  • প্রত্যেক নোড একটি মাতা নোড আছে, প্রত্যেকটি মূল নোড নিচে নেই (মূল নোড কোন মাতা নেই)
  • নোড একটি নির্দিষ্ট সংখ্যক সন্তান ধারণ করতে পারে
  • সহস্রত্বী (ভাই বা বোন) হল একই মাতার নোড
<html>
   <head>
       <title>DOM টিউটোরিয়াল</title>
   </head>
  <body>
       <h1>DOM প্রথম শিক্ষা</h1>
       <p>Hello world!</p>
   </body>
</html>
DOM HTML ট্রি

উপরোক্ত HTML থেকে আপনি নিম্নলিখিত তথ্য পড়তে পারবেন:

  • <html> হল রূপান্তরকারী নোড
  • <html> কোন মাতা নেই
  • <html> হল <head> এবং <body> এর মাতা
  • <head> হল <html> এর প্রথম সন্তান
  • <body> হল <html> এর শেষ সাব-নোড

একইসঙ্গে:

  • <head> একটি সাব-নোড আছে: <title>
  • <title> একটি সাব-নোড (টেক্সট নোড) আছে: "DOM শিক্ষাদীপ্তি"
  • <body> দুটি সাব-নোড আছে: <h1> এবং <p>
  • <h1> একটি সাব-নোড আছে: "DOM প্রথম পর্ব"
  • <p> একটি সাব-নোড আছে: "Hello world!"
  • <h1> এবং <p> একইসঙ্গে

নোডগুলোর মধ্যে নেভিগেশন

JavaScript-এর মাধ্যমে, নোডগুলোর মধ্যে নেভিগেশন করতে নোড বৈশিষ্ট্যগুলো ব্যবহার করা যেতে পারে:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

সাব-নোড এবং নোড মান

DOM প্রক্রিয়াকরণের একটি সাধারণ ভুল ধারণা হল উপাদান নোডের মধ্যে টেক্সট থাকার বিশ্বাস

উদাহরণ:

<title id="demo">DOM শিক্ষাদীপ্তি</title>

（উপরোক্ত উদাহরণগুলিতের）উপাদান নোড <title> না ধারণ করেটেক্সট ধারণ করে

এটি "DOM শিক্ষাদীপ্তি" মানেরটেক্সট নোড。

টেক্সট নোডের মান নোডের innerHTML বৈশিষ্ট্যকে প্রাপ্তি করা হয়:

var myTitle = document.getElementById("demo").innerHTML;

innerHTML বৈশিষ্ট্যকে প্রথম সাব-নোডের প্রাপ্তির সমতুল্য nodeValue:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

এভাবেও প্রথম সাব-নোডের প্রাপ্তি করা যেতে পারে:

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

নিম্নোক্ত তিনটি উদাহরণে ফিরিয়ে নেওয়া <h1> উপাদানের টেক্সট এবং কপি করুন <p> উপাদানের মধ্যে:

উদাহরণ ১

<html>
<body>
<h1 id="id01">আমার প্রথম পেজ</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

আপনার নিজেই চেষ্টা করুন

উদাহরণ ২

<html>
<body>
<h1 id="id01">আমার প্রথম পেজ</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

আপনার নিজেই চেষ্টা করুন

উদাহরণ ৩

<html>
<body>
<h1 id="id01">আমার প্রথম পেজ</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

আপনার নিজেই চেষ্টা করুন

InnerHTML

এই ট্যুটোরিয়ালে, আমরা innerHTML এইভাবে HTML ইলেমেন্টের কনটেন্ট পাওয়া যায়。

কিন্তু, উপরোক্ত অন্যান্য পদ্ধতি শিখা করা সাহায্য করে DOM-এর ট্রি কাঠামো এবং নেভিগেশন বোঝা করতে

DOM রূপরেখা নোড

দুই বিশেষ property সম্পূর্ণ নথিপত্র পরিদর্শন করতে দেয়:

  • document.body - নথিপত্রের body
  • document.documentElement - সম্পূর্ণ নথিপত্র

উদাহরণ

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM খুবই উপযোগী!</p>
<p>এই উদাহরণটি <b>document.body</b> property-এর প্রদর্শন করে</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

আপনার নিজেই চেষ্টা করুন

উদাহরণ

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM খুবই উপযোগী!</p>
<p>এই উদাহরণটি <b>document.documentElement</b> property-এর প্রদর্শন করে</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

আপনার নিজেই চেষ্টা করুন

nodeName property

nodeName এই property নোডের নাম নির্ধারণ করে

  • nodeName property অপারেশনাল নয়
  • নোডের nodeName ইলেমেন্ট ট্যাগ নামের সমতুল্য
  • নোডের nodeName হলো property এর নাম
  • টেক্সট নোডের nodeName সবসময় #text
  • নথিপত্র নোডের nodeName সবসময় #document

উদাহরণ

<h1 id="id01">আমার প্রথম ওয়েবসাইট</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

আপনার নিজেই চেষ্টা করুন

পরামর্শ:nodeName সবসময় HTML ইলেমেন্টের বড় ট্যাগ নাম ধারণ করে

nodeValue property

nodeValue এই property নোডের মান নির্ধারণ করে

  • ইলেমেন্ট নোডের nodeValue undefined
  • টেক্সট নোডের nodeValue হলো লিখিত টেক্সট
  • নোডের nodeValue হলো property এর মান

nodeType property

nodeType এই property নোডের ধরন ফিরিয়ে দেয়。nodeType এটি অপারেশনাল নয়。

উদাহরণ

<h1 id="id01">আমার প্রথম ওয়েবসাইট</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

আপনার নিজেই চেষ্টা করুন

সবচেয়ে মূল্যবান nodeType প্রতিশব্দটি হল:

নোড ধরন উদাহরণ
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (ত্যাগ করা হয়েছে)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- এটি মন্তব্য -->
DOCUMENT_NODE 9 HTML ডকুমেন্ট এটা নিজেই (<html> এর পিতা)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

টাইপ 2 এইচটিএমএল ডম-এ ত্যাগ করা হয়েছে।XML DOM-এ ত্যাগ করা হয়নি。