شروع کار با مشاهده و تغییر DOM

Kayce Basques

Sofia Emelianova

برای آشنایی با اصول اولیه مشاهده و تغییر DOM صفحه با Chrome DevTools، ویدیو را تماشا کنید و این آموزش‌های تعاملی را تکمیل کنید.

این آموزش فرض می‌کند که شما تفاوت بین DOM و HTML را می‌دانید. در پیوست: HTML درمقابل DOM، اطلاعاتتان را به‌روز کنید.

مشاهده گره‌های DOM

درخت DOM پانل عناصر جایی است که همه فعالیت‌های مربوط به DOM را در DevTools انجام می‌دهید.

بازرسی کردن گره

وقتی به گره DOM خاصی علاقه‌مند هستید، بازرسی روشی سریع برای باز کردن «ابزارهای توسعه‌دهندگان» و بررسی آن گره است.

1. در فهرست زیر، روی Michelangelo کلیک راست کنید. از منو، بازرسی را انتخاب کنید.

   • میکل‌آنژ
   • رافائل

   پانل عناصر DevTools باز می‌شود. ‫<li>Michelangelo</li> در درخت DOM برجسته می‌شود.

   

2. روی انتخاب عنصر کلیک کنید.

3. توکیو را از فهرست زیر انتخاب کنید.

   • توکیو
   • بیروت

   ‫<li>Tokyo</li> در «درخت DOM» برجسته شده است.

بازرسی گره همچنین اولین گام برای مشاهده و تغییر سبک‌ها و CSS گره است.

پیمایش کردن درخت DOM با صفحه‌کلید

پس‌از انتخاب گره در «درخت DOM»، می‌توانید با صفحه‌کلید در «درخت DOM» پیمایش کنید.

1. از فهرست زیر، روی Ringo کلیک راست کنید و بازرسی را انتخاب کنید. ‫<li>Ringo</li> در «درخت DOM» انتخاب شده است.

   • George
   • رینگو
   • پل

   • John

     

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 را فشار دهید.
• تنظیمات را بررسی کنید تنظیمات > اولویت‌ها > عناصر > نمایش خط‌کش‌ها در حالت شناور.

واحد اندازه‌گیری خط‌کش‌ها پیکسل است.

جستجوی گره‌ها

می‌توانید «درخت DOM» را براساس رشته، گزینشگر CSS، یا گزینشگر XPath جستجو کنید.

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. در فهرست زیر، روی Michelle کلیک راست کنید و Inspect (بازرسی) را انتخاب کنید.

   • سرخ کردن
   • سارا

2. در «درخت DOM»، روی Michelle دوکلیک کنید. به عبارت دیگر، روی نوشتار بین <li> و </li> دوکلیک کنید. نوشتار با رنگ آبی برجسته می‌شود تا نشان دهد که انتخاب شده است.

   

3. برای حذف Michelle، Leela را تایپ کنید، سپس برای تأیید تغییر، کلید Enter را فشار دهید. نوشتار از Michelle به Leela تغییر می‌کند.

ویرایش مشخصه‌ها

برای ویرایش مشخصه‌ها، روی نام یا مقدار مشخصه دوکلیک کنید. برای آشنایی با نحوه افزودن مشخصه به گره، این دستورالعمل‌ها را دنبال کنید.

1. در فهرست زیر، روی Howard کلیک‌راست کنید و بازرسی را انتخاب کنید.

   • Howard
   • وینس

2. <ul> را ازهم باز کنید، سپس برای ویرایش روی <li> دوکلیک کنید. نوشتار برجسته می‌شود تا نشان دهد گره انتخاب شده است.

   

3. کلید جهت‌نمای راست را فشار دهید، فاصله اضافه کنید، style="background-color:gold" را تایپ کنید، و سپس کلید ورود را فشار دهید. رنگ پس‌زمینه گره به طلایی تغییر می‌کند.

   

ویرایش نوع گره

برای ویرایش نوع گره، روی نوع دوکلیک کنید و سپس نوع جدید را تایپ کنید.

1. در فهرست زیر، روی Hank کلیک‌راست کنید و بازرسی را انتخاب کنید.

   • دین
   • هنک
   • تادئوس
   • براک

2. روی <li> دوکلیک کنید. نوشتار li برجسته شده است.

3. li را حذف کنید، button را تایپ کنید، سپس کلید Enter را فشار دهید. گره <li> به گره <button> تغییر می‌کند.

   

ویرایش به‌عنوان HTML

برای ویرایش گره‌ها به‌عنوان HTML با برجسته‌سازی نحو و تکمیل خودکار، ویرایش به‌عنوان HTML را از منوِ کرکره‌ای گره انتخاب کنید.

1. روی Leonard در زیر کلیک راست کنید و بازرسی را انتخاب کنید.

   • پنی
   • Howard
   • Rajesh
   • لئونارد

2. در پانل عناصر، روی گره کنونی کلیک راست کنید و از منو کرکره‌ای، ویرایش به‌عنوان HTML را انتخاب کنید.

   

