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

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 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)
حلقه for و while در جاوا اسکریپت (JavaScript)
کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
تعریف و استفاده از متغیر (Variable) در جاوا اسکریپت (JavaScript)
آرایه (Array) در جاوا اسکریپت (JavaScript)

دیدگاه

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

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

آرش

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

http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser

اگر دقیق مطالب و یادداشت ها را مطالعه کنید، تقریبا در تمام پیشنهادها (با کدهای صرف JS) مشکلاتی در برخی مرورگرها (یا در برخی نسخه ها) عنوان شده و لذا راه قابل اعتماد و ساده ای برای این مورد وجود ندارد!، در صورتی که نیاز مبرم به این امکان دارید، راه حل های مبتنی بر جی کئوری عنوان شده در صفحه فوق تنها گزینه است!

آرش

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

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

راه حل عمدتا مبتنی بر جی کئوری است، در هر صورت آدرس سایت را جهت بررسی درج کنید!

آرش

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

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

javascript:window.scrollBy(0,200)

کد پیست کردن به چه صورت میشه؟

سلام
به دلیل اینکه این مورد (copy paste با جاوا اسکریپت) ممکن است موجب سوء استفاده های امنیتی شود، متاسفانه هیچ متد ساده ای که در تمام مرورگرها پشتیبانی شود برای آن وجود ندارد و مرورگرها سختگیری های خاصی در این رابطه اعمال می کنند!

علی

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

خسته نباشی
از چه متدی برای نوشتن تو فایل استفاده میشه ؟

تا آنجا که اطلاع داریم با جاوا اسکریپت امکان دسترسی و نوشتن فایل های کاربران حداقل به راحتی میسر نیست که این به علت رعایت اصول امنیتی در وب است!

علی

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

سلام من میخوام مقدار عددی z رو توی فیلد number نمایش بده z عددی هست که پس از اتمام اجرای کد محاسبه میشه اگه کمکم کنید ممنون میشم .
اینم کد هست :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>میانگین گیر آزمایشی</title>
</head>
<body>
<div align="center" style="border:solid; border-color:#FFF">
<input type="number" value="" id="p" readonly>
<input type="button" value="Min" onClick="Min('p')">
</div>
<script language="javascript">
function Min(id){
	var n = prompt("تعداد اعداد را وارد کنید");
	var c = 1;
	var x = prompt("عدد مورد نظر خود راوارد کنید");
	var s = x;
	do{
		var c = (parseInt(c) + parseInt(1));
		var y = prompt("عدد مورد نظر خود راوارد کنید");
		var s = (parseInt(y) + parseInt(s));
	}
	while (c<n);
	var z = s/n;
	document.getElementById(id).value = z;
}
</script>
</body>
</html>

سلام
کد ویرایش شد، البته هدف از تابع شما مشخص نیست، اما متد مورد نظر (بر اساس برداشت ما) به آن اضافه شد!

علی

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

سلام خسته نباشید :
آیا می شه از توابع api هم درجاوااسکریپت استفاده کرد. اگر می شه. جاوااسکریپت تا چه حد از api پشتیبانی می کنه. و اینکه آیا سایتی می شناسید که این مبحث و مباحث پیشرفته جاوااسکریبت رو دنبال کرده باشه.

سلام
منظور سوالتان دقیقا مشخص نیست! قاعدتا اگر Syntax جاوا اسکریپت را رعایت کنید، می توانید API برنامه خودتان را بر اساس آن طراحی نمائید، به طور مثال کتابخانه گوگل مجموعه قابلیت هایی است که گوگل با رعایت Syntax جاوا اسکریپت ایجاد کرده، یا کتابخانه jQuery و...، جاوا اسکریپت همچنین از قابلیت دیگری به نام JSON پشتیبانی می کند که می تواند در ارتباط با سایر برنامه های مرتبط با وب و سرور استفاده شود.

حمیدرضا

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

سلام
من قصد دارم که متن انتخاب شده ای در

<select><option>

