راه‌های زیادی برای پیمایش DOM در جاوااسکریپت وجود دارد. بیایید بررسی کنیم چگونه با استفاده از گره‌های والد، فرزند و خواهر و برادر این کار را انجام دهیم.
همانطور که همه می‌دانید DOM یک ساختار داده درختی از گره‌ها است. اگر مدتی در توسعه فرانت-اند مشغول بوده باشید، مطمئنم از متدهایی که میتوانید برای دسترسی به عناصر DOM استفاده کنید آگاه هستید. برای یادآوری در اینجا برخی از متدهایی که ما برای مراجعه به گره‌های DOM استفاده می‌کنیم آورده شده است.
- ()getElementsByTagName
- ()getElementsByClassName
- ()getElementById
- ()querySelector
- ()querySelectorAll
اینها متدهایی برای انتخاب عناصر HTML در DOM با استفاده از جاوااسکریپت است. با این حال دسترسی به هر عنصر در DOM با استفاده از نام کلاس یا شناسه ممکن است کمی دشوار باشد.
در این مقاله ما یک متد پیمایش DOM متفاوت را بررسی خواهیم کرد که به شما امکان دسترسی به همه گره‌های DOM را به روش بسیار بهتری می‌دهد.
همچنین از مشخصات والد، فرزند و خواهر و برادر برای عبور از DOM استفاده خواهیم کرد.
برای سهولت کار، من یک پروژه نمونه HTML همراه با چند گره DOM ایجاد می‌کنم. فایل HTML به شرح زیر است.
خروجی موارد فوق هنگام اجرا بر روی مرورگر به شرح زیر است. برای درک ادامه این مقاله، نگاه کاملی به این موضوع داشته باشید.
برای دسترسی به 3 عنصر موجود در درخت DOM، متغیرهای کمی در تگ <script> ایجاد کرده‌ایم. عنصر h1، عنصر p و عنصر ul.
اکنون که پروژه را تنظیم کردیم، بیایید پیمایش DOM را بررسی کنیم.
گره ریشه
این گره شروع درخت DOM می‌باشد که اساسا document است. این شی نوعی ویژگی window در نظر گرفته می‌شود. حتی اگر HTML خالی بارگذاری شود، گره ریشه و عناصر ریشه را خواهد داشت که به شرح زیر است.
حالا اجازه دهید بقیه گره‌ها را بررسی کنیم.
گره‌های موجود در درخت DOM بر اساس روابطشان به عنوان والد، فرزند و خواهر و برادر شناخته می‌شوند. این تفاوتی با یک شجره نامه در دنیای واقعی ندارد. از این رو این مفهوم برای شما آشناتر و قابل استفاده خواهد بود.
گره‌های والد
این گره خاص گرهی است که مستقیما بالای آن در درخت DOM قرار دارد. گره والد بیش از آنچه هست در سلسله مراتب به document نزدیکتر خواهد بود.
در مثال ما:
- <html> گره والد <head>، <body> و <script> است.
- <body> والد <h1>، <h2>، <p> و <ul> است.
اما <body> والد <li> نیست، زیرا از <body> دو سطح پایین است.
اگر بخواهیم از گره والد عبور کنیم، می‌توان از روش پیمایش DOM زیر استفاده کرد.
<currentNode>.parentNode;
به جای parentNode، برای بازیابی گره عنصر والد نیز می‌توان از parentElement استفاده کرد.
جالب‌تر خواهد شد. بگذارید بگوییم شما باید جد گره فعلی را که دو سطح بالاتر است بازیابی کنید، می‌توان از مکانیزم مشابهی برای این مورد نیز استفاده کرد.
<currentNode>.parentNode.parentNode;
با دو بار استفاده از parentNode می‌توانیم جد <p> را که <html> است بازیابی کنیم.
توجه: عنصر والد <html> خود document است. بنابراین اگر بخواهید والد HTML را بازیابی کنید، null خواهد شد. با این حال گره والد <html> به عنوان #document برمی‌گردد.
گره‌های فرزند
گره‌هایی که یک سطح زیر گره والد قرار دارند، گره فرزند آن محسوب می‌شوند. بسیاری از خصوصیات برای گره‌های فرزند وجود دارد که می‌توان به آنها دسترسی داشت.
بیایید سعی کنیم فرزند گره‌های لیست (<ul>) را که در مثال خود داریم بازیابی کنیم.
این لیست دارای 11 فرزند است. از آنجا که این یک HTML است که به صورت دستی تولید می‌شود، تورفتگی (فضای سفید) را به عنوان یک فرزند جداگانه در نظر می‌گیرد. از این رو 11 گره فرزند وجود دارد.
بیایید سعی کنیم برخی از استایل‌ها را با استفاده از این مکانیزم پیمایش DOM اصلاح کنیم.
من از این متد برای رنگ آمیزی پس زمینه فرزند اول لیست با رنگ زرد استفاده می‌کنم.
list.firstChild.style.background = 'yellow';
همانطور که در اینجا مشاهده می‌کنید، برای تغییر ویژگی یک ظاهر طراحی شده باید از firstElementChild به جای firstChild استفاده کنید. به این دلیل است که firstChild، text را به دلیل تورفتگی برمی‌گرداند. همچنین برای به دست آوردن اولین <li> از firstElementChild باید استفاده شود.
حتی می‌توان حلقه‌ها را با این متد پیمایش DOM ترکیب کرد تا خصوصیات خاصی را تغییر دهد.
گره‌های خواهر و برادر
با استفاده از گره‌های والد و فرزند میتوانید کل DOM را پیمایش کنید. علاوه بر این کشف گره‌های خواهر و برادر نیز بسیار جالب است. گره‌های خواهر و برادر گره‌هایی هستند که در درخت DOM در یک سطح قرار دارند. این می‌تواند از عناصر یکسان یا حتی انواع مختلفی از عناصر باشد.
ویژگی‌های آنها را در زیر می‌بینید.
در اینجا مثالی آورده شده است که گره‌های خواهر و برادر برای عبور از DOM و دسترسی به عناصر text استفاده می‌شوند.
مشابه عناصر والد و فرزند، خصوصیات خواهر و برادر نیز می‌توانند به هم متصل شوند.
جمع‌بندی
اگر متد صحیح و کارآمدی برای انجام این کار داشته باشید، پیمایش DOM بسیار جذاب است. در این مقاله ما یکی از راه‌های پیمایش DOM که عمدتا با استفاده از گره‌های والد، فرزند و خواهر و برادر صورت می‌گیرد را بررسی کردیم. اکنون که این مفهوم را می‌شناسید، میتوانید ویژگی‌های آن را بهتر درک کنید.
امیدوارم که اطلاعات موجود در این مقاله در جهت پیاده سازی کارآمد DOM در اجرای پروژه‌ها برای شما مفید باشد.
نکته: کامپوننت‌های قابل استفاده مجدد خود را با استفاده از Bit (Github) بین پروژه‌ها به اشتراک بگذارید.
Bit اشتراک گذاری، مستند سازی و استفاده مجدد از کامپوننت‌های مستقل بین پروژه‌ها را برایتان ساده می‌کند. از آن برای به حداکثر رساندن استفاده مجدد از کد، حفظ یک طراحی ثابت، تحویل سریع و ساخت برنامه‌هایی با این مقیاس استفاده کنید.
بیت از Node ، TypeScript ، React ، Vue ، Angular و موارد دیگر پشتیبانی می‌کند.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید