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

Kayce Basques

Sofia Emelianova

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

এই টিউটোরিয়ালটি ধরে নেয় যে আপনি DOM এবং HTML-এর মধ্যে পার্থক্য জানেন। পরিশিষ্টে 'HTML বনাম DOM' অংশটি দেখে নিন।

DOM নোডগুলি দেখুন

ডেভটুলস-এর এলিমেন্টস প্যানেলের DOM ট্রি-তেই DOM-সম্পর্কিত সমস্ত কাজ করা হয়।

একটি নোড পরিদর্শন করুন

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

1. নিচের তালিকায়, মাইকেলেঞ্জেলোর উপর রাইট-ক্লিক করুন। মেনু থেকে, ইন্সপেক্ট নির্বাচন করুন।

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

   DevTools-এর Elements প্যানেলটি খোলে। DOM Tree- তে <li>Michelangelo</li> হাইলাইট করা থাকে।

   

2. ক্লিক করুনএকটি উপাদান নির্বাচন করুন ।

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

   • টোকিও
   • বৈরুত

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

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

কিবোর্ডের সাহায্যে DOM ট্রি-তে নেভিগেট করুন

একবার DOM ট্রি-তে কোনো নোড নির্বাচন করার পর, আপনি আপনার কিবোর্ড ব্যবহার করে DOM ট্রি-তে চলাচল করতে পারবেন।

1. নিচের তালিকা থেকে, রিঙ্গোর উপর রাইট-ক্লিক করুন এবং 'Inspect' নির্বাচন করুন। DOM Tree-তে <li>Ringo</li> নির্বাচিত হবে।

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

   • জন

     

2. আপ অ্যারো কী দুইবার চাপুন। <ul> নির্বাচিত হবে।

   

3. বাম তীরচিহ্ন কী চাপুন। <ul> তালিকাটি সংকুচিত হয়ে যাবে।

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

5. ডাউন অ্যারো কী তিনবার চাপুন, যাতে আপনি এইমাত্র সংকুচিত করা <ul> তালিকাটি পুনরায় নির্বাচিত করেন। এটি দেখতে এইরকম হবে: <ul>...</ul>

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

স্ক্রোল করে দেখুন

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

1. নিচের তালিকায় Magritte-এর উপর রাইট-ক্লিক করুন এবং Inspect নির্বাচন করুন।

   • ম্যাগরিট
   • সুটিন

2. পরিশিষ্ট অংশে স্ক্রোল করুন। অতিরিক্ত নির্দেশাবলীর জন্য স্ক্রোল করে দৃশ্যটি খুলুন ।

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

শাসকদের দেখান

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

দুটি উপায়ের যেকোনো একটিতে শাসকদের সক্রিয় করুন:

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

রুলারগুলোর মাপের একক হলো পিক্সেল।

নোড অনুসন্ধান করুন

আপনি স্ট্রিং, CSS সিলেক্টর বা XPath সিলেক্টর ব্যবহার করে DOM ট্রি-তে অনুসন্ধান করতে পারেন।

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

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

   

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

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

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

DOM সম্পাদনা করুন

আপনি তাৎক্ষণিকভাবে DOM সম্পাদনা করতে পারেন এবং দেখতে পারেন যে সেই পরিবর্তনগুলি পৃষ্ঠাটিকে কীভাবে প্রভাবিত করে।

বিষয়বস্তু সম্পাদনা করুন

কোনো নোডের বিষয়বস্তু সম্পাদনা করতে, DOM ট্রি-তে থাকা বিষয়বস্তুটির উপর ডাবল-ক্লিক করুন।

1. নিচের তালিকায়, Michelle-এর উপর রাইট-ক্লিক করুন এবং Inspect নির্বাচন করুন।

   • ভাজা
   • মিশেল

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

   

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

অ্যাট্রিবিউট সম্পাদনা করুন

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

1. নিচের তালিকায়, Howard-এর উপর রাইট-ক্লিক করুন এবং Inspect নির্বাচন করুন।

   • হাওয়ার্ড
   • ভিন্স

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

   

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

   

নোড টাইপ সম্পাদনা করুন

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

1. নিচের তালিকায়, Hank-এর উপর রাইট-ক্লিক করুন এবং Inspect নির্বাচন করুন।

   • ডিন
   • হ্যাঙ্ক
   • থাডিয়াস
   • ব্রক

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

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

   

