ویژگی های set و get در جاوا اسکریپت | JavaScript DOM Get Set Attributes

با عرض سلام و وقت بخیر خدمت دوستان گرامی امیدواریم حال دلتون خوب باشه .این جسله در راستای آموزش جاوا اسکریپت به مبحث ویژگی های set و get در جاوا اسکریپت خواهیم پرداخت.با ما همراه باشید.

 ویژگی  (attributes)  کلمات خاصی هستند که در داخل تگ شروع یک عنصر HTML برای کنترل رفتار تگ ها یا ارائه اطلاعات اضافی در مورد تگ استفاده می شوند.

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

Getting Element’s Attribute Value

متد ()getAttribute برای بدست آوردن مقدار فعلی یک ویژگی روی عنصر استفاده می شود.اگر ویژگی مشخص شده روی عنصر وجود نداشته باشد.آنگاه  null را برمی‌گرداند. ب عنوان مثال:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Get the Value of an Attribute</title>
</head>
<body>
    <p><a href="https://www.google.com/" target="_blank" id="myLink">Google</a></p>

    <script>
        // Selecting the element by ID attribute
        var link = document.getElementById("myLink");
        
        // Getting the attributes values
        var href = link.getAttribute("href");
        document.write(href); // Prints: https://www.google.com/
        document.write("<br>");
        
        var target = link.getAttribute("target");
        document.write(target); // Prints: _blank
    </script>
</body>
</html>

جاوا اسکریپت چندین راه مختلف برای انتخاب عناصر در یک صفحه  را ارائه می دهد. برای اطلاع بیشتر از این روش ها  می توانید جلسه سلکتور ها در جاوا  اسکریپت را مطالعه فرمایید.

Setting Attributes on Elements

متد  ()setAttribute   برای مقداردهی یک ویژگی در عنصر مشخص شده استفاده می شود.

اگر ویژگی از قبل روی عنصر وجود داشته باشد، مقدار آن  آپدیت می شود. در غیر این صورت یک اتریبیوت جدید با نام و مقدار مشخص به آن اضافه می شود. مثال زیر یک  classو یک ویژگی disabled را به عنصر <button> اضافه می کند.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Set an Attribute on an Element</title>
</head>
<body>
    <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>
</body>
</html>

همچنین می توانید از متد setAttribute برای بروز رسانی یا تغییر مقدار ویژگی موجود در یک عنصر HTML استفاده کنید.  مثال زیر مقدار ویژگی  href موجود یک تگ (<a>) را اپدیت می کند.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Change the Value of an Attribute</title>
</head>
<body>
    <p><a href="#" id="myLink">Tutorial Republic</a></p>

    <script>
        // Selecting the element
        var link = document.getElementById("myLink");
        
        // Changing the href attribute value
        link.setAttribute("href", "https://www.code-it.ir");
    </script>
</body>
</html>

Removing Attributes from Elements

متد  ()removeAttribute  برای حذف یک ویژگی از المنت مشخص شده استفاده می شود.

 مثال زیر ویژگی  href  را از تگ <a> حذف می کند.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Remove an Attribute from an Element</title>
</head>
<body>
    <a href="https://www.google.com/" id="myLink">Google</a>

    <script>
        // Selecting the element
        var link = document.getElementById("myLink");
        
        // Removing the href attribute
        link.removeAttribute("href");
    </script>
</body>
</html>

 خب دوستان گرامی، به پایان جلسه ویژگی های set و get در جاوا اسکریپت رسیدیم امیداواریم برای شما مفید واقع گردد.

سایر مقالات

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]
اشتراک‌گذاری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *