ویژگی درونی جاوااسکریپت

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

نکات اصلی ویژگی درونی جاوااسکریپت:

این ویژگی برای تنظیم یا برگرداندن محتوای HTML در داخل یک عنصر استفاده می شود.

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

ویژگی داخلی HTML توضیح داده شده است

بنابراین ، innerHTML چیست؟ بیایید با یادآوری به همه شروع کنیم که هر عنصر HTML دارای ویژگی HTML درونی است. برای تعریف تگ های HTML و همچنین محتوایی که بین آنها درج می شود استفاده می شود. این ویژگی یکی از اجزای DOM است که به توسعه دهندگان اجازه می دهد ظاهر صفحات وب را دستکاری کنند. به عبارت دیگر ، به شما امکان می دهد در مورد تمام عناصر DOM اطلاعات کسب کنید.

بعلاوه ، شما این امکان را دارید که عناصر HTML را اصلاح یا جایگزین کنید. بنابراین ، شما باید بیاموزید که چگونه از ویژگی Javascript اسکریپت innerHTML می توان به نفع شما استفاده کرد.

مردم می توانند از عدم کار با HTMLH دست و پنجه نرم کنند و شکایت کنند. چنین مواردی معمولاً به دلیل خطای انسانی رخ می دهد ، وقتی رشته ها به درستی تعریف نشده اند یا اشتباهاتی در کد JavaScript وجود دارد.

این ویژگی برای تنظیم یا برگرداندن محتوای HTML در داخل یک عنصر استفاده می شود:

document.getElementById("samplePara").innerHTML = "Help! This paragraph has changed!";

نحو صحیح ویژگی درونی جاوااسکریپت

برای جلوگیری از اشتباهات ، ما به شما پیشنهاد می کنیم که روش صحیح دستکاری عناصر DOM را با استفاده از خاصیت JavaScript داخلی HTML فرا بگیرید. بعد از اینکه اصول را یاد گرفتید ، دیگر نگران نخواهید بود که innerHTML کار کند.

برای بازگرداندن محتوای HTML در داخل یک عنصر ، باید این کد را دنبال کنید:

HTMLElementObject.innerHTML

اگر می خواهید عناصر HTML را با خاصیت جاوا اسکریپت innerHTML تغییر دهید ، ما روش مناسب تنظیم محتوای HTML در داخل یک عنصر را به شما ارائه می دهیم:

HTMLElementObject.innerHTML = متن

مولفه ها

همانطور که در مثالهای نحو مشاهده می کنید ، ویژگی JavaHSML فقط می تواند یک مقدار بگیرد. به آن متن می گویند.

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

مقدار بازگشتی

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

هیچ نوع محدودیتی در نوع تگ هایی که HTML داخلی می تواند تنظیم و برگرداند وجود ندارد. بنابراین ، آزادانه تمرین کنید. هرچه بیشتر تلاش کنید ، بیشتر یاد می گیرید!

مثالهای کد

برای کمک به شما در درک اینکه ویژگی داخلی HTML چیست و چگونه از آن استفاده می شود ، مثالهای مفیدی را برای شما فراهم می کنیم که می توانید مهارت نوشتن کد خود را در آن تمرین کنید. بعد از کلیک روی دکمه Try it Live ، می توانید بدون نیاز به ترک مرورگر ، تغییراتی ایجاد کنید و یاد بگیرید!

اولین مثال نحوه ایجاد تغییر در دو عنصر DOM را نشان می دهد:

document.getElementById("samplePara").innerHTML = "Hello, sir, what seems to be the problem?";   
document.getElementById("sampleDiv").innerHTML = "It's the paragraph. It changed!";

برای هشدار محتوای <p> با id = “samplePara” از کد زیر استفاده می شود:

alert(document.getElementById("samplePara").innerHTML);

همچنین می توانید محتوای HTML را با کد زیر از تگ <p> حذف کنید:

document.getElementById("samplePara").innerHTML = "";

مثال کد نهایی ، کدی را برای زمانی که می خواهید محتوای عنصر HTML ، URL آن و هدف پیوند را اصلاح کنید ، نشان می دهد:

document.getElementById("sampleAnchor").innerHTML = "BitDegree";  
document.getElementById("sampleAnchor").href = "https://www.BitDegree.org";  
document.getElementById("sampleAnchor").target = "_blank";