آموزش برنامه نویسی وب و مهارتهای مرتبط

چهارشنبه ۰۸ بهمن ۱۴۰۴

Wednesday, January 28, 2026 GMT +3:30

کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)

معمولا در زبان های برنامه نویسی مختلف، برخی خاصیت ها و متدها بیشتر از سایر موارد به کار می روند که می توان اصطلاح متدهای پرکاربرد را برای آنها به کار برد، در کدنویسی با جاوا اسکریپت، دو متد پرکاربرد getElementById و innerHTML جزء برجسته ترین این موارد هستند، البته عبارت متد (Method) بیشتر در برنامه نویسی شی گرا (OOP یا Object Oriented Programming) کاربرد دارد و مواردی مانند innerHTML را خاصیت (Property) می نامند، با این وجود و به جهت اینکه این موضوع (OOP) در جاوا اسکریپت چندان مصداق ندارد، به اختصار و در این آموزش به هر دو، متد خواهیم گفت، به هر صورت برای آشنایی بیشتر و جهت تکمیل دانستنی هایی که تا این لحظه آموخته ایم، با ادامه مطلب همراه ما باشید.

متد getElementById

از getElementById در جاوا اسکریپت برای تعیین یک مرجع (reference) به یک عنصر (element) با توجه به ID آن استفاده می شود، به زبان ساده یعنی انتخاب یک عنصر HTML (به فرض تگ div) با توجه به ID آن، به طور مثال اگر بخواهیم مقادیر value یک input را با توجه به ID آن استخراج کنیم، خواهیم نوشت:

<input id="test" type="text" value="1">
<script type="text/javascript">
var input = document.getElementById('test').value;
alert(input);
</script>

نکته 1: همان طور که در مثال بالا مشخص است، متد getElementById خود وابسته به شی (object) دیگری به نام document است، لذا الزاما باید به همراه آن استفاده شود.
نکته 2: متد getElementById نسبت به بزرگ یا کوچک بودن مقادیر ID حساس است، به طور مثال Id با id در این متد دو مقدار متفاوت هستند.
نکته 3: در هنگام استفاده از متد getElementById دقت کنید که تگ مورد نظر پیش از فراخوانی، در دسترس قرار گرفته باشد، به عبارت دیگر ابتدا باید تگ مورد نظر توسط مرورگر (و بر اساس ساختار DOM یا نمودار درختی تگ ها از بالاترین قسمت صفحه به پائین) پردازش شود و سپس بتوان عملیاتی روی آن انجام داد، به فرض حالت زیر اشتباه است و خطای TypeError: document.getElementById(...) is null را دریافت خواهید کرد.

<script type="text/javascript">
var input = document.getElementById('test').value;
alert(input);
</script>
<input id="test" type="text" value="1">

علت خطا در مثال بالا این است که پیش از پردازش تگ input مورد نظر، آن را در دستورات جاوا اسکریپت فراخوانی کرده ایم، در صورت نیاز می توانید این مشکل را با استفاده از window.onload (این رویداد زمانی اجرا می شود که صفحه به طور کامل بارگذاری شده باشد) برطرف کنید:

<script type="text/javascript">
window.onload = function(){
    var input = document.getElementById('test').value;
    alert(input);
}
</script>
<input id="test" type="text" value="1">

متد innerHTML

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

<script type="text/javascript">
function SetValue(id){
    var element = document.getElementById(id);
    //دریافت مقادیر از عنصر مورد نظر
    var value = element.innerHTML;
    alert(value);
}
</script>
<input type="button" onclick="SetValue('result');" value="کلیک کنید">
<div id="result">این یک تست است</div>

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

<script type="text/javascript">
function SetValue(id, value){
    var element = document.getElementById(id);
    //اختصاص مقدار به عنصر مورد نظر
    element.innerHTML = value;
}
</script>
<input type="button" onclick="SetValue('result', 'این یک تست است');" value="کلیک کنید">
<div id="result"></div>

نکته 1: همان طور که ملاحظه می کنید innerHTML وابسته به متد و آبجکت پیش از خود (document و getElementById) است.
نکته 2: استفاده از متد innerHTML برای تغییر محتوای یک عنصر والد (parent) باعث حذف تگ های فرزند (child) آن نیز می شود، به فرض اگر درون تگ div از چند تگ تو در تو استفاده شده باشد، با به کار بردن innerHTML برای تگ والد، محتوای آن هر چه باشد (شامل تگ های div تو در تو) حذف و با مقادیر جدید جایگزین می شود.
نکته 3: برای دریافت مقادیر از تگ input یا تغییر محتوای آن، باید از متد value به جای innerHTML استفاده شود.

مثال و پیش نمایش آنلاین