را در تکست باکسی در همان فرم ذخیره کنم
innerHTML به من تمام محتوای select را میده
لطفا راهنماییم کنید

سلام
- برای دریافت مقادیر value از تگ select از نمونه کد زیر استفاده کنید:

var elm = document.getElementById("id");
var value = elm.options[elm.selectedIndex].value;

- اگر به جای value مقادیر text مد نظر بود، نمونه کد زیر کاربرد دارد:

var elm = document.getElementById("id");
var text = elm.options[elm.selectedIndex].text;

نکته: در قسمت id، id تگ select را جایگزین کنید.

امین

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

استاد شرمنده درست شد
یکی از پارامترها رشته بود که باید با ' ارسال میکردم.
که یادم رفته بود.
تشکر!!

احمد

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

ببخشید اشتباه گفتم :
وقتی چهار تا ارسال میکنم میشه اما وقتی پنج تا ارسال میکنم نمیشه. یعنی انگار از تو oncllick نمیاد تو function وقتی 4 تا هست میاد سر 5 تا میگه Undifin حتی وقتی مقدار هم میزارم قبول نمیکنه مثلا 5 تا مقدار میزارم تو onclik

امین

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

سلام استاد
من دقیقن همین کار رو میکنم وقتی سه تا پارامتر ارسال میکنم صفحه باز میشه تو آدرس بار هم پارامترها میان اما وقتی بخوام 4 تا ارسال کنم به هیچ وجه شدنی نیست؟؟ احساس میکنم یه حداکثری برای ارسال پارامتر ها وجود داره !!!!!!!!!؟؟؟؟؟

امین

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

سلام لطف میکنید کمک کنید؟ ممنون میشم :
موضوع : ارسال متغیر به تابع در جاوا اسکریپت
شرح:
ببینید من یه فرم دارم که میره از جدول دیتابیس اطلاعات رو میخونه و چاپ میکنه فرض کنید که 10 سطر شده حالا هر سطر میخوام دکمه ای داشته باشه که با زدن بر آن دکمه اطلاعات کامل هر رکورد جدول a که تو جدول B هست رو از جدول B در یافت کنه خوب با php مشکلی ندارم اما میخوام اطلاعات کلید هر سطر رو به تابع جاوا بفرستم که تابع جاوا بیاد یه پنجره کوچک باز کنه و اطلاعات از جدول B در اون نمایش بده.
به تابع زیر اطلاعات هر سطر رو که تو متغیر php هست بریزم؟
کد لینکی که میخوام تو ی سلول از هر سطر بزارم:

while
{
<a onclick='WinOpen()' href="show">
}

تابع جاوا اسکریپت:

<script type="text/javascript">
function WinOpen(){
    var url = "";
    window.open(url, "");
}
</script>

سلام
تقریبا مراحل کار را خودتان توضیح دادید! کافی است در هنگام چاپ خروجی اولیه در PHP، در هر ردیف یک دکمه input یا لینک a در حلقه چاپ کنید که در قسمت onclick، آرگومان متفاوتی برای تابع WinOpen تنظیم نماید، یک مثال فرضی:

<?php
while($row=mysqli_fetch_assoc($result)){
	echo '<a onclick="WinOpen('.$row['id'].')" href="#show">';
}
?>

به این صورت پس از کلیک کاربر، تابع WinOpen فراخوانی و مقدار ID به عنوان پارامتر به این تابع ارسال می شود، از این مقدار برای انتقال شماره ردیف به سرور از طریق متد GET در قسمت url دستور window.open استفاده خواهد شد، مثال:

<script type="text/javascript">
function WinOpen(id){
    var url = "/your-page/?id=" + id;
    window.open(url, "");
}
</script>

که در نهایت می توان خروجی مد نظر را در صفحه pop-up نمایش داد.

m.f

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

سلام
من می خوام یک تابع بنویسم که آرایه هاش از 1 تا 20 باشه و فقط از 10 کوچکتر رو نمایش بدهد. باید چی کار کنم؟
یه سوال دیگه ام دارم من می خوام آدرس یه صفحه از جاوا رو به یه input در یک صفحه دیگه بدم باید چیکار کنم؟

سلام
سوالات کلی است، بهتر بود بخشی از کدها را خودتان می نوشتید.
- برای سوال اول شاید نمونه زیر گویا باشد:

<script type="text/javascript">
window.onload = function(){
	var array = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
	for(var i = 0; i < 10; i++){
		document.getElementById('test').innerHTML += array[i] + '<br>';
	}
}
</script>
<div id="test"></div>

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

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

pedram

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

سلام. بابت توضیحات ممنون. اگر پنجره جدید با خاصیت location انجام شود می شود چنین کاری کرد . می خواهیم در خود صفحه باز شود . زمانی که از خاصیت self شی window استفاده می کنم این کار را انجام نمی دهد . اگر امکانش هست راهنمایی کنید .

سلام
لطفا نمونه فایل های خود را با توضیحات به آدرس ایمیل ما (موجود در بخش تماس) ارسال کنید تا بررسی گردد.

pedram

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

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

سلام
اگر منظورتان چاپ اطلاعات پس از ارسال آنها به صفحه ای دیگر است، باید از یک زبان سمت سرور (مانند PHP) بدین منظور استفاده کنید، اما اگر منظور چاپ در صفحاتی مانند pop-up است، می توانید متدهای متداول را با متد window.opener استفاده کنید، به طور مثال کد زیر اطلاعات یک فیلد را بر اساس id آن از صفحه اصلی به صفحه ای که pop-up از آن صفحه شده انتقال می دهد:

var input = window.opener.document.getElementById('input-id').value;

به این صورت در ادامه می توان متغیر input را در کدها به نحو دلخواه استفاده نمود.
نکته: قاعدتا کد بالا باید در صفحه pop-up درج و اجرا شود.

مهدی

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

سلام خیلی ممنون از مطالب بسیار عالیتون
خیلی استفاده کردم مخصوصا برای مثال دوم innerHTML ، سوالاتی دارم ممنون میشم پاسخ بدید
اگر بخوایم در مثال دوم innerHtml به جای متن "این یک تست است"، یه کد مثلا php اجرا بشه چیکار باید بکنیم؟ وقتی کد php رو بجای متن "این یک تست است" قرار میدیم کلا همش به هم میریزه.
سوال بعدی هم اینکه حالا ما این کد php رو بجای متن قرار دادیم و همه چی درست باشه
اگر این کدphp طولانی و سنگین باشه و ازش بخوایم چند بار در یک صفحه استفاده کنیم ، اون صفحه سنگین میشه و طول میکشه که به صورت کامل لود بشه
آیا راهی هست که کد php تا زمانی که روی دکمه کلیک نشده لود یا فراخوانی نشه که بشه اینطوری از سنگین شدن صفحه خودداری کرد؟
قبلا از پاسختون سپاسگذارم.

سلام
سوالتان کمی مبهم است، بدون بررسی سورس کدها و هدف شما نمی توان دقیق کمک کرد، در حد اطلاعات داده شده برای ترکیب کدهای PHP با جاوا اسکریپت باید در فایل php خروجی را طوری ایجاد کنید که در نهایت به صورت استاندارد HTML JavaScript باشد، به عبارتی کدهای سمت سرور (PHP) صرفا مواد اولیه را برای کدهای اصلی (JavaScript) فراهم می کنند، در نهایت باید کدها مطابق با syntax جاوا اسکریپت در خروجی چاپ شوند، یک راه حل برای گام های اولیه این است که ابتدا خروجی مورد نظرتان را به صورت HTML JavaScript بنویسید و سپس سعی کنید با کدهای PHP همان خروجی را ایجاد نمائید (نیازمند آشنایی با نحوه گرفتن خروجی در PHP است)، در مورد بحث سنگین بودن و کلیک بر روی یک دکمه، راه حل متداول استفاده از Ajax است که خود آموزش های جداگانه دارد.

صفحه 5 از 9

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