এইচটিএমএল হিসাবে সম্পাদনা করুন

সিনট্যাক্স হাইলাইটিং এবং অটোকমপ্লিট সহ নোডগুলিকে HTML হিসাবে সম্পাদনা করতে, নোডের ড্রপ-ডাউন মেনু থেকে 'Edit as HTML' নির্বাচন করুন।

1. নিচে থাকা লিওনার্ডের উপর রাইট-ক্লিক করুন এবং ইন্সপেক্ট নির্বাচন করুন।

   • পেনি
   • হাওয়ার্ড
   • রাজেশ
   • লিওনার্ড

2. এলিমেন্টস প্যানেলে, বর্তমান নোডটির উপর রাইট-ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে ‘Edit as HTML’ নির্বাচন করুন।

   

3. নতুন লাইন শুরু করতে এন্টার চাপুন এবং <l টাইপ করা শুরু করুন। ডেভটুল এইচটিএমএল সিনট্যাক্স হাইলাইট করে এবং অটোকমপ্লিট করার জন্য ট্যাগ সাজেস্ট করে।

   

4. অটোকমপ্লিট মেনু থেকে li এলিমেন্টটি সিলেক্ট করে > টাইপ করুন। DevTools স্বয়ংক্রিয়ভাবে কার্সরের পরে ক্লোজিং </li> ট্যাগটি যোগ করে দেয়।

   

5. ট্যাগের ভিতরে Sheldon টাইপ করুন এবং পরিবর্তনগুলি প্রয়োগ করতে Control অথবা Command + Enter চাপুন।

একটি নোড নকল করুন

আপনি ‘ডুপ্লিকেট এলিমেন্ট’ রাইট-ক্লিক অপশনটি ব্যবহার করে কোনো এলিমেন্টের প্রতিলিপি তৈরি করতে পারেন।

1. নিচের তালিকায় Nana-র উপর রাইট-ক্লিক করুন এবং Inspect নির্বাচন করুন।

   • অহংকারের অগ্নিকুণ্ড
   • নানা
   • অরল্যান্ডো
   • সাদা কোলাহল

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

   

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

আপনি কিবোর্ড শর্টকাটগুলোও ব্যবহার করতে পারেন: Shift + Alt + Down arrow (Windows এবং Linux) এবং Shift + Option + Down arrow (macOS)।

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

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

1. এই পৃষ্ঠার যেকোনো ছবিতে ডান-ক্লিক করুন এবং 'Inspect' নির্বাচন করুন।

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

   

3. স্ক্রিনশটটি আপনার ডাউনলোড ফোল্ডারে সংরক্ষিত হয় ( উইন্ডোজ এবং ম্যাকওএস )।

DevTools দিয়ে স্ক্রিনশট নেওয়ার ৪টি উপায় সম্পর্কে আরও জানুন।

DOM নোডগুলির পুনর্বিন্যাস করুন

নোডগুলোর ক্রম পরিবর্তন করতে সেগুলোকে টেনে আনুন।

1. নিচের তালিকায়, এলভিস প্রেসলির উপর রাইট-ক্লিক করুন এবং 'Inspect ' নির্বাচন করুন। এটি তালিকার শেষ আইটেম।

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

2. DOM ট্রি-তে, <li>Elvis Presley</li> কে টেনে তালিকার শীর্ষে নিয়ে যান।

বল অবস্থা

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

1. ‘The Lord of the Flies’ তালিকা আইটেমটির উপর মাউস রাখুন। পটভূমির রঙ কমলা হয়ে যাবে।

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

2. The Lord of the Flies তালিকা আইটেমটির উপর রাইট-ক্লিক করুন এবং Inspect নির্বাচন করুন।

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

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

একটি নোড লুকান

একটি নোড লুকানোর জন্য H চাপুন।

1. নিচের তালিকা থেকে, The Stars My Destination-এর উপর রাইট-ক্লিক করুন এবং Inspect নির্বাচন করুন।

   • দ্য কাউন্ট অফ মন্টে ক্রিস্টো
   • তারারা আমার গন্তব্য

2. H কী চাপুন। নোডটি লুকানো থাকবে। এছাড়াও আপনি নোডটির উপর রাইট-ক্লিক করে ‘ Hide element’ অপশনটি ব্যবহার করতে পারেন।

   

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

একটি নোড মুছে ফেলুন

নোডটি মুছে ফেলতে ডিলিট চাপুন।