برای آشنایی بیشتر با کاربردهای getElementById و innerHTML در جاوا اسکریپت، چند مثال کاربردی را همراه با پیش نمایش آنلاین در زیر بررسی می کنیم.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>وبگو | کاربرد متد getElementById و innerHTML</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
    line-height:20px;
}
#text-box{
    padding:6px;
    background:#CCC;
}
#test-block{
    padding:6px;
    background:#CCF;
    cursor:pointer;    
}
</style>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است یا پشتیبانی نمی شود!<br>
</noscript>
<input id="test" type="text" value="یک مقدار وارد کنید">
<input type="button" value="کلیک کنید" onclick="AlertValue('test');">
<script type="text/javascript">
function AlertValue(id){
    var value = document.getElementById(id).value;
    alert(value);
}
</script>
<br><br>
آرگومان متد getElementById همان id عنصر HTML مورد نظر است.
<hr><br>
<div id="text-box">پس از کلیک بر روی دکمه تغییر رنگ و اجرای تابع ChangeColor، با استفاده از متد getElementById و style رنگ پس زمینه این بلاک تغییر می کند!</div><br>
<input type="button" value="تغییر رنگ" onclick="ChangeColor('text-box');">
<input type="button" value="رنگ پیش فرض" onclick="DefaultColor('text-box');">
<script type="text/javascript">
function ChangeColor(id){
    var block = document.getElementById(id);
    block.style.backgroundColor = "#FC0";        
}
function DefaultColor(id){
    var block = document.getElementById(id);
    block.style.backgroundColor = "#CCC";        
}
</script>
<hr><br>
<input id="text-input" type="text" onkeyup="InnerChange(this.id);"><br>
<div id="inner-text"></div>
<script type="text/javascript">
function InnerChange(id){
    var element = document.getElementById(id);
    var value = element.value;
    document.getElementById('inner-text').innerHTML = value;
}
</script>
<br><br>
پس از تایپ عبارت در فیلد بالا، رویداد onkeyup اجرا شده و تابع InnerChange فراخوانی می شود، در این مثال از متد innerHTML استفاده کرده ایم.<br>
نکته: با استفاده از عبارت کلیدی this.id می توانید به صورت خودکار id بلاک یا تگ input مورد نظر را به کدهای خود بدهید.
<hr><br>
<div id="test-block" onclick="GetText(this.id);">این یک متن آزمایشی است!</div>
<script type="text/javascript">
function GetText(id){
    var element = document.getElementById(id);
    var text = element.innerHTML;
    alert(text);
}
</script>
<br><br>
برای دریافت متن داخل بلاک div با استفاده از متد innerHTML، در داخل کادر رنگی بالا کلیک کنید.
</body>
</html>

پیش نمایش

دسته بندی: آموزش مقدماتی » JavaScript

برچسب ها: JavaScript

قبلی »

« بعدی

مطالب بیشتر:
دستور switch و case در جاوا اسکریپت (JavaScript)
تعریف و استفاده از متغیر (Variable) در جاوا اسکریپت (JavaScript)
متدهای کار با آرایه در جاوا اسکریپت (JavaScript)
کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
توابع (Functions) در جاوا اسکریپت (JavaScript)

دیدگاه

۱۳۴ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

milad

۱۴:۰۵ ۱۳۹۳/۱۰/۰۴

من یک مشکل در امنیت سایت دارم و می خوام یک id که با متد getElementById فرا خوانی نشه چیکار باید بکنم

سوالتان مبهم است! قاعدتا اگر اجازه اجرای دستورات جاوا اسکریپت در سایتتان داده شود، به ID نیز دسترسی خواهند داشت و نمی توان ID را طور دیگری تعریف کرد!

Ali Zeus

۰۰:۱۷ ۱۳۹۳/۰۷/۰۲

با سلام
بسیار ممنون از کمکتون

Ali Zeus

۰۰:۰۵ ۱۳۹۳/۰۷/۰۱

با سلام مجدد و ممنون از پاسختون
با استفاده از کلاس و گرد کردن با for تونستم المنت ها رو انتخاب کنم ولی تاج نیم چطور کار میکنه؟
اگه امکانش هست یک نمونه یا مثال بزنید
در مورد سوال دومم هم با قرار دادن تعدادی t\ مشکم حل شد
سپاس

سلام
درک متد getElementsByTagName نیاز به آموزشی جداگانه دارد، در حد اطلاعات اولیه این متد بر اساس الگوی HTML DOM یک تگ خاص (به فرض div) را انتخاب و نتیجه را به صورت آرایه بر می گرداند، لذا تغییرات نیز باید با مشخص کردن شماره تگ (کلید آرایه) مورد نظر اعمال شود، مثال:

