در این بخش از سری آموزش جاوا اسکریپت قصد داریم شما را با نحوه کار با خصوصیات DOM در جاوا اسکریپت مثل دریافت, ست و حذف آشنا کنیم.
کار با خصوصیات DOM
خصوصیات (attribute) ها, کلمات خاصی هستند که داخل تگ شروع المان HTML برای کنترل رفتار تگ ها یا ارایه اطلاعات اضافی درباره تگ استفاده می شوند.
جاوا اسکریپت چندین متد برای اضافه, حذف یا تغییر خصوصیت یک المان HTML ارایه می دهد.
دریافت مقدار خصوصیت المان
متد getAttribute() برای دریافت مقدار فعلی یک خصوصیت استفاده می شود.
اگر خصوصیت مشخص شده در المان وجود ندارد, مقدار null را برگشت می دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<a href="https://www.google.com/" target="_blank" id="myLink">Google</a> <script> // Selecting the element by ID attribute var link = document.getElementById("myLink"); // Getting the attributes values var href = link.getAttribute("href"); alert(href); // Outputs: https://www.google.com/ var target = link.getAttribute("target"); alert(target); // Outputs: _blank </script> |
جاوا اسکریپت چندین راه مختلف را برای انتخاب المان های یک صفحه ارایه می دهد. برای اطلاعات بیشتر در مورد آن به بخش انتخابگر های Dom مراجعه کنید.
ست کردن خصوصیات المان
متد setAttribute() برای ست کردن یک خصوصیت خاص به المان استفاده می شود.
اگر خصوصیت از قبل در المان وجود داشت, مقدار بروزرسانی می شود در غیر اینصورت یک خصوصیت خاص با نام و مقدار مشخص شده اضافه می شود.
کد جاوا اسکریپت در مثال زیر یک class با مقدار disabled به المان <button> اضافه می کند.
|
1 2 3 4 5 6 7 8 9 10 |
<button type="button" id="myBtn">Click Me</button> <script> // Selecting the element var btn = document.getElementById("myBtn"); // Setting new attributes btn.setAttribute("class", "click-btn"); btn.setAttribute("disabled", ""); </script> |
مشابه آن, می توانید از متد setAttribute() برای بروزرسانی یا تغییر مقدار خصوصیت از قبل وجود داشته در یک المان HTML استفاده کنید.
کد جاوا اسکریپت در مثال زیر مقدار href المان <a> را بروزرسانی می کند.
|
1 2 3 4 5 6 7 8 9 |
<a href="#" id="myLink">Tutorial Republic</a> <script> // Selecting the element var link = document.getElementById("myLink"); // Changing the href attribute value link.setAttribute("href", "https://www.tutorialrepublic.com"); </script> |
حذف خصوصیات از المان ها
متد removeAttribute() برای حذف یک خصوصیات از المان مشخص استفاده می شود.
در مثال زیر ما خصوصیت href را المان a حذف می کنیم.
|
1 2 3 4 5 6 7 8 9 |
<a href="https://www.google.com/" id="myLink">Google</a> <script> // Selecting the element var link = document.getElementById("myLink"); // Removing the href attribute link.getAttribute("href"); </script> |
امیدوارم از آموزش کار با خصوصیات DOM در جاوا اسکریپت نهایت استفاده را برده باشید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
عشقی داداش . دمت گرم 🙂
خوشحالم که مفید واقع شده. موفق و پیروز باشید.
سلام داداش . خسته نباشی . من چطوری می تونم کل کامنت هایی که توی سایت گذاشتم ببنیم؟ خیلی وقت پیش زیر یک پستی یک سوال در مورد اضافه کردن صفحه به منوی مدیریتی وردپرس از شما پرسیده بودم . لطف کرده بودی و کد صحیح رو برام گذاشته بودی. الان هرچی می گردم پیداش نمکنم. توی ایمیلمم چک کردم ظاهرا تیک نزده بودم . الان اون کد رو گم کردم. چطوری پیداش کنم؟
سلام ممنون. انشالا سعی میشه این مورد به پنل کاربری اضافه بشه.
بفرمایید لینک همان کامنت : https://netparadis.com/login-with-github-oauth-api-php/#comment-2057
موفق باشید.