HTML DOM Node এর বাপ-দাদা-চৌদ্দগোষ্ঠী

লেখার সময়কাল:

18 March, 2016

আগের লেখায় (বাংলা/ইংরেজি) আমরা HTML DOM সম্পর্কে জেনেছিলাম । এবার আমরা Node এর চৌদ্দগোষ্ঠী উদ্ধার করার চেষ্টা করবো ।

তবে তার আগে আমাদের নিজেদের চৌদ্দগোষ্ঠী উদ্ধার করে নেই… । আপনারা হয়তো ;) জানেন, আমাদের যাঁরা জন্ম দিয়েছেন তাঁরা আমাদের বাপ-মা (parents) । আর এটাও হয়তো জানেন, বাপেরও একজন বাপ থাকে :D । তাকে আমরা  দাদা বলি । আবার আমরা আপন ভাই-বোনেরা সবাই এক (কোনোভাবেই দুই/তিন পড়বেন না) বাপ-মা’র সন্তান (child) । সন্তানরা পরস্পর ভাই-বোন (siblings) ।

আপনাকে কংগ্রেচুলেশন, অভিন্দন । আপনি Node শিখে ফেলেছেন… । সো, তাই আপনাকে দেয়া হলো ৫ মিনিট নাচানাচি করার জন্য । কুইক, তাড়াতাড়ি বাসায় রসমালাই পাঠান (রসগোল্লা কম পছন্দ করি) ।

-কি? পাঠাতে পারবেন না ! তাইলে রসগোল্লাই পাঠান ।L

-আগে টিউট শেষ করতে হবে ? অক্কা, সমিস্যা নাই….

DOM থেকে আমরা জেনেছিলাম,

পুরো HTML file টি হচ্ছে একটা Document ।

Document এর মধ্যে আছে root element, html ।

html এর মধ্যে আছে দু’টি element, head এবং body ।

head এর মধ্যে আছে title element ।

title এর মধ্যে আছে text ।

ওদিকে body –র মধ্যে থাকে নানান ধরনের element । ঐ element গুলোতে থাকে attribute ।

এবার ভালো করে মনে রাখি, document এর মধ্যে যা-ই থাকে সবগুলোই কোন না কোন Node ।যেমন-

১. Element গুলো হলো element node ।

২. ‍attribute হলো attribute node । এটা বর্তমানে অননুমদিত (deprecated)

৩. Text হলো text node (এটা ভালো করে মনে রাখুন । এখানে text কে কনটেনট বলা হচ্ছে না, বলা হচ্ছে text node)

4. Comment গুলোকে বলা হয় comment node ।

html এর পূর্বে কোন এলিমেন্ট নেই , মানে এর কোন বাপ-মা (parent) নেই । তাই এটা হলো root element বা root node ।

html এর মধ্যে থাকা দু’টি এলিমেন্ট head এবং body হলো html এর child । এ দুটিকে বলে childNodes । head যেহেতু প্রথমে আছে তাই এটিকে আবার firstChild বলা যাবে । আর body কে বলা যাবে lastChild ।

আবার উল্টো করে বললে html হলো head এবং body এর parents । তাই এটিকে বলা হবে parentNode ।

head এবং body এর parent যেহেতু একজন (html) মানে তারা একই বাপ-মা’র  সন্তান সেহেতু তারা পরস্পরের siblings (ভাই-বোন)। body কে বলা হবে head এর nextSibling । এবং head কে বলা হবে body –র previousSibling ।

এবার মনে করি, body –র মধ্যে আছে একটি h1 element । h1 এর মধ্যে আছে text । এক্ষেত্রে h1 হলো parentNode এবং text হলো chidlNodes ।

আরেকটি উদাহরণ দেখি..

ধরি,

ul এর মধ্যে আছে চারটি li । প্রত্যেকটি li এর মধ্যে আছে a । a এর মধ্যে আছে text । যেমনটা আমরা মেনু তৈরি করার সময় করে থাকি ।

এ ক্ষেত্রে ul হলো parentNode ।

li হলো childNodes ।

প্রথম li হলো firstChild এবং শেষের li হলো lastChild । আবার প্রত্যেকটি li কে চিহ্নিত করতে চাইলে এভাবে করা যাবে,

প্রথম li - childNodes[0],

দ্বিতীয় li - childNodes[1],

তৃতীয় li -childNodes[2],

চতুর্থ li - childNodes[3] ।

বলাবাহুল্য li গুলো পরস্পরের siblings । কারণ তাদের একটিই parent (ul)।

এদিকে li এর মধ্যে a হলো li এর childNodes । এবং li হলো ‍a এর parentNode ।

‍a এর ভিতরে text হলো a এর childNodes । ‍a হলো text এর parentNode ।

জাভাস্ক্রিপ্ট এই Node গুলোর মাধ্যমেই DOM এর মধ্যে গমনাগমন করে থাকে । যেকোন এলিমেন্টকে ধরা (access), পরিবর্তন করা (change), মুছে ফেলা (delete) কিংবা নতুন এলিমেন্ট যোগ করা (add) করা ইত্যাদি সব ধরনের কাজই করা হয় Node এর কিছু property/method ব্যবহার করে । এমন কি css style ও করা যায় ।

আপাতত Node বিষয়ে এতটুকু ধারণা থাকলেই যথেষ্ট । যখন জাভাস্ক্রিপ্ট শিখবেন তখন এটা কাজে লাগবে । এমন কি CSS style -এও আমরা এ ধারণাটিকে সহজেই কাজে লাগাতে পারি ।

আল্লাহ হাফেজ ।