<script type="text/javascript">
function changeTag(id){
	elm = document.getElementById(id);
	array = elm.getElementsByTagName('p');
	
	for(var i = 0; i < array.length; i++){
		elm.getElementsByTagName('p')[i].style.backgroundColor = '#C0C0C0';
	}
}
</script>
<input type="button" value="کلیک" onclick="changeTag('test');">
<div id="test">
<p>پاراگراف اول</p>
<p>پاراگراف دوم</p>
<p>پاراگراف سوم</p>
</div>

Ali Zeus

۱۵:۱۲ ۱۳۹۳/۰۶/۳۱

با سلام و خسته نباشید... دو سوال...
1- من کدی نوشتم که استایل یک id رو تغیر بده

document.getElementById('text').style.color="red"

میخام این کد برای تمام تگ هایی که ایدی انها text هست اعمال بشه ولی فقط به اولین تگ id=text اعمال میشه
باید از css بجای style استفاده کنم؟ یا گردش کنم؟ یا...؟!؟
2- روشی هست که متن داخل یک alert رو center کرد؟
مثلا چند خط (n\) متن که طولشون با هم متفاوته رو در وسط alert نشون بده
ممنون

سلام
1- استفاده از یک ID برای چند عنصر در صفحات وب مجاز نیست، در واقع ID فاکتور شناسایی یکتا برای یک عنصر است و لذا نباید برای چند تگ استفاده شود، در نتیجه با متد document.getElementById نمی توانید این کار را انجام دهید، باید با توجه به هدفتان و شزایط کدنویسی صفحه، یکی از روش های Tag, Name و Class را انتخاب و سپس در حلقه این کار را انجام دهید، یعنی تغییر بر اساس این ویژگی ها که هر کدام متد خاص خود را دارد.
2- اصولا صفحه alert مرورگرها قابل سفارشی سازی نیست، صرفا در حد استفاده از علامت هایی مانند t\ شاید بتوان تغییراتی اعمال کرد، آن هم تنها در برخی مرورگرها.

مهشيد

۱۵:۲۹ ۱۳۹۳/۰۶/۲۹

ممنون از راهنماييتون

مهدی

۱۰:۲۶ ۱۳۹۳/۰۶/۲۷

سلام یه سوال دارم ممنون میشم جواب بدید و منو با ایمیل خبر کنید.
من دنبال یه کد جاوا هستم که بتونه توی
<p>سایت وبگو سایت آموزشی</p>
وبگو رو به رنگ قرمز در بیاره!!!!
مثلا من وارد سایت میشوم و یه جمله مینویسم و جاوا اسکریپت بیاد و هر چی وبگو تو جملم هست رو قرمز کنه ؟
آیا میشه ؟

سلام
می توانید از نمونه کد زیر استفاده کنید:

<script type="text/javascript">
var originalText = "";
function findReplaceText(needle, replacement){
	if(originalText.length == 0){
		originalText = document.getElementById("original").innerHTML;
	}
	
    var match = new RegExp(needle, "ig");     
    var replaced = "";
    if(replacement.length > 0){
		replaced = originalText.replace(match, replacement);
	}
	else{
		var boldText = "<div style=\"background-color: yellow; display: inline; font-weight: bold;\">" + needle + "</div>";
		replaced = originalText.replace(match, boldText);
	}
	document.getElementById("original").innerHTML = replaced;
}
</script>
<div id="original">جستجو و جایگزینی عبارت با جاوا اسکریپت جستجو و جایگزینی عبارت با جاوا اسکریپت</div>
<input type="button" value="جستجو" onclick="findReplaceText('جاوا', '')">

مهشيد

۱۰:۳۷ ۱۳۹۳/۰۶/۲۶

حالا ميشه لطف كنيد اين سوال منو پاسخ بدهيد من اين پرو‍‍‍‍‍‍‍‍‍‍‍‍ژه را تا فردا بايد تحويل بدم.
من يك فرم زدم كه ميخوام textbox هاي آن به حروف فارسي فقط حساس باشه و اگر عدد يا حرف انگليسي بود error دهد.
با تشكر

انجام صددرصد این کار نیاز به لحاظ کردن موارد زیادی است که در این فرصت کوتاه امکانپذیر نیست، اما به عنوان یک راه حل کوتاه می توانید از نمونه کد زیر پیروی کنید:

<script type="text/javascript">
function checkText(){
	var elm = document.getElementById("field");
	for(var i = 0; i <= elm.value.length; i++){
		if(elm.value.charCodeAt(i) < 255 && elm.value.charCodeAt(i) != 32){
			alert('تنها حروف فارسی مجاز است');
			return false;
		}
	}
}
</script>
<input type="text" id="field" onkeyup="checkText()">

mahshid

۱۶:۱۸ ۱۳۹۳/۰۶/۲۴

ببخشيد من حدود 1 هفته پيش از شما كمك خواستم ولي شما هيچ پاسخي نداديد. خواهشا جواب سوال منم بدهيد.

