پروژه فاز یک من (فرمول 1) در مدرسه Flatiron یک تجربه چالش برانگیز و در عین حال ارزشمند بود. من دانش ارزشمندی در جاوا اسکریپت، Node.js، دستکاری DOM و HTML به دست آوردم. در طول این مرحله، در درک اصطلاحات دستکاری DOM با مشکلاتی مواجه شدم اما موفق شدم آن را در کد خود بگنجانم. در اینجا یک مثال است:
در تصویر اول، من یک متغیر searchInput را با استفاده از const اعلام کردم. من از document.getElementById(‘searchInput’) برای انتخاب عنصری با شناسه منحصر به فرد از DOM استفاده کردم.
در تصویر دوم، من یک قطعه کد HTML را با عناصری که شناسه‌های منحصربه‌فرد اختصاص داده بودند نشان دادم. این شناسه ها انتخاب و دستکاری عناصر خاص را امکان پذیر می کنند. برای این منظور معمولاً از متد document.getElementById استفاده می شود. برای مثال:
const racersContainer = document.getElementById('racersContainer');
هنگام کار با DOM در جاوا اسکریپت، می توان از این شناسه ها برای انتخاب و دستکاری عناصر خاص استفاده کرد. برای این منظور معمولاً از متد document.getElementById استفاده می شود. به عنوان مثال، برای انتخاب عنصر با شناسه “racersContainer” از کد زیر استفاده کنید:
const racersContainer = document.getElementById('racersContainer');
این کد عنصر با شناسه “racersContainer” را به متغیر racersContainer اختصاص می دهد و به شما امکان می دهد عملیات مختلفی را روی آن انجام دهید.
این کد عنصر با شناسه “racersContainer” را به متغیر racersContainer اختصاص می دهد و امکان انجام عملیات های مختلف روی آن را فراهم می کند.
من همچنین با چالش هایی در تمایز بین document.querySelectorAll() و document.querySelector() مواجه شدم. در اینجا توضیح مختصری وجود دارد:
- document.querySelectorAll(): این متد لیستی از تمام عناصر موجود در سند را برمی گرداند که با انتخابگر CSS خاصی مطابقت دارند. یک NodeList را برمی گرداند که شبیه به یک آرایه است و به شما امکان می دهد به عناصر انتخاب شده دسترسی داشته باشید و آنها را تکرار کنید. مثلا:
const elements = document.querySelectorAll('.myClass');
در این مثال، تمام عناصر با کلاس “myClass” انتخاب شده و در متغیر عناصر ذخیره می شوند.
- document.querySelector(): این متد اولین عنصری را برمی گرداند که با یک انتخابگر CSS خاص مطابقت دارد. حتی اگر چندین عنصر وجود داشته باشد که با انتخابگر مطابقت داشته باشد، یک عنصر واحد را برمی گرداند. مثلا:
const element = document.querySelector('#myElement');
در این مثال، اولین عنصر با شناسه “myElement” انتخاب شده و در متغیر عنصر ذخیره می شود.
به طور خلاصه، document.querySelectorAll() چندین عنصر را بر اساس انتخابگر CSS انتخاب می کند و یک NodeList را برمی گرداند، در حالی که document.querySelector() اولین عنصری را انتخاب می کند که با یک انتخابگر CSS مطابقت داشته باشد و یک عنصر واحد را برمی گرداند.
برای اطلاعات بیشتر در مورد DOM مراجعه کنید:
https://www.w3schools.com/jsref/dom_obj_document.asp
