پیمایش درخت DOM در JavaScript :
درخت DOM (Document Object Model) یک ساختار داده‌ای است که برای نمایش ساختار صفحات وب استفاده می‌شود. این درخت شامل گره‌هایی مانند المان‌های HTML، متن، تصاویر، فرم‌ها و غیره می‌باشد.
در جاوااسکریپت، ما می‌توانیم این درخت را پیمایش کنیم تا به المان‌های مختلف دسترسی داشته باشیم و تغییراتی بر روی آنها ایجاد کنیم. در این مقاله، ما به بررسی دو روش پیمایش درخت DOM در جاوااسکریپت می‌پردازیم.
روش اول: استفاده از تابع getElementById()
تابع getElementById() به ما اجازه می‌دهد تا با استفاده از شناسه المان DOM، المان مورد نظر را پیدا کنیم. برای استفاده از این تابع، ابتدا باید شناسه المان مورد نظر را به عنوان آرگومان به تابع بدهیم. سپس، ما می‌توانیم به ویژگی‌های المان دسترسی داشته باشیم و آنها را تغییر دهیم.
در زیر مثالی از استفاده از تابع getElementById() در جاوااسکریپت آمده است:
“`
Hello World
“`
در این مثال، ما با استفاده از تابع getElementById() ، المان با شناسه “myHeading” را پیدا کرده و آن را به متغیر heading اختصاص داده‌ایم. سپس، ما با استفاده از ویژگی innerHTML، متن داخل المان را به “Welcome to my page!” تغییر داده‌ایم.
روش دوم: استفاده از تابع querySelector()
تابع querySelector() اجازه می‌دهد تا با استفاده از یک پویشگر CSS، المان مورد نظر را پیدا کنیم. این تابع یک رشته CSS را به عنوان آرگومان می‌گیرد و المان مورد نظر را پیدا می‌کند. به عنوان مثال، اگر ما یک المان با کلاس “myClass” داشته باشیم، ما می‌توانیم با استفاده از تابع querySelector() آن را پیدا کنیم.
در زیر مثالی از استفاده از تابع querySelector() در جاوااسکریپت آمده است:
“`
Hello World
“`
در این مثال، ما با استفاده از تابع querySelector()، المان با کلاس “myClass” را پیدا کرده و آن را به متغیر heading اختصاص داده‌ایم. سپس، ما با استفاده از ویژگی innerHTML، متن داخل المان را به “Welcome to my page!” تغییر داده‌ایم.
نتیجه‌گیری
درخت DOM یک ساختار داده‌ای است که برای نمایش صفحات وب استفاده می‌شود و ما می‌توانیم با استفاده از جاوااسکریپت آن را پیمایش کنیم. در این مقاله، ما دو روش برای پیمایش درخت DOM در جاوااسکریپت را بررسی کردیم: استفاده از تابع getElementById() و استفاده از تابع querySelector(). هر دو تابع به ما اجازه می‌دهند تا به المان‌های مختلف دسترسی داشته باشیم و تغییراتی بر روی آنها ایجاد کنیم.
