مشاوره رایگان
ورود / ثبت نام

دسته بندی:آموزش برنامه نویسی
تاریخ انتشار:شنبه 8 مهر 1402
نویسنده:مهدی جام گوهری

تغییر المان های HTML و استایل های Css از طریق درخت Dom

در یک یادآوری کلی میتوان این گونه گفت که در جاوا اسکریپت عملا ما قادر به انجام هر گونه عملیات های دلخواه خود هستیم ، این تغییرات میتواند مربوط به اضافه و حذف کردن یک عنصر یا ایجاد و حتی تغییر یک ارزش و ... باشد که در ادامه بخش کوچکی از این موارد را بررسی خواهیم نمود .

مطالعه کنید : سلکتور ها در جاوا اسکریپت

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

JavaScript
JavaScript

تغییر عناصر HTML

برای تغییر عناصر در سند HTML به وسیله ی جاوا اسکریپت در قدم اول میبایست که هر قطعه کد یا عنصر مد نظر را از طریق سلکتور ها در درخت Dom دریافت نموده و سپس با استفاده از متد ها (Method) یا پراپرتی هایی (property) که در ادامه با آنها مواجه خواهیم شد موارد مطلوب کاربر را به آنها اضافه ، حذف یا تغییر دهیم .

ویژگی innerHTML (property)

با استفاده از این پراپرتی بعد از انتخاب قطعه کد میتوان هر آنچه که مدنظر کاربر برای ایجاد یک نوشته و حتی ایجاد یک یا چند عنصر (Element) میباشد را عملی نمود . مثلا در مثال زیر با فشردن کلید انچه که به جای دکمه نمایش داده خواهد شد یک پاراپراف با نوشته ای داخلش خواهد بود . 

        
            <body>
              <div>
                <button id="btn">
                  Click to Show!!
                </button>
              <div>
              <script>
                var InnerH = document.getElementById("btn");
                InnerH.addEventListener("click" , ()=>{
                    InnerH.parentNode.innerHTML = '<p>Hello World! Welcome to our Page</p>';
                });
              </script>
            </body>
JavaScript
JavaScript

ویژگی innerText (property)

در این پراپرتی شباهت های زیادی با پراپرتی innerHTML وجود دارد که بحث اصلی قابل توضیح این پراپرتی تفاوت های این innerText با پراپرتی innerHTML میباشد .

نکته : تفاوت دو پراپرتی innerHTML و innerText در آن است که در استفاده از پراپرتی innerText کاربر هر آنچه که به صورت نوشته مینویسد به صورت یک رشته از کلمات و حروف باز میگرداند اما در پراپرتی innerHTML نوشته توسط یک سند HTML خوانده میشود که این امکان را ایجاد میکند که حتی یک یا چند عنصر (Element) را به سند اصلی اضافه کند . 

        
            <body>
              <button id="btn">
                Click to Show!!
              </button>
              <script>
                var InnerT = document.getElementById("btn");
                InnerT.addEventListener("click" , ()=>{
                    InnerT.innerText = 'Hello World! Welcome to our Page';
                })
              </script>
            </body>

در نمونه ی فوق بعد از بعد از فشردن کلید بلافاصله نوشته های داخل دکمه تغییر میکند و این یک نمونه ای بسیار خوب و قابل قیاس با مثال پراپرتی innerHTML میباشد .

تغییر مقدار اتریبیوت ها (attribute)

همچنین کاربر میتواند با قابلیت درخت Dom به اتریبیوت های (attribute) هر یک از عناصر دسترسی داشته باشد و مقادیر دلخواه خود را یا اضافه کرده و یا تغییر دهد .

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

        
            <body>
                <!-- ادرس عکس زیر به طور کامل توسط جاوا اسکریپت داده شده است -->
              <img id="imageSet"/>
                <!-- ادرس عکس زیر توسط جاوا اسکریپت به صورت آماده داده شده است -->
              <img src="" id="imageSrc"/>
              <script>
                document.querySelector("#imageSet").setAttribute("src" , "https://api.sh-varna.ir/File/Show/1217.png");
                document.getElemetById("imageSrc").src = "https://api.sh-varna.ir/File/Show/1217.png" ;
              </script>
            </body>
JavaScript
JavaScript

تغییر استایل های css

به طریق مشابه تمام حرکات و ویژگی های قابل تصور برای اعمال تغییرات در css سند HTML ممکن میباشد که به طور خلاصه به آن ها خواهیم پرداخت .

تغییر Style

برای دسترسی به استایل های یک عنصر از کلید واژی style استفاده کرده و سپس تغییرات مد نظر را پیاده سازی میکنیم . 

        
            <script>
              document.querySelector("body").style.background = "yellow" ;
            </script>
JavaScript
JavaScript

اضافه و حذف کردن المنت ها

همانطور که در ابتدا نیز بیان شد کاربر می تواند با استفاده از درخت Dom هر تغییری نظیر حذف و اضافه کردن المان ها را در سند HTML خود انجام دهد

اضافه کردن توسط کلید واژه ی create

به طور کلی تعداد متد های این بخش مقداری زیاد می باشد که در ادامه فقط تعدادی را معرفی میکنیم .

  • createElement()
  • createTextNode()
  • appendChild()

حذف کردن توسط کلید واژه ی remove

این بخش نیز نظیر بخش فوقانی شباهت هایی بسیاری به هم دارند اما تفاوت این دو در حذف کردن و اضافه کردن میباشد . به طور مختصر تعدادی از متد های این بخش یز به کاربر گرامی معرفی میشود .

  • removeChild()
  • remove()
  • removeElemet()

تغییر دادن یا جایگذاری ویژگی دیگر

در این بخش برای آغاز میبایست حداقل دو عنصر ایجاد شده داشته باشیم و سپس آن عنصر که بهتر و مدنظر کاربر میباشد را با مقدار یا ارزش عنصر دومی قرار میدهیم و تمام .

مثال زیر از نمونه های خوب و توجه برانگیز این بخش است .

        
            <script>
              var div = document.querySelector('#div');
              var newDiv = document.createElement('div');

              newDiv.innerHTML = "Hello World2";
                //اکنون مرحله ی جایگذاری است ...
              div.parentNode.replaceChild(newDiv, div);
            </script>
JavaScript
JavaScript

سخن پایانی

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