آموزش *به روز شده* DOM 2023 ساخت وب سایت های پویا جاوا اسکریپت قسمت 1

سرفصل ها و درس ها

معرفی Introduction

• معرفی Introduction

• بیایید در مورد DOM بیاموزیم Lets learn about the DOM

• همه چیز یک شی است Everything is an object

• ساختن صفحه ساده خودمان Building our own simple page

• سلسله مراتب DOM DOM hierarchy

• یک کلمه کوتاه در مورد کنسول A quick word about the console

• نتیجه گیری سلسله مراتبی DOM DOM hierarchy conclusion

• BOM چیست What is the BOM

• BOM در مقابل پنجره در مقابل DOM در مقابل JS BOM vs Window vs DOM vs JS

• DOM در مقابل جاوا اسکریپت در مقابل پایتون DOM vs JavaScript vs Python

• DOM با HTML شما یکسان نیست The DOM is not the same as your HTML

• DOM آن چیزی نیست که در مرورگر می بینید The DOM is not what you see in the browser

• DOM آن چیزی نیست که در DevTools می بینید The DOM is not what you see in DevTools

• عناصر شبه Pseudo Elements

• Yee-haw ... DOM چیست Yee-haw ... What is the DOM

• خلاصه: DOM چیست؟ Summary: What is the DOM?

• با DOM چه کنیم؟ What can we do with the DOM?

• مثال سریع تغییر DOM Quick example of changing the DOM

• آزمون معرفی DOM DOM Introduction Quiz

• با ترس های خود روبرو شوید - بر DOM مسلط شوید Face your fears - master the DOM

جاوا اسکریپت در مقابل DOM JavaScript vs DOM

• DOM API چیست؟ What is the DOM API

• جاوا اسکریپت در محیط های مختلف زندگی می کند JavaScript lives in different environments

• اجازه می دهد تا یک تابع setTimeout() بسازیم Lets build a setTimeout() function

• setTimeout - جاوا اسکریپت در مقابل DOM setTimeout - JavaScript vs DOM

• DOM فقط برای جاوا اسکریپت نبود The DOM was not solely for JavaScript

• DOM در مقابل جاوا اسکریپت DOM vs JavaScript

• جاوا اسکریپت در مقابل DOM - آزمون JavaScript VS DOM - Quiz

• شما اکنون بر تفاوت بین DOM و جاوا اسکریپت مسلط شده اید - آفرین! You've now mastered the difference between the DOM and JavaScript - well done!

دسترسی به DOM Accessing the DOM

• معرفی بخش Section introduction

• دسترسی به DOM - Intro Accessing the DOM - Intro

• Cowabunga - زمان DOM آن است! Cowabunga - its DOM time!

• درک HTML شما Understanding your HTML

• بیایید صفحه خود را برای این بخش بسازیم Lets build our page for this section

• کد ویژوال استودیو - یک کلمه سریع Visual Studio Code - A Quick Word

• getElementById() getElementById()

• Recap () getElementById getElementById() Recap

• getElementsByClassName() getElementsByClassName()

• تست: مقدمه TEST: Introduction

• تست - کد شروع Test - Starting Code

• TEST: ساخت کد تست ما TEST: building our test code

• سعی کنید تست را به تنهایی کامل کنید Try complete the test on your own

• راه حل SOLUTION

• getElementsByTagName() getElementsByTagName()

• querySelector - مقدمه querySelector - Introduction

• اوه! Oops!

• querySelector - مثال عملی querySelector - practical example

• سس عالی - روش های دسترسی چیست؟ Awesome sauce - What are the access methods?

• خلاصه Summary

• امتحان: دسترسی به DOM Quiz: Accessing the DOM

• DOM را یاد بگیرید و مهارت های خود را به سطح بعدی ببرید ... Learn the DOM and take your skills to the next level ...

گره ها Nodes

• گره ها - بخش مقدمه Nodes - Section Introduction

• غرق نشو ما به اونجا میرسیم... Don't get overwhelmed, we'll get there ...

• گره ها - مقدمه Nodes - Introduction

• گره ها گره ها گره ها NODES NODES NODES

• گره ها در عمل Nodes in action

• childNodes - چگونه گره ها را می بینیم؟ childNodes - How do we see nodes?

• ایجاد گره های مختلف Creating different nodes

• انواع مختلف گره ها چیست؟ What are the different types of Nodes?

• تقریباً همه چیز یک گره است Almost everything is a node

• گره - درخت خانواده Node - Family Tree

• شناسایی گره ها Identifying nodes

• nodeName در مقابل tagName nodeName vs tagName

• HTMLCollection در مقابل NodeList HTMLCollection vs NodeList

• لیست های زنده در مقابل استاتیک Live vs Static lists

• چرا نمی توانیم مستقیماً از متد parentNode در HTMLCollection استفاده کنیم؟ Why can't we use the parentNode method on an HTMLCollection directly?

• گره ها - آزمون Nodes - Quiz

• امیدوارم شما هم مثل من عاشق نود باشید I hope you love nodes as much as I do

عبور از DOM Traversing the DOM

• بخش مقدمه Section Introduction

• آنچه این بخش پوشش می دهد What this section covers

• عبور از DOM - مقدمه Traversing the DOM - Introduction

• چرا ما عبور می کنیم Why we traverse

• ساختن صفحه بخش ما با هم Building our section page together

• چرا باید از DOM عبور کنیم؟ Why do we need to traverse the DOM?

• 3 شیء مهم در DOM The 3 most important objects in the DOM

• والدین، فرزند و خواهر و برادر - یک مقدمه سریع Parent, child and siblings - a quick introduction

• گره والد Parent node

• خواهر و برادر در DOM Siblings in the DOM

• اولین فرزند، آخرین فرزند و کودکان - مقدمه firstChild, lastChild and children - intro

• firstChild، lastChild و کودکان - مثال عملی firstChild, lastChild and children - practical example

• دارایی فرزندان Children property

• childNode در مقابل کودکان - چه تفاوت هایی با هم دارند؟ childNode vs children - what are the differences?

• تست - انواع گره Test - node types

• تست - محلول Test - solution

• خواهر و برادر - یک کلمه سریع Siblings - a quick word

• کار با روش های خواهر و برادر Working with sibling methods

• خلاصه ای از عبور از DOM Summary of traversing the DOM

• مثل لری خوشحالم Happy as Larry

• امتحان: عبور از DOM Quiz: Traversing the DOM

• تست - محلول Test - solution

ایجاد، حذف و شبیه سازی عناصر DOM Creating, Removing and Cloning DOM Elements

• معرفی بخش Section introduction

• یک قدم به عقب برو Take a step back

• وب سایت های استاتیک در مقابل پویا Static vs Dynamic websites

• چگونه عناصر را ایجاد می کنید How do you create elements

• سند در مقابل سند Document vs document

• آشنایی با متد ()createElement Understanding the createElement() method

• بیایید عنصر خود را به DOM متصل کنیم Lets attach our element to the DOM

• با استفاده از ویژگی textContent برای افزودن متن به عنصر تازه ایجاد شده خود Using the textContent property to add text to our newly created element

• appendChild چگونه کار می کند؟ How does appendChild work?

• متد insertBefore(). insertBefore() method

• آیا متد insertAfter() وجود دارد؟ Is there an insertAfter() method?

• بیایید متد ()insertBefore را فریب دهیم Lets trick the insertBefore() method

• نحوه حذف عناصر How to remove elements

• removeChild() removeChild()

• برداشتن() remove()

• یک کلمه سریع در مورد روش remove(). A quick word on the remove() method

• زمان کلون شدن فرا رسیده است It's time to clone

• کلون کردن مثال با استفاده از setInterval() Clone example using setInterval()

• بیایید کد کلون خود را تجزیه و تحلیل کنیم Lets analyze our clone code

• مهارت های خود را بیازمایید Test your skills

• تست - محلول Test - solution

• امتحان: ایجاد، حذف و شبیه سازی عناصر DOM Quiz: Creating, Removing and Cloning DOM Elements

• شما شبیه سازی شده اید! You've been cloned!

بعدی کجاست؟ Where to next?

• دوره Outro Course Outro