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

Kayce Basques

Sofia Emelianova

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

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

DOM নোড দেখুন

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

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

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

1. নীচে Michelangelo ডান-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন।
   • মাইকেল এঞ্জেলো
   • রাফায়েল DevTools-এর Elements প্যানেল খোলে। <li>Michelangelo</li> DOM ট্রিতে হাইলাইট করা হয়েছে।
2. DevTools-এর উপরের-বাম কোণে পরিদর্শন আইকনে ক্লিক করুন।

3. নীচের টোকিও টেক্সট ক্লিক করুন.

   • টোকিও

   • বৈরুত

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

একটি নোড পরিদর্শন করাও একটি নোডের শৈলী দেখার এবং পরিবর্তন করার প্রথম পদক্ষেপ। সিএসএস দেখা এবং পরিবর্তন করা শুরু করুন দেখুন।

একটি কীবোর্ড দিয়ে DOM ট্রি নেভিগেট করুন

একবার আপনি DOM ট্রিতে একটি নোড নির্বাচন করলে, আপনি আপনার কীবোর্ড দিয়ে DOM ট্রি নেভিগেট করতে পারেন।

1. নীচের রিংগোতে ডান-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন। DOM ট্রিতে <li>Ringo</li> নির্বাচন করা হয়েছে।

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

   • জন

     

2. আপ অ্যারো কী 2 বার টিপুন। <ul> নির্বাচন করা হয়েছে।

   

3. বাম তীর কী টিপুন। <ul> তালিকাটি ভেঙে পড়ে।

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

5. নিচের তীর কীটি 3 বার টিপুন যাতে আপনি <ul> তালিকাটি পুনঃনির্বাচন করেছেন যেটি আপনি এইমাত্র ভেঙেছেন। এটি এইরকম হওয়া উচিত: <ul>...</ul>

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

দৃশ্যে স্ক্রোল করুন

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

1. নীচে ম্যাগ্রিটে রাইট-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন।

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

2. পরিশিষ্টে যান: এই পৃষ্ঠার নীচে ভিউ বিভাগে স্ক্রোল করুন । সেখানে নির্দেশনা চলতে থাকে।

পৃষ্ঠার নীচে নির্দেশাবলী সম্পূর্ণ করার পরে আপনাকে এখানে ফিরে যেতে হবে।

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

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

দুটি উপায়ের একটিতে শাসকগুলিকে সক্ষম করুন:

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

শাসকদের সাইজিং ইউনিট হল পিক্সেল।

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

আপনি স্ট্রিং, CSS নির্বাচক, বা XPath নির্বাচক দ্বারা DOM ট্রি অনুসন্ধান করতে পারেন।

1. এলিমেন্টস প্যানেলে আপনার কার্সারকে ফোকাস করুন।
2. কন্ট্রোল + এফ বা কমান্ড + এফ (ম্যাক) টিপুন। অনুসন্ধান বারটি DOM গাছের নীচে খোলে।

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

   

উপরে উল্লিখিত হিসাবে, অনুসন্ধান বার CSS এবং XPath নির্বাচকদের সমর্থন করে।

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

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

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

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

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

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

1. নীচে মিশেল রাইট-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন।

   • ভাজা
   • মিশেল

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

   

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

গুণাবলী সম্পাদনা করুন

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

1. নিচের হাওয়ার্ডে ডান-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন।

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

2. <li> ডাবল-ক্লিক করুন। নোডটি নির্বাচিত হয়েছে তা নির্দেশ করার জন্য পাঠ্যটি হাইলাইট করা হয়েছে।

   

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

   

আপনি সম্পাদনা বৈশিষ্ট্য ডান-ক্লিক বিকল্পটিও ব্যবহার করতে পারেন।

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

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

1. নীচের হ্যাঙ্কে ডান-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন।

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

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

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

   

HTML হিসাবে সম্পাদনা করুন

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

1. নীচে লিওনার্ড রাইট-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন।

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

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

   

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

   

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

   

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

   

একটি নোড সদৃশ

আপনি ডুপ্লিকেট উপাদান ডান-ক্লিক বিকল্প ব্যবহার করে একটি উপাদান নকল করতে পারেন।

1. নীচে Nana রাইট-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন।

   • ভ্যানিটিসের বনফায়ার
   • নানা
   • অরল্যান্ডো
   • সাদা গোলমাল

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

   

3. পাতায় ফিরে যান। তালিকা আইটেম অবিলম্বে সদৃশ করা হয়েছে.

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

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

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

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

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

   

3. স্ক্রিনশটটি আপনার ডাউনলোডগুলিতে সংরক্ষণ করা হবে।

   

Devtools-এর সাহায্যে স্ক্রিনশট নেওয়ার আরও উপায় জানতে, DevTools দিয়ে স্ক্রিনশট নেওয়ার 4টি উপায় দেখুন।

DOM নোড পুনরায় সাজান

নোডগুলিকে পুনরায় সাজাতে টেনে আনুন।

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

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

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

   

ফোর্স স্টেট

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

1. নীচের লর্ড অফ দ্য ফ্লাইসের উপর হোভার করুন। পটভূমির রঙ কমলা হয়ে যায়।

   • মাছির প্রভু
   • অপরাধ এবং শাস্তি
   • মবি ডিক

2. উপরে দ্য লর্ড অফ দ্য ফ্লাইস রাইট-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন।

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

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

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

1. নীচে দ্য স্টারস মাই ডেস্টিনেশনে ডান-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন।

   • মন্টে ক্রিস্টোর কাউন্ট
   • দ্য স্টারস মাই ডেস্টিনেশন

2. H কী টিপুন। নোড লুকানো হয়. আপনি নোডটিতে ডান-ক্লিক করতে পারেন এবং উপাদান লুকান বিকল্পটি ব্যবহার করতে পারেন।

   

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

একটি নোড মুছুন

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

1. নীচের ফাউন্ডেশনে ডান-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন।

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

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

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

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

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

$0 সহ বর্তমানে নির্বাচিত নোড উল্লেখ করুন

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

1. নীচের বাম হাতের অন্ধকারে ডান-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন।

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

2. কনসোল ড্রয়ার খুলতে Escape কী টিপুন।

3. $0 টাইপ করুন এবং এন্টার কী টিপুন। অভিব্যক্তির ফলাফল দেখায় যে $0 মূল্যায়ন করে <li>The Left Hand of Darkness</li> ।

   

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

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

   

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

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

1. নিচের The Big Sleep-এ ডান-ক্লিক করুন এবং Inspect নির্বাচন করুন।

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

2. DOM Tree-এ <li>The Big Sleep</li> এ ডান-ক্লিক করুন এবং গ্লোবাল ভেরিয়েবল হিসেবে স্টোর নির্বাচন করুন। পরিশিষ্ট দেখুন: অনুপস্থিত বিকল্প যদি আপনি এই বিকল্পটি দেখতে না পান।

3. কনসোলে temp1 টাইপ করুন এবং তারপর এন্টার টিপুন। অভিব্যক্তির ফলাফল দেখায় যে ভেরিয়েবলটি নোডে মূল্যায়ন করে।

   

JS পাথ কপি করুন

যখন আপনি একটি স্বয়ংক্রিয় পরীক্ষায় এটি উল্লেখ করতে হবে তখন একটি নোডে জাভাস্ক্রিপ্ট পাথটি অনুলিপি করুন।

1. নীচের ব্রাদার্স কারামাজভ রাইট-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন।

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

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

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

4. অভিব্যক্তি মূল্যায়ন করতে এন্টার টিপুন।

   

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

DevTools আপনাকে একটি পৃষ্ঠার JavaScript পজ করার অনুমতি দেয় যখন JavaScript DOM পরিবর্তন করে। DOM পরিবর্তন ব্রেকপয়েন্ট দেখুন।

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

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

DevTools এর সাথে আপনি যা করতে পারেন তা আবিষ্কার করতে Chrome 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
  head
    title
  body
    h1
    p
    script

পৃষ্ঠার বিষয়বস্তুর প্রতিনিধিত্বকারী বস্তু বা নোডের এই গাছটিকে DOM বলা হয়। এই মুহুর্তে এটি HTML এর মতোই দেখায়, কিন্তু ধরুন যে HTML এর নীচে উল্লেখ করা স্ক্রিপ্টটি এই কোডটি চালায়:

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 থেকে আলাদা। অন্য কথায়, এইচটিএমএল প্রারম্ভিক পৃষ্ঠা বিষয়বস্তু প্রতিনিধিত্ব করে, এবং DOM বর্তমান পৃষ্ঠা বিষয়বস্তু প্রতিনিধিত্ব করে। যখন জাভাস্ক্রিপ্ট নোড যোগ করে, অপসারণ করে বা সম্পাদনা করে, তখন DOM HTML থেকে আলাদা হয়ে যায়।

আরও জানতে DOM-এর ভূমিকা দেখুন।

পরিশিষ্ট: দৃশ্যে স্ক্রোল করুন

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

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

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

   

পরিশিষ্ট: অনুপস্থিত বিকল্প

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