DOM দেখা ও পরিবর্তন করা শুরু করুন

Kayce Basques

Sofia Emelianova

Chrome DevTools-এর সাহায্যে কোনও পৃষ্ঠার DOM দেখা ও পরিবর্তন করার প্রাথমিক বিষয়গুলি জানতে, ভিডিওটি দেখুন এবং এই ইন্টার‍্যাক্টিভ টিউটোরিয়াল সম্পূর্ণ করুন।

এই টিউটোরিয়ালে ধরে নেওয়া হয়েছে যে আপনি DOM ও HTML-এর মধ্যে পার্থক্য জানেন। পরিশিষ্ট: HTML বনাম DOM থেকে রিফ্রেশার পান।

DOM নোড দেখুন

DevTools-এ DOM-সম্পর্কিত সব অ্যাক্টিভিটি আপনি এলিমেন্ট প্যানেলের DOM ট্রি-তে করেন।

নোড পরীক্ষা করা

আপনি কোনও নির্দিষ্ট DOM নোড সম্পর্কে আগ্রহী হলে, DevTools খুলে সেই নোডটি পরীক্ষা করার দ্রুত উপায় হল পরীক্ষা করুন।

1. নিচের তালিকায়, Michelangelo-এর উপর মাউস রেখে ডানদিকের বোতামে ক্লিক করুন। মেনু থেকে, পরীক্ষা করুন বিকল্প বেছে নিন।

   • মাইকেল এঞ্জেলো
   • রাফায়েল

   DevTools-এর এলিমেন্ট প্যানেল খুলে যায়। DOM ট্রি-তে <li>Michelangelo</li> হাইলাইট করা হয়েছে।

   

2. একটি এলিমেন্ট বেছে নিন বিকল্পে ক্লিক করুন।

3. নিচের তালিকা থেকে টোকিও বেছে নিন।

   • টোকিও
   • বেইরুট

   DOM ট্রি-তে <li>Tokyo</li> হাইলাইট করা আছে।

এছাড়াও, নোডের স্টাইল ও CSS দেখা ও পরিবর্তন করার প্রথম ধাপ হল নোডটি পরীক্ষা করা।

কীবোর্ড ব্যবহার করে DOM ট্রি নেভিগেট করা

DOM ট্রি-তে কোনও নোড বেছে নেওয়ার পরে, আপনি কীবোর্ড দিয়ে DOM ট্রি নেভিগেট করতে পারবেন।

1. নিম্নলিখিত তালিকা থেকে, Ringo-এর উপর ডানদিকের বোতামে ক্লিক করে পরীক্ষা করুন বিকল্প বেছে নিন। DOM ট্রি-তে <li>Ringo</li> বেছে নেওয়া হয়েছে।

   • George
   • রিঙ্গো
   • পল

   • জন

     

2. উপরের দিকে তীরচিহ্ন কী ২ বার প্রেস করুন। <ul> বেছে নেওয়া হয়েছে।

   

3. বাঁদিকের তীরচিহ্ন কী টিপুন। <ul> তালিকা আড়াল হয়ে যায়।

4. আবার বাঁদিকের তীরচিহ্ন কী প্রেস করুন। <ul> নোডের পেরেন্ট বেছে নেওয়া হয়েছে। এই ক্ষেত্রে, এটি হল <li> নোড যাতে ধাপ ১-এর নির্দেশাবলী রয়েছে।

5. নিম্নমুখী তীরচিহ্ন তিনবার প্রেস করুন যাতে আপনি এইমাত্র বন্ধ করা <ul> তালিকা আবার বেছে নিতে পারেন। এটি এমন দেখতে হবে: <ul>...</ul>

6. ডানদিকের তীরচিহ্ন কী প্রেস করুন। তালিকাটি বড় হয়।

স্ক্রল করে ভিউতে নিয়ে আসা

DOM ট্রি দেখার সময়, কখনও কখনও আপনি এমন একটি DOM নোডে নিজেকে খুঁজে পাবেন যা ভিউপোর্টেই নেই। যেমন, ধরুন আপনি স্ক্রল করে পৃষ্ঠার নিচের দিকে গেছেন এবং পৃষ্ঠার সবচেয়ে উপরে থাকা <h1> নোডে আগ্রহী। স্ক্রল করে ভিউতে নিয়ে আসুন আপনাকে দ্রুত ভিউপোর্ট রিপজিশন করতে দেয় যাতে আপনি নোড দেখতে পান।