1. নিচের তালিকা থেকে, Foundation-এর উপর রাইট-ক্লিক করুন এবং Inspect নির্বাচন করুন।

   • চিত্রিত মানুষ
   • আয়নার মধ্য দিয়ে
   • ফাউন্ডেশন

2. ডিলিট কী চাপুন। নোডটি মুছে যাবে। এছাড়াও আপনি নোডটির উপর রাইট-ক্লিক করে ' ডিলিট এলিমেন্ট' অপশনটি ব্যবহার করতে পারেন।

3. Control + Z অথবা Command + Z (macOS) চাপুন। শেষ কাজটি বাতিল হয়ে যাবে এবং নোডটি পুনরায় প্রদর্শিত হবে।

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

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

বর্তমানে নির্বাচিত নোডটিকে $0 দিয়ে উল্লেখ করুন।

যখন আপনি কোনো নোড পরিদর্শন করেন, তখন নোডটির পাশে থাকা == $0 লেখাটির অর্থ হলো, আপনি কনসোলে $0 ভেরিয়েবলটি ব্যবহার করে এই নোডটিকে উল্লেখ করতে পারবেন।

1. The Left Hand of Darkness লিস্ট আইটেমটিতে রাইট-ক্লিক করুন এবং Inspect নির্বাচন করুন।

   • অন্ধকারের বাম হাত
   • টিলা

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

3. $0 টাইপ করুন এবং এন্টার কী চাপুন। এক্সপ্রেশনটির ফলাফল হলো যে $0 এর মান হবে <li>The Left Hand of Darkness</li> ।

   

4. ফলাফলের উপর মাউস রাখুন। ভিউপোর্টে নোডটি হাইলাইট হবে।

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

   

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

যদি কোনো নোডকে বারবার উল্লেখ করার প্রয়োজন হয়, তবে সেটিকে একটি গ্লোবাল ভেরিয়েবল হিসেবে সংরক্ষণ করুন।

1. নিচের তালিকায়, The Big Sleep-এর উপর রাইট-ক্লিক করুন এবং Inspect নির্বাচন করুন।

   • বড় ঘুম
   • দীর্ঘ বিদায়

2. DOM ট্রি-তে থাকা <li>The Big Sleep</li> উপর রাইট-ক্লিক করুন এবং 'Store as global variable' নির্বাচন করুন। যদি আপনি এই অপশনটি খুঁজে না পান, তাহলে অনুপস্থিত অপশনগুলো সম্পর্কে পড়ুন।

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

   

JS পাথ কপি করুন

স্বয়ংক্রিয় পরীক্ষায় কোনো নোডকে রেফারেন্স করার জন্য তার জাভাস্ক্রিপ্ট পাথটি কপি করুন।

1. নিচের তালিকায়, The Brothers Karamazov-এর উপর রাইট-ক্লিক করুন এবং Inspect নির্বাচন করুন।

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

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

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

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

   

DOM পরিবর্তনে বিরতি

যখন কোনো জাভাস্ক্রিপ্ট DOM পরিবর্তন করে, তখন DevTools আপনাকে সেই পেজের জাভাস্ক্রিপ্ট থামিয়ে দেওয়ার সুযোগ দেয়। DOM পরিবর্তন ব্রেকপয়েন্ট সম্পর্কে পড়ুন।

পরবর্তী পদক্ষেপ

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

পড়তে থাকুন:

• এলিমেন্টস প্যানেলের কিবোর্ড শর্টকাটগুলো সম্পর্কে পড়ুন।
• 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="/https/developer.chrome.com/script.js" async></script>
  </body>
</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-এর ' Introduction to the DOM'- এ আরও জানুন।

স্ক্রোল করে দেখুন

এটি ‘স্ক্রোল ইনটু ভিউ’ অংশের ধারাবাহিক অংশ। অংশটি সম্পূর্ণ করতে নির্দেশাবলী অনুসরণ করুন।

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

2. <li>Magritte</li> নোডটিতে রাইট-ক্লিক করুন এবং 'Scroll into view' নির্বাচন করুন। আপনার ভিউপোর্টটি উপরে স্ক্রল হয়ে যাবে, ফলে আপনি Magritte নোডটি দেখতে পাবেন। যদি 'Scroll into view' অপশনটি না থাকে, তবে অনুপস্থিত অপশনগুলো সম্পর্কে পড়ুন।

   

অনুপস্থিত বিকল্পগুলি

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