دسته بندی:آموزش برنامه نویسی

تاریخ انتشار:پنج شنبه 30 شهریور 1402

نویسنده:مهدی جام گوهری

selector های درخت Dom در JavaScript

در جاوا اسکریپت کاربر میتواند با دریافت هر قسمت ، بخش یا تیکه کدی ، تغییرات مد نظرش را از جمله تغییر المان ها در HTML ، تغییر استایل در CSS ، اعمال برخی انیمیشن ها و افکت های ویژه و هر گونه تغییراتی که کاربر در اولویت بندی خود قرار داده است ، اعمال کند .

برای دریافت اطلاعات بیشتر و پی بردن به تاریخچه ی جاوا اسکریپت به مقاله ی زیر مراجعه کنید : جاوا اسکریپت چیست ؟

selector چیست ؟

selector ها در واقع اجزایی در درخت Dom هستند که به کاربر به هنگام استفاده از آنها این قابلیت را میدهد که با استفاده از متدها (Method) و یا پراپرتی ها (Property) به جای جای ساختمان کد ها در HTML دسترسی داشته باشند و در نتیجه هر نوع تغییراتی را به راحتی اعمال کنند .

انواع رایج Selector ها در JavaScript

در این قسمت انواع رایج selector ها که به طور کلی استفاده ی یکایک آنها پیشنهاد میشود را معرفی خواهیم نمود .
نکته : کاربر گرامی توجه نمایید که عملا استفاده ی مستقیم از selector ها در عمل هیچ فایده ای ندارد . لذا برای استفاده از متد ها یا پراپرتی های مدنظر می بایست کلید واژه ی document. را نوشته تا دسترسی های خود را با استفاده از درخت Dom آغاز کنیم .

mainElement (عناصر اصلی)

در یک ساختمان HTML برای دسترسی به عناصر اصلی با استفاده از پراپرتی هایی (Property) نظیر documentElement ، body و head میتوان به ترتیب به عنصر های (Element) html ، body و head دسترسی یافت .

به مثال کوتاه زیر که در سند HTML می باشد توجه نمایید .

      
        <!DOCTYPE html>
        <html>
          <head>
            <meta charset="utf-8">
            <title>Selector ها در JavaScript</title>
          </head>
          <body>
            <script>
            // اضافه کردن رنگ به پشت صفحه ی بدنه سند HTML 
            document.body.style.background = "yellow";

            // نمایش دادن نام اولین عنصر از فرزندان Element head 
            alert(document.head.firstElementChild.nodeName);
            </script>
          </body>
        </html>

getElementById (گرفتن عنصر توسط Id)

با استفاده ی از متد (Method) getElementById() کاربر میتواند با نوشتن نام ID عنصر مد نظر در درون پرانتز و در داخل "double cotated" دسترسی کامل به اجزای عنصر داشته باشد .

در مثال زیر با فراخوانی یک رویداد با گرفتن Id ، به هنگام کلیک شدن دکمه مخفی میشود .

      
        <!DOCTYPE html>
        <html>
          <head>
            <!-- ... -->
            <script>
              document.getElementById("btn").addEventListener("click",()=>{
                document.getElementById("btn").classList.add("hidden");
              });
            </script>
          </head>
          <body>
            <button id="btn">
              Click to hidden this button
            </botton>
          </body>
        </html>

querySelector (گرفتن توسط نام کلاس ، Id یا Element)

کاربر میتواند با استفاده از متد (Method) querySelector() با گرفتن نام کلاس انتخاب شده برای عنصر و یا گرفتن Id و یا حتی گرفتن خود عنصر و حتی فرزندان عنصر ها به اجزای عنصر دسترسی داشته باشد .

در مثال زیر با فراخوانی یک رویداد با گرفتن Id ، به هنگام کلیک شدن دکمه مخفی میشود .

      
        <!DOCTYPE html>
        <html>
          <head>
            <!-- ... -->
            <script>
              document.querySelector("#btn").addEventListener("click",()=>{
                document.querySelector(".hide_class").classList.add("hidden");
                // or you like this ...
                // document.querySelector("button").classList.add("hidden");
              });
            </script>
          </head>
          <body>
            <button class="hide_class" id="btn">
              Click to hidden this button
            </botton>
          </body>
        </html>

نکته : برای گرفتن Id در querySelector ، داخل "double cotated" با استفاده از '#' و سپس نوشتن نام Id به عنصر مد نظر دسترسی خواهیم داشت . مانند مثال بالا
نکته : برای گرفتن نام Class در querySelector ، داخل "double cotated" با استفاده از '.' و سپس نوشتن نام Class به عنصر مدنظر دسترسی خواهیم داشت .مانند مثال بالا
نکته : هیچ گونه واسطه ای برای گرفتن خود عنصر (Element) در querySelector وجود نداشته و میتوان بعد از صدا زدن عنصر به اجزای آن دسترسی داشت .مانند مثال بالا

getElementsByClassName (گرفتن توسط نام کلاس)

کاربر میتواند با استفاده از این متد (Method) getElementsByClassName() با گرفتن نام کلاس انتخاب شده برای عنصر به اجزای عنصر دسترسی داشته باشد .

در مثال زیر با فراخوانی یک رویداد با گرفتن نام Class ، به هنگام کلیک شدن دکمه مخفی میشود .

      
        <!DOCTYPE html>
        <html>
          <head>
            <!-- ... -->
            <script>
              document.querySelector(".hide_class").addEventListener("click",()=>{
                document.getElementsByClassName("hide_class").classList.add("hidden");
              });
            </script>
          </head>
          <body>
            <button class="hide_class">
              Click to hidden this button
            </botton>
          </body>
        </html>

نکته : تفاوت این متد با متد querySelector در دو بخش عمده میباشد ، اولین و مهمترین تفاوت گستردگی بسیار زیاد querySelector برای گرفتن عنصر ها میباشد و دومین تفاوت در بخش نوشتن نام کلاس در داخل "double cotated" می باشد که برای querySelector واسطه ی '.' لحاظ میشود اما برای این متد این واسطه لحاظ نمیشود . در مثال بالا میتوانید تفاوت ها را مشاهده نمایید

getElementsByTagName (گرفتن توسط نام عنصر یا Element)

کاربر میتواند با استفاده از این متد (Method) getElementsByTagName() با گرفتن نام عنصر به اجزای عنصر دسترسی داشته باشد .

در مثال زیر با فراخوانی یک رویداد با گرفتن نام عنصر یا Element ، به هنگام کلیک شدن دکمه مخفی میشود .

      
        <!DOCTYPE html>
        <html>
          <head>
            <!-- ... -->
            <script>
              document.getElementById("btn").addEventListener("click",()=>{
                document.getElementsByTagName("button").classList.add("hidden");
              });
            </script>
          </head>
          <body>
            <button id="btn">
              Click to hidden this button
            </botton>
          </body>
        </html>

نکته : مهمترین موردی که باعث کمتر استفاده شدن این متد میشود آن است که این تغییرات را به تمام عنصر هایی که نامشان button است اعمال میکند که شاید مطلوب همگان نباشد .

سخن پایانی

در پایان شرکت برنامه نویسی وارنا امید وار است که به کاربران محترمی که مقاله را مطالعه نموده اند کمک کرده باشد
شما می توانید برای دریافت اموزش تمامی نکات کاربردی JavaScript به سایت شرکت برنامه نویسی وارنا مراجعه نموده و در قسمت اموزش ها ضمن خرید دوره جاوا اسکریپت (JS) + تضمین استخدامی از امکان پشتیبانی 24 ساعته جهت رفع اشکال و بالا بردن سطح تسلط خود استفاده نمایید. همچنین شرکت برنامه نویسی وارنا به دنبال جذب افراد مستعد و علاقه مند به برنامه نویسی است که اطلاعات کامل ان در بخش اموزش و استخدام سایت وارنا موجود می باشد.