1. নিচের তালিকায়, Magritte-এর উপর ডানদিকের বোতামে ক্লিক করে পরীক্ষা করুন বিকল্প বেছে নিন।

   • ম্যাগরিট
   • Soutine

2. আরও নির্দেশাবলীর জন্য পরিশিষ্ট বিভাগে স্ক্রল করে ভিউতে যান।

সম্পূর্ণ হয়ে গেলে, আপনাকে আবার এই বিভাগে ফিরে আসতে হবে।

রুলার দেখান

আপনার ভিউপোর্টে রুলার থাকলে, আপনি এলিমেন্ট প্যানেলে কোনও এলিমেন্টের উপর মাউস নিয়ে গেলে সেটির প্রস্থ ও উচ্চতা পরিমাপ করতে পারবেন।

দুটি উপায়ের যেকোনও একটিতে রুলার চালু করুন:

• কমান্ড মেনু খুলতে Control+Shift+P অথবা Command+Shift+P (macOS) প্রেস করুন, Show rulers on hover টাইপ করে Enter প্রেস করুন।
• সেটিংস চেক করুন সেটিংস > পছন্দ > এলিমেন্ট > হোভার করার সময় রুলার দেখুন।

রুলারের সাইজ পিক্সেল ইউনিটে দেখানো হয়।

Node সার্চ করুন

আপনি স্ট্রিং, CSS বাছাইকারী বা XPath বাছাইকারীর মাধ্যমে DOM ট্রি সার্চ করতে পারবেন।

1. এলিমেন্ট প্যানেলে কার্সর ফোকাস করুন।
2. Control+F অথবা Command+F (macOS) প্রেস করুন। DOM ট্রি-এর নিচে সার্চ বার খোলে।

3. The Moon is a Harsh Mistress টাইপ করুন। শেষ বাক্যটি DOM ট্রি-তে হাইলাইট করা হয়েছে।

   

সার্চ বারে CSS এবং XPath সিলেক্টরও কাজ করে।

এলিমেন্ট প্যানেল DOM ট্রিতে প্রথম ম্যাচিং ফলাফল বেছে নেয় এবং ভিউ-পোর্টে এটি দেখায়। ডিফল্ট হিসেবে, আপনি টাইপ করার সময় এটি হয়। আপনি যদি সবসময় দীর্ঘ সার্চ কোয়েরি নিয়ে কাজ করেন, তাহলে আপনি DevTools-কে শুধুমাত্র তখনই সার্চ চালাতে বলতে পারেন যখন আপনি Enter প্রেস করবেন।

নোডের মধ্যে অপ্রয়োজনীয় জাম্প এড়াতে, সেটিংস সেটিংস > পছন্দ > গ্লোবাল > টাইপ করার সাথে সাথে সার্চ করুন চেকবক্স থেকে টিকচিহ্ন সরিয়ে দিন।

DOM এডিট করুন

আপনি চটপট DOM এডিট করতে পারবেন এবং সেই পরিবর্তনগুলি পৃষ্ঠায় কী প্রভাব ফেলছে তা দেখতে পারবেন।

কন্টেন্ট এডিট করুন

কোনও নোডের কন্টেন্ট এডিট করতে, DOM ট্রিতে কন্টেন্টের উপর ডবল-ক্লিক করুন।

1. নিচের তালিকায়, মিশেল নামের উপর ডানদিকের বোতামে ক্লিক করে পরীক্ষা করুন বিকল্প বেছে নিন।

   • ফ্রাই
   • মিশেল

2. DOM ট্রি-তে, Michelle-এ ডবল ক্লিক করুন। অন্যভাবে বলতে গেলে, <li> ও </li>-এর মধ্যে থাকা টেক্সটে ডবল ক্লিক করুন। টেক্সটটি নীল রঙে হাইলাইট করা হয়েছে, এটি বোঝাতে যে এটি বেছে নেওয়া হয়েছে।

   

3. Michelle মুছে দিন, Leela টাইপ করুন, তারপরে পরিবর্তনের বিষয়টি কনফার্ম করতে Enter টিপুন। টেক্সট Michelle থেকে Leela-তে পরিবর্তন করা হয়।

অ্যাট্রিবিউট এডিট করুন

অ্যাট্রিবিউট এডিট করতে, অ্যাট্রিবিউটের নাম বা ভ্যালুতে ডবল-ক্লিক করুন। নোডে কীভাবে অ্যাট্রিবিউট যোগ করতে হয় তা জানতে এইসব নির্দেশাবলী অনুসরণ করুন।

1. নিচের তালিকায়, Howard-এর উপর ডানদিকের বোতামে ক্লিক করে পরীক্ষা করুন বিকল্প বেছে নিন।

   • Howard
   • ভিন্স

2. <ul> বড় করুন, তারপর এডিট করতে <li>-এ ডবল ক্লিক করুন। নোড বেছে নেওয়া হয়েছে তা বোঝাতে টেক্সটটি হাইলাইট করা হয়েছে।

   

3. ডানদিকের তীরচিহ্ন প্রেস করুন, স্পেস যোগ করুন, style="background-color:gold" টাইপ করুন এবং তারপরে Enter প্রেস করুন। নোডের ব্যাকগ্রাউন্ডের রঙ পরিবর্তন হয়ে সোনালী হয়ে যায়।

   

নোডের ধরন এডিট করা

নোডের ধরন এডিট করতে, সেটির উপর ডবল ক্লিক করে নতুন ধরনটি টাইপ করুন।

1. নিচের তালিকায়, Hank-এ ডানদিকের বোতামে ক্লিক করে পরীক্ষা করুন বিকল্প বেছে নিন।

   • ডিন
   • ধন্যবাদ
   • Thaddeus
   • ব্রক

2. <li>-এ ডবল ক্লিক করুন। li টেক্সটটি হাইলাইট করা আছে।

3. li মুছে দিন, button টাইপ করুন, তারপর Enter টিপুন। <li> নোডটি পরিবর্তিত হয়ে <button> নোড হয়ে যায়।

   

HTML হিসেবে এডিট করুন

সিনট্যাক্স হাইলাইট ও অটো-কমপ্লিট সহ HTML হিসেবে নোড এডিট করতে, নোডের ড্রপ-ডাউন মেনু থেকে HTML হিসেবে এডিট করুন বিকল্প বেছে নিন।

1. নিচে Leonard-এ ডানদিকের বোতামে ক্লিক করে পরীক্ষা করুন বিকল্প বেছে নিন।

   • পেনি
   • Howard
   • রাজেশ
   • লিওনার্ড

2. এলিমেন্ট প্যানেলে, বর্তমান নোডে ডানদিকের বোতামে ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে HTML হিসেবে এডিট করুন বিকল্প বেছে নিন।

   

3. নতুন লাইন শুরু করতে Enter টিপুন এবং টাইপ করা শুরু করুন <l। DevTool HTML সিনট্যাক্স হাইলাইট করে এবং অটোমেটিক সম্পূর্ণ করার জন্য ট্যাগ সাজেস্ট করে।

   

4. অটোমেটিক সম্পূর্ণ করার মেনু থেকে li এলিমেন্ট বেছে নিন এবং > টাইপ করুন। DevTools অটোমেটিক কার্সরের পরে বন্ধ করার </li> ট্যাগ যোগ করে।

   

5. ট্যাগের মধ্যে Sheldon টাইপ করুন এবং পরিবর্তন প্রয়োগ করতে Control বা Command + Enter প্রেস করুন।

নোড ডুপ্লিকেট করা

আপনি ডুপ্লিকেট এলিমেন্ট রাইট-ক্লিক বিকল্প ব্যবহার করে কোনও এলিমেন্ট ডুপ্লিকেট করতে পারবেন।

1. নিচের তালিকায় নানা বিকল্পে ডানদিকের বোতামে ক্লিক করে পরীক্ষা করুন বিকল্প বেছে নিন।

   • বনফায়ার অফ দ্য ভ্যানিটিজ
   • নানা
   • অরল্যান্ডো
   • হোয়াইট নয়েজ

2. এলিমেন্ট প্যানেলে, <li>Nana</li>-এর উপর ডানদিকের বোতামে ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে ডুপ্লিকেট এলিমেন্ট বিকল্প বেছে নিন।

   

3. পৃষ্ঠায় ফিরে যান। তালিকার আইটেম ডুপ্লিকেট করা হয়েছে।

এছাড়াও, আপনি কীবোর্ড শর্টকাট ব্যবহার করতে পারেন: Shift + Alt + নিম্নমুখী তীরচিহ্ন (Windows ও Linux) এবং Shift + Option + নিম্নমুখী তীরচিহ্ন (macOS)।

নোডের স্ক্রিনশট ক্যাপচার করা

আপনি DOM ট্রি-তে যেকোনও স্বতন্ত্র নোডের স্ক্রিনশট নিতে পারবেন।

1. এই পৃষ্ঠার যেকোনও ছবিতে ডানদিকের বোতামে ক্লিক করুন এবং পরীক্ষা করুন বিকল্প বেছে নিন।

2. এলিমেন্ট প্যানেলে, ছবির URL-এ ডানদিকের বোতামে ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে নোড স্ক্রিনশট ক্যাপচার করুন বিকল্প বেছে নিন।

   

3. স্ক্রিনশট আপনার ডাউনলোডে সেভ করা হয় (Windows এবং macOS)।

DevTools-এর সাহায্যে স্ক্রিনশট ক্যাপচার করার ৪টি উপায় থেকে আরও জানুন।

DOM নোড আবার সাজানো

নোডগুলি আবার সাজাতে টেনে আনুন।

1. নিচের তালিকায়, এলভিস প্রেসলি-এর উপর ডানদিকের বোতামে ক্লিক করে পরীক্ষা করুন বিকল্প বেছে নিন। এটি তালিকার শেষ আইটেম।

   • Stevie Wonder
   • টম ওয়েটস
   • ক্রিস থাইল
   • এলভিস প্রেসলি

2. DOM ট্রি-তে, তালিকার একদম উপরে <li>Elvis Presley</li> টেনে আনুন।

ফোর্স স্টেট

আপনি নোডগুলিকে :active, :hover, :focus, :visited এবং :focus-within-এর মতো অবস্থায় থাকতে বাধ্য করতে পারেন।

1. The Lord of the Flies তালিকার আইটেমের উপর মাউস নিয়ে যান। ব্যাকগ্রাউন্ডের রঙ কমলা হয়ে যায়।

   • লর্ড অফ দ্য ফ্লাইস
   • অপরাধ ও শাস্তি
   • মোবি ডিক

2. The Lord of the Flies তালিকা আইটেমে ডানদিকের বোতামে ক্লিক করে ইন্সপেক্ট করুন বিকল্প বেছে নিন।

3. <li class="demo--hover">The Lord of the Flies</li>-এর উপর ডানদিকের বোতামে ক্লিক করে স্টেট ফোর্স করুন > :hover বিকল্প বেছে নিন। এই বিকল্প দেখতে না পেলে, অনুপস্থিত বিকল্প সংক্রান্ত পরিশিষ্ট পড়ুন।

   আপনি নোডের উপর মাউস না নিয়ে গেলেও ব্যাকগ্রাউন্ডের রঙ কমলা থেকে যায়।

নোড লুকানো

কোনও নোড লুকাতে H প্রেস করুন।

1. নিচের তালিকা থেকে, The Stars My Destination-এর উপর ডানদিকের বোতামে ক্লিক করুন এবং পরীক্ষা করুন বিকল্প বেছে নিন।

   • দ্য কাউন্ট অফ মন্টিক্রিস্টো
   • The Stars My Destination

2. H কী প্রেস করুন। নোড লুকানো আছে। এছাড়াও, আপনি নোডে ডানদিকের বোতামে ক্লিক করে এলিমেন্ট লুকান বিকল্প ব্যবহার করতে পারেন।

   

3. আবার H কী প্রেস করুন। নোডটি আবার দেখানো হয়।

নোড মুছে দেওয়া

কোনও নোড মুছে দিতে মুছুন বোতামে প্রেস করুন।

1. নিম্নলিখিত তালিকা থেকে, Foundation-এ ডানদিকের বোতামে ক্লিক করে পরীক্ষা করুন বিকল্প বেছে নিন।

   • দ্য ইলাস্ট্রেটেড ম্যান
   • থ্রু দ্য লুকিং-গ্লাস
   • ফাউন্ডেশন

2. Delete কী প্রেস করুন। নোড মুছে ফেলা হয়েছে। এছাড়াও, আপনি নোডের উপরে মাউস নিয়ে গিয়ে ডানদিকের বোতামে ক্লিক করে এলিমেন্ট মুছুন বিকল্প ব্যবহার করতে পারেন।

3. Control+Z অথবা Command+Z (macOS) প্রেস করুন। শেষ অ্যাকশন আগের অবস্থায় ফেরানো হয়েছে এবং নোড আবার দেখা যাচ্ছে।

কনসোলে নোড অ্যাক্সেস করা

Console থেকে DOM নোড অ্যাক্সেস করার জন্য DevTools কয়েকটি শর্টকাট প্রদান করে অথবা সেগুলির জন্য JavaScript রেফারেন্স পাওয়া যায়।

$0-এর সাথে বর্তমানে বেছে নেওয়া নোড রেফারেন্স করুন

আপনি কোনও নোড (::before বা ::after-এর মতো ছদ্ম-এলিমেন্ট সহ) পরীক্ষা করার সময়, নোডের পাশে == $0 টেক্সট থাকার অর্থ হল আপনি $0 ভেরিয়েবল সহ কনসোলে এই নোড রেফারেন্স করতে পারবেন।

1. The Left Hand of Darkness তালিকা আইটেমে ডানদিকের বোতামে ক্লিক করে ইন্সপেক্ট করুন বিকল্প বেছে নিন।

   • দ্য লেফট হ্যান্ড অফ ডার্কনেস
   • বালিয়াড়ি

2. কনসোল ড্রয়ার খুলতে Escape কী প্রেস করুন। এটি খুলতে আপনাকে Console বেছে নিতে হতে পারে।

3. $0 টাইপ করে Enter কী প্রেস করুন। এক্সপ্রেশনের ফলাফল হল $0-এর মূল্যায়ন হল <li>The Left Hand of Darkness</li>।

   

4. ফলাফলের উপরে মাউস নিয়ে যান। ভিউপোর্টে নোড হাইলাইট করা হয়েছে।

5. DOM ট্রি-তে <li>Dune</li> আইকনে ক্লিক করুন, কনসোলে আবার $0 টাইপ করুন এবং তারপর আবার Enter টিপুন। এখন, $0-এর মূল্যায়ন হল <li>Dune</li>।

   

গ্লোবাল ভেরিয়েবেল হিসেবে স্টোর করুন

আপনাকে যদি কোনও নোড একাধিকবার রেফার করতে হয়, তাহলে এটিকে গ্লোবাল ভেরিয়েবেল হিসেবে স্টোর করুন।

1. নিচের তালিকায়, The Big Sleep-এ ডানদিকের বোতামে ক্লিক করে পরীক্ষা করুন বিকল্প বেছে নিন।

   • দ্য বিগ স্লিপ
   • The Long Goodbye

2. DOM ট্রি-তে <li>The Big Sleep</li> আইকনে ডানদিকের বোতামে ক্লিক করে গ্লোবাল ভেরিয়েবেল হিসেবে সেভ করুন বিকল্প বেছে নিন। আপনি এই বিকল্প খুঁজে না পেলে, অনুপস্থিত বিকল্প সম্পর্কে পড়ুন।

3. কনসোলে temp1 টাইপ করে Enter প্রেস করুন। এক্সপ্রেশনের ফলাফল থেকে দেখা যায় যে ভেরিয়েবলটি নোড হিসেবে মূল্যায়ন করা হয়েছে। তালিকার আইটেম বড় করতে নোডে ক্লিক করুন।

   

JS পাথ কপি করুন

অটোমেটেড টেস্টে রেফারেন্স হিসেবে ব্যবহার করার জন্য কোনও নোডে JavaScript পাথ কপি করুন।

1. নিচের তালিকায়, The Brothers Karamazov-এর উপর ডানদিকের বোতামে ক্লিক করুন এবং পরীক্ষা করুন বিকল্প বেছে নিন।

   • দ্য ব্রাদার্স কারামাজভ
   • অপরাধ ও শাস্তি

2. DOM ট্রি-তে <li>The Brothers Karamazov</li>-এর উপর ডানদিকের বোতামে ক্লিক করে কপি করুন > JS পাথ কপি করুন বিকল্প বেছে নিন। নোড সমাধান করে এমন একটি document.querySelector() এক্সপ্রেশন আপনার ক্লিপবোর্ডে কপি করা হয়েছে।

3. কনসোলে এক্সপ্রেশন পেস্ট করতে Control+V অথবা Command+V (macOS) প্রেস করুন।

4. এক্সপ্রেশন মূল্যায়ন করতে Enter প্রেস করুন।

   

DOM পরিবর্তন হলে ব্রেক করুন

জাভাস্ক্রিপ্ট DOM পরিবর্তন করলে, DevTools আপনাকে পৃষ্ঠার জাভাস্ক্রিপ্ট পজ করতে দেয়। DOM পরিবর্তন ব্রেকপয়েন্ট সম্পর্কে পড়ুন।

পরবর্তী ধাপ

এটি DevTools-এ DOM-সম্পর্কিত বেশিরভাগ ফিচার কভার করে। DOM ট্রিতে নোডের উপরে মাউস রেখে ডানদিকের বোতামে ক্লিক করে এবং এই টিউটোরিয়ালে কভার করা হয়নি এমন বিকল্প নিয়ে পরীক্ষা করে আপনি বাকিগুলি খুঁজে দেখতে পারেন।

পড়তে থাকুন:

• এলিমেন্ট প্যানেল কীবোর্ড শর্টকাট সম্পর্কে পড়ুন।
• DevTools-এর সাহায্যে আপনি আর কী কী করতে পারেন তা জানতে, DevTools ডকুমেন্টেশন আরও পড়ুন।

DevTools টিমের সাথে যোগাযোগ করতে বা অন্যান্য ডেভেলপারদের থেকে সাহায্য পেতে DevTools কমিউনিটিতে অংশগ্রহণ করুন।

পরিশিষ্ট

নির্দিষ্ট বিষয় সম্পর্কে আরও জানুন।

HTML বনাম DOM

এই বিভাগে HTML ও DOM-এর মধ্যে পার্থক্য সংক্ষেপে ব্যাখ্যা করা হয়েছে।

আপনি যখন কোনও ওয়েব ব্রাউজার ব্যবহার করে https://example.com-এর মতো কোনও পৃষ্ঠার জন্য অনুরোধ করেন, তখন সার্ভার একটি HTML ডকুমেন্ট ফেরত পাঠায়:

<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

ব্রাউজার HTML পার্স করে এবং অবজেক্টের ট্রি তৈরি করে:

html
  head
    title
  body
    h1
    p
    script

অবজেক্ট বা নোডের এই ট্রি পৃষ্ঠার কন্টেন্ট দেখায়। একে ডকুমেন্ট অবজেক্ট মডেল বা সংক্ষেপে DOM বলা হয়। এই মুহূর্তে, DOM এবং HTML উভয় ক্ষেত্রেই অবজেক্ট একই আছে।

ধরা যাক, HTML-এর নিচে থাকা script.js ফাইলে নিম্নলিখিত ফাংশনগুলি অন্তর্ভুক্ত আছে:

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

সেই স্ক্রিপ্ট h1 নোড সরিয়ে দেয় এবং DOM-এ অন্য একটি p নোড যোগ করে। DOM এখন এইভাবে দেখাচ্ছে:

html
  head
    title
  body
    p
    script
    p

পৃষ্ঠার HTML এখন তার DOM থেকে আলাদা।

HTML প্রাথমিক পৃষ্ঠার কন্টেন্ট দেখায় এবং DOM অ্যাক্টিভ, বর্তমান পৃষ্ঠার কন্টেন্ট দেখায়। জাভাস্ক্রিপ্ট নোড যোগ করলে, সরালে বা এডিট করলে, DOM HTML-এর থেকে আলাদা হয়ে যায়।

MDN-এর DOM-এর ভূমিকা থেকে আরও জানুন।

স্ক্রল করে ভিউতে যান

এটি স্ক্রল করে দৃশ্যমান করা বিভাগের ধারাবাহিকতা। বিভাগটি সম্পূর্ণ করতে নির্দেশাবলী অনুসরণ করুন।

1. আপনার DOM ট্রি-তে <li>Magritte</li> নোড এখনও বেছে নেওয়া থাকতে হবে। তা না হলে, স্ক্রল করে দেখুন বিকল্পে ফিরে যান এবং আবার শুরু করুন।

2. <li>Magritte</li> নোডে ডানদিকের বোতামে ক্লিক করে স্ক্রল করে দেখুন বিকল্প বেছে নিন। আপনার ভিউপোর্ট আবার উপরে স্ক্রল করে যাতে আপনি Magritte নোড দেখতে পান। দেখার জন্য স্ক্রল করুন বিকল্পটি দেখতে না পেলে, অনুপস্থিত বিকল্প সম্পর্কে পড়ুন।

   

বিকল্প নেই

এই টিউটোরিয়ালের অনেক নির্দেশাবলীতে আপনাকে DOM ট্রি-তে কোনও নোডের উপর মাউসের ডানদিকের বোতামে ক্লিক করতে এবং তারপরে পপ-আপ করা প্রসঙ্গ মেনু থেকে একটি বিকল্প বেছে নিতে বলা হয়েছে। আপনি যদি সংশ্লিষ্ট মেনুতে নির্দিষ্ট বিকল্পটি দেখতে না পান, তাহলে নোড টেক্সট থেকে দূরে ডানদিকের বোতামে ক্লিক করে দেখুন।