3. برای شروع خط جدید، کلید Enter را فشار دهید و شروع به تایپ کردن <l کنید. DevTool نحو HTML را برجسته می‌کند و برچسب‌هایی را برای تکمیل خودکار پیشنهاد می‌دهد.

   

4. عنصر li را از منو تکمیل خودکار انتخاب کنید و > را تایپ کنید. DevTools به‌طور خودکار برچسب پایانی </li> را بعداز مکان‌نما اضافه می‌کند.

   

5. Sheldon را داخل برچسب تایپ کنید و برای اعمال تغییرات، Control یا Command + Enter را فشار دهید.

تکرار کردن گره

می‌توانید بااستفاده از گزینه کلیک راست تکرار عنصر، عنصر را تکرار کنید.

1. روی Nana در فهرست زیر کلیک راست کنید و بازرسی را انتخاب کنید.

   • آتش غرور
   • Nana
   • اورلاندو
   • نوفه سفید

2. در پانل عناصر، روی <li>Nana</li> کلیک راست کنید و تکرار عنصر را از منوِ کرکره‌ای انتخاب کنید.

   

3. به صفحه برگردید. مورد فهرست تکثیر شد.

همچنین می‌توانید از میان‌برهای صفحه‌کلید استفاده کنید: تبدیل + دگرساز + کلید پایین‌بر (Windows و Linux) و تبدیل + گزینه + کلید پایین‌بر (macOS).

ضبط کردن نماگرفت گره

می‌توانید از هر گره تکی در «درخت DOM» نماگرفت بگیرید.

1. روی هر تصویری در این صفحه کلیک راست کنید و بازرسی را انتخاب کنید.

2. در پانل عناصر، روی نشانی وب تصویر کلیک راست کنید و ضبط نماگرفت گره را از منوِ کرکره‌ای انتخاب کنید.

   

3. نماگرفت در بارگیری‌های شما ذخیره می‌شود (Windows و macOS).

در ۴ روش برای گرفتن نماگرفت با DevTools بیشتر بدانید.

تغییر ترتیب گره‌های DOM

برای تغییر دادن ترتیب گره‌ها، آن‌ها را بکشید.

1. در فهرست زیر، روی Elvis Presley کلیک راست کنید و Inspect (بازرسی) را انتخاب کنید. این آخرین مورد در فهرست است.

   • استیوی واندر
   • تام ویتس
   • کریس تیل
   • الویس پریسلی

2. در «درخت DOM»، ‏<li>Elvis Presley</li> را به بالای فهرست بکشید.

وضعیت نیرو

می‌توانید گره‌ها را مجبور کنید در حالت‌هایی مثل :active، :hover، :focus، :visited، و :focus-within باقی بمانند.

1. نشانگر را روی مورد فهرست سالار مگس‌ها نگه دارید. رنگ پس‌زمینه نارنجی می‌شود.

   • سالار مگس‌ها
   • جنایت و مکافات
   • موبی دیک

2. روی مورد فهرست سالار مگس‌ها کلیک راست کنید و بازرسی را انتخاب کنید.

3. روی <li class="demo--hover">The Lord of the Flies</li> کلیک راست کنید و وضعیت اجباری > :hover را انتخاب کنید. اگر این گزینه را نمی‌بینید، پیوست مربوط به گزینه‌های ازدست‌رفته را بخوانید.

   رنگ پس‌زمینه نارنجی باقی می‌ماند، حتی اگر درواقع روی گره نگه ندارید.

پنهان کردن گره

برای پنهان کردن گره، H را فشار دهید.

1. از فهرست زیر، روی The Stars My Destination کلیک راست کنید و بازرسی را انتخاب کنید.

   • کنت مونت کریستو
   • ستاره‌ها مقصد من

2. کلید H را فشار دهید. گره پنهان است. همچنین می‌توانید روی گره کلیک راست کنید و از گزینه پنهان کردن عنصر استفاده کنید.

   

3. کلید H را دوباره فشار دهید. گره دوباره نشان داده می‌شود.

حذف کردن گره

برای حذف گره، حذف را فشار دهید.

1. از فهرست زیر، روی Foundation کلیک راست کنید و بازرسی را انتخاب کنید.

   • مرد مصور
   • آن‌سوی آینه
   • کرم فونداسیون

2. کلید Delete را فشار دهید. گره حذف شده است. همچنین می‌توانید روی گره کلیک راست کنید و از گزینه حذف عنصر استفاده کنید.

3. Control+Z یا Command+Z (macOS) را فشار دهید. آخرین کنش واگرد می‌شود و گره دوباره ظاهر می‌شود.

دسترسی به گره‌ها در «کنسول»

DevTools چند میان‌بر برای دسترسی به گره‌های DOM از «کنسول» یا دریافت ارجاع‌های جاوا اسکریپت به آن‌ها ارائه می‌دهد.

با $0 به گره انتخاب‌شده کنونی ارجاع دهید

وقتی گره‌ای را بازرسی می‌کنید (ازجمله شبه‌عنصرهایی مثل ::before یا ::after)، نوشتار == $0 کنار گره به این معنی است که می‌توانید با متغیر $0 به این گره در «کنسول» ارجاع دهید.

1. روی عنصر فهرست دست چپ تاریکی کلیک راست کنید و بازرسی را انتخاب کنید.

   • دست چپ تاریکی
   • تلماسه

2. برای باز کردن «کشوی کنسول»، کلید گریز را فشار دهید. برای باز کردن آن، ممکن است لازم باشد کنسول را انتخاب کنید.

3. $0 را تایپ کنید و کلید Enter را فشار دهید. نتیجه عبارت این است که $0 به <li>The Left Hand of Darkness</li> ارزیابی می‌شود.

   

4. روی نتیجه موردنظر نگه دارید. گره در نمای دید برجسته می‌شود.

5. روی <li>Dune</li> در «درخت DOM» کلیک کنید، دوباره $0 را در «کنسول» تایپ کنید، و سپس دوباره کلید Enter را فشار دهید. اکنون، $0 به <li>Dune</li> ارزیابی می‌شود.

   

ذخیره به‌عنوان متغیر سراسری

اگر لازم است بارها به گره‌ای مراجعه کنید، آن را به‌عنوان متغیر سراسری ذخیره کنید.

1. در فهرست زیر، روی The Big Sleep کلیک راست کنید و بازرسی را انتخاب کنید.

   • خواب بزرگ
   • The Long Goodbye

2. روی <li>The Big Sleep</li> در «درخت DOM» کلیک‌راست کنید و ذخیره به‌عنوان متغیر سراسری را انتخاب کنید. اگر نمی‌توانید این گزینه را پیدا کنید، درباره گزینه‌های مفقود بخوانید.

3. temp1 را در «کنسول» تایپ کنید و سپس کلید Enter را فشار دهید. نتیجه عبارت نشان می‌دهد که متغیر به گره ارزیابی می‌شود. برای ازهم بازکردن مورد فهرست، روی گره کلیک کنید.

   

کپی کردن مسیر جاوااسکریپت

مسیر جاوا اسکریپت را به گره‌ای کپی کنید تا در آزمایشی خودکار به آن ارجاع دهید.

1. در فهرست زیر، روی برادران کارامازوف کلیک راست کنید و بازرسی را انتخاب کنید.

   • برادران کارامازوف
   • جنایت و مکافات

2. روی <li>The Brothers Karamazov</li> در «درخت DOM» کلیک راست کنید و کپی کردن > کپی کردن مسیر JS را انتخاب کنید. عبارت document.querySelector() که به گره منتهی می‌شود در بریده‌دان کپی شده است.

3. Control+V یا Command+V (macOS) را فشار دهید تا عبارت در «کنسول» جای‌گذاری شود.

4. برای ارزیابی عبارت، کلید Enter را فشار دهید.

   

توقف در تغییرات DOM

DevTools به شما امکان می‌دهد جاوا اسکریپت صفحه را زمانی که جاوا اسکریپت DOM را تغییر می‌دهد، موقتاً متوقف کنید. درباره نقاط گسست تغییر DOM بخوانید.

مراحل بعدی

این بخش اکثر ویژگی‌های مرتبط با DOM را در DevTools پوشش می‌دهد. می‌توانید بقیه آن‌ها را با کلیک راست کردن روی گره‌ها در «درخت 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 یکسان هستند.

فرض کنید فایل script.js در پایین HTML شامل توابع زیر باشد:

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

آن دستورگان گره h1 را برمی‌دارد و گره p دیگری به «مدل شیء سند» اضافه می‌کند. ‫DOM اکنون به این شکل است:

html
  head
    title
  body
    p
    script
    p

HTML صفحه اکنون با DOM آن متفاوت است.

‫HTML نشان‌دهنده محتوای اولیه صفحه و DOM نشان‌دهنده محتوای فعال و فعلی صفحه است. وقتی جاوا اسکریپت گره‌ها را اضافه، حذف، یا ویرایش می‌کند، DOM با HTML متفاوت می‌شود.

در مقدمه‌ای بر DOM در MDN بیشتر بدانید.

پیمایش کنید تا نمایش داده شود

این ادامه بخش پیمایش به نمای است. برای تکمیل بخش، دستورالعمل‌ها را دنبال کنید.

1. گره <li>Magritte</li> باید همچنان در «درخت DOM» شما انتخاب شده باشد. اگر نه، به پیمایش به نمای برگردید و از اول شروع کنید.

2. روی گره <li>Magritte</li> کلیک راست کنید و پیمایش به نمای را انتخاب کنید. نمای شما به بالا پیمایش می‌شود تا بتوانید گره Magritte را ببینید. اگر پیمایش به نمای وجود ندارد، درباره گزینه‌های مفقود بخوانید.

   

نبود گزینه‌ها

بسیاری از دستورالعمل‌های این آموزش گام‌به‌گام به شما می‌گویند که روی گرهی در «درخت DOM» کلیک راست کنید و سپس گزینه‌ای را از منو زمینه‌ای که ظاهر می‌شود انتخاب کنید. اگر گزینه مشخص‌شده را در منوِ بافت نمی‌بینید، روی جایی دورتر از نوشتار گره کلیک راست کنید.