آموزش JavaScript: تقویت DOM

مقدمه Introduction

• خوش آمدی Welcome

• آنچه باید قبل از تماشای این دوره بدانید What you should know before watching this course

• با استفاده از پرونده های تمرینی Using the exercise files

1. شروع کار 1. Getting Started

• Document Object Model (DOM) چیست؟ What is the Document Object Model (DOM)?

• حرکت با DOM با ابزارهای توسعه دهنده Navigating the DOM with developer tools

• تست دستورات جاوا اسکریپت با کنسول Testing JavaScript commands with the console

• برقراری ارتباط با کنسول از طریق JavaScript Communicating with the console through JavaScript

2. انتخاب DOM 2. Selecting the DOM

• انتخاب عناصر با getElementById Selecting elements with getElementById

• انتخاب عناصر برچسب HTML Choosing elements by HTML tag

• عناصر جدا شده با نام کلاس Isolating elements by class name

• جستجوی CSS برای انتخاب عناصر Querying CSS to select elements

• کار با عناصر فرم نامگذاری شده Working with named form elements

• درک nodeType ، nodeName و nodeValue Understanding nodeType, nodeName, and nodeValue

• در حال عبور از گره DOM بالا و پایین Traversing up and down DOM nodes

• هدف قرار دادن عناصر گره Targeting node elements

3. اصلاح ویژگی ها و محتوا DOM 3. Modifying DOM Attributes and Content

• تغییر ویژگی های HTML Changing HTML attributes

• کار با خصوصیات محدود Working with restricted attributes

• شناسایی صفات داده Detecting data attributes

• کلاس های کنترل با لیست کلاس HTML5 Controlling classes with the HTML5 classList

• هدف قرار دادن ویژگی های ویژگی ها Targeting the attributes property

• با استفاده از اصلاح کنندگان محتوای متن Using text content modifiers

• اصلاح عناصر به عنوان متن Modifying elements as text

4- درج و حذف گره ها 4. Inserting and Deleting Nodes

• ایجاد و افزودن گره Creating and appending nodes

• کنترل درج گره با insertBefore Controlling node insertions with insertBefore

• کلون کردن و از بین بردن گره ها Cloning and removing nodes

• تعویض گره های موجود Replacing existing nodes

5. DOM در عمل 5. The DOM in Action

• آنچه خواهیم ساخت What we'll build

• افزودن یک شنونده رویداد حباب Adding a bubbling event listener

• ایجاد و یک ظاهر طراحی با پوشش JavaScript Creating and styling an overlay with JavaScript

• افزودن تصویر Adding an image

• تغییر اندازه تصاویر در DOM Resizing images in the DOM

• مرکز تصویر Centering an image

• دست زدن به کلیک Handling clicks

• تنظیم برای پیمایش Adjusting for scrolling

• تشخیص و تنظیم اندازه یک پنجره Detecting and adjusting for a window resize

نتیجه Conclusion

• مراحل بعدی Next steps