تقریبا به همه سوالات پاسخ داده می شود، مگر مواردی که قوانین بخش ارسال نظر را تا حد زیادی رعایت نکرده باشند (این موارد در فرم ارسال نظرات قید شده!)

davod

۱۱:۵۷ ۱۳۹۳/۰۶/۱۹

سلام وقت بخیر
ببخشید میخوام محتوای یک تگ div با لود شدن صفحه به محتوای مورد نظر من تغییر کنه .
واضحتر بگم اینکه ، بدون دکمه اینکار صورت بگیره ، وقتی صحه لود شد ، محتوایی که داخل innerHTML وارد کردم جای کل محتوای داخل id داخل صفحه بشه .

سلام
می توانید کدها یا تابع خود را درون رویداد window.onload فراخوانی کنید، مثال:

<script type="text/javascript">
window.onload = function(){
	alert('test');
}
</script>

کاربر مبتدی js

۰۰:۳۱ ۱۳۹۳/۰۶/۱۳

سلام در یکی از سوالات کاربران کد زیر را مطرح کردید

<script type="text/javascript">
function func_1(num){
return num + 50;
}
function func_2(){
alert(func_1(20));
}
func_2();
</script>

لطفا بگید return دقیقا برای چه استفاده شده و منظور از برگرداندن یک مقدار چیه؟
مگه کد زیر کار کد بالا رو انجام نمیده پس دیگه چه نیازی به return است؟

<script type="text/javascript">
function func_1(num){
var sum = num + 50;
alert(sum)
}
func_1(20);
</script>

سلام
سوال کاربر مربوط به استفاده از یک تابع در تابع دیگر بوده و مثال در این راستا است!
در کدنویسی معمولا برای رسیدن به یک هدف روش های مختلفی وجود دارد و الزاما هر خروجی تنها به یک روش به دست نمی آید!
return پاسخی (دلخواه) است که تابع در جواب فراخوانی خود برمی گرداند، این پاسخ می تواند هر چیزی از جمله true یا false باشد، زمانی که تابع یک مقدار را return می کند، این مقدار می تواند در محلی دیگر مورد استفاده قرار گیرد.

کاربر مبتدی js

۰۰:۰۰ ۱۳۹۳/۰۶/۱۳

سلام.
در تکه کد زیر：

<input id="text-input" type="text" onkeyup="InnerChange(this.id);">

اگر به جای this.id همون id تگ input نوشته بشود هیچ مشکلی پیش نمی آید.

سلام
استفاده از this.id روش داینامیک برای رسیدن به ID تگ مورد نظر است، در واقع this.id همان ID را برمی گرداند منتها اگر بعدها ID تغییر کرد، نیاز به ایجاد تغییرات دیگری در قسمتی دیگر نیست!

Ali Zeus

۱۹:۱۰ ۱۳۹۳/۰۶/۱۰

با سلام و ممنون از پاسختون
با کمی تغییر در کدی که نوشته بودم مشکلم حل شد

<body id="body_bg">
<script>
var time_value=0;
function time_fun(){time_value+=1; setTimeout("time_fun()",100);
document.getElementById('body_bg').style.background="url('89/c2_2011b.jpg') scroll center "+time_value+"px";}
time_fun();
</script>
</body>

Ali Zeus

۱۶:۵۶ ۱۳۹۳/۰۶/۱۰

با سلام و خسته نباشید
چطور میشه با جاوا مقدار

background-position:center 1px

رو تغیر داد؟
کد زیر چه مشکلی داره؟

document.getElementById('body_bg').style.backgroundposition="center "+value+"px";

value بر اساس تایمر، تغیر میکنه که در این قسمت کد میخوام بکگراند رو اسکرول کنه

سلام
تا آنجا که اطلاع داریم تنظیم مقدار خاصیت background-position به صورت center 1px صحیح نیست! مقادیر یا باید به صورت زیر باشد:

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

یا به صورت پیکسلی یا درصدی.

ایمان

۱۶:۰۲ ۱۳۹۳/۰۵/۳۱

سلام
فرق document.getElementById('test').value و document.getElementById('test').innerHTML چی هستش؟

سلام
از متد value برای مواردی استفاده می شود که عنصر هدف دارای خصوصیت value باشد، مانند تگ input، از innerHTML در سایر موارد می توان استفاده کرد، به طور مثال برای تگ div و...

shahin

۱۸:۲۳ ۱۳۹۳/۰۵/۱۹

سلام با این روش میشه یک مقدار رو از داخل کد یک سایت دیگه گرفت ؟!
اگه میشه یه توضیح بدید یا برام ایمیل کنید ممنون

سلام
خیر، برای اینگونه موارد باید PHP بلد باشید.

صفحه 6 از 9

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