تغییر المان های HTML و استایل های Css از طریق درخت Dom
در یک یادآوری کلی میتوان این گونه گفت که در جاوا اسکریپت عملا ما قادر به انجام هر گونه عملیات های دلخواه خود هستیم ، این تغییرات میتواند مربوط به اضافه و حذف کردن یک عنصر یا ایجاد و حتی تغییر یک ارزش و ... باشد که در ادامه بخش کوچکی از این موارد را بررسی خواهیم نمود .
مطالعه کنید : سلکتور ها در جاوا اسکریپت
نکته : پیش از مطالعه ی ادامه ی مقاله توصیه میشود که کاربر گرامی برای بازدهی بالا تر و درک بیشتر به مقاله ی فوق یعنی سلکتور ها در جاوا اسکریپت مراجعه نماید تا در خواندن ادامه ی مطلب مسلط بماند .
![JavaScript](https://api.sh-varna.ir/File/Show/1228.png)
تغییر عناصر 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](https://api.sh-varna.ir/File/Show/1232.jpg)
ویژگی 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](https://api.sh-varna.ir/File/Show/1231.png)
تغییر استایل های css
به طریق مشابه تمام حرکات و ویژگی های قابل تصور برای اعمال تغییرات در css سند HTML ممکن میباشد که به طور خلاصه به آن ها خواهیم پرداخت .
تغییر Style
برای دسترسی به استایل های یک عنصر از کلید واژی style استفاده کرده و سپس تغییرات مد نظر را پیاده سازی میکنیم .
<script>
document.querySelector("body").style.background = "yellow" ;
</script>
![JavaScript](https://api.sh-varna.ir/File/Show/1230.jpg)
اضافه و حذف کردن المنت ها
همانطور که در ابتدا نیز بیان شد کاربر می تواند با استفاده از درخت 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](https://api.sh-varna.ir/File/Show/1229.png)
سخن پایانی
در پایان شرکت برنامه نویسی وارنا امید وار است که به کاربران محترمی که
مقاله را مطالعه نموده اند کمک کرده باشد
شما می توانید برای دریافت اموزش تمامی نکات کاربردی JavaScript به
سایت شرکت برنامه نویسی وارنا
مراجعه نموده و در قسمت اموزش ها ضمن خرید
دوره جاوا اسکریپت (JS) + تضمین استخدامی
از امکان پشتیبانی 24 ساعته جهت رفع اشکال و بالا بردن سطح تسلط خود استفاده
نمایید. همچنین شرکت برنامه نویسی وارنا به دنبال جذب افراد مستعد و علاقه
مند به برنامه نویسی است که اطلاعات کامل ان در بخش
اموزش و استخدام
سایت وارنا موجود می باشد.