লেখার সময়কাল:
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 -এও আমরা এ ধারণাটিকে সহজেই কাজে লাগাতে পারি ।
আল্লাহ হাফেজ
।
