امروز سه شنبه ۱۳۹۸/۱۱/۰۱

2020/01/21 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

قبلی »

« بعدی

مطالب بیشتر:
» رویداد ها (Events) در جاوا اسکریپت (JavaScript)
» دستور switch و case در جاوا اسکریپت (JavaScript)
» دستورات شرطی (Conditional Statements) در جاوا اسکریپت (JavaScript)
» آرایه (Array) در جاوا اسکریپت (JavaScript)
» تعریف و استفاده از متغیر (Variable) در جاوا اسکریپت (JavaScript)

نظرات (۹۵ یادداشت برای این مطلب ارسال شده است)

یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.

نویسنده: mehrdad

زمان: ۲۳:۵۴:۱۹ - تاریخ: ۱۳۹۲/۰۷/۱۶

عالی بود مرسی

نویسنده: mehrdad

زمان: ۲۳:۵۴:۴۰ - تاریخ: ۱۳۹۲/۰۷/۱۶

عالی

نویسنده: Jasem

زمان: ۱۰:۵۶:۱۵ - تاریخ: ۱۳۹۲/۰۷/۱۷

سلام.
خیلی ممنون به خاطر مطالب مفید و آموزنده. اگر براتون مقدور هست یک آموزش در مورد نحوه استفاده از function, class, public function و کلا فانکشن ها در PHP منتشر کنید.
موفق باشید

پاسخ:

سلام
مباحث مورد نظر شما جزء برنامه نویسی شی گراء در PHP است و به جهت پیشرفته بودن، در آینده مطرح خواهد شد.

نویسنده: مصطفی

زمان: ۱۴:۲۱:۰۰ - تاریخ: ۱۳۹۲/۰۷/۱۷

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

x.toString

یا

toString(x)

و ایا قاعده ی خاصی در این خصوص وجود داره درباره ی تمامی متدها

پاسخ:

استفاده از متدها و متغیر ها در جاوا اسکریپت بستگی به نوع متغیر دارد (به طور مثال متغیر هم می تواند یک مقدار عددی یا رشته ای عادی باشد هم به فرض یک object از یک element که با getElementById گرفته شده و...)؛ معمولا object ها با علامت نقطه به متد متصل شده و به کار می روند و متغیرهای معمولی به عنوان آرگومان متدها درون علامت () استفاده می شوند، البته این ضابطه همیشگی نیست و در مواردی ممکن است متفاوت باشد.

نویسنده: محمد

زمان: ۱۰:۱۵:۳۴ - تاریخ: ۱۳۹۲/۰۷/۱۹

سلام
ما چطوری میتونیم قسمت (alert) روخودمون به صورت سلیقه ای طراحی کنیم؟
به عنوان مثال بجای OK بنویسیم بسیار خوب و یا این که شکل پنجره ای که به صورت هشدار باز می شود رو خودمون بتونیم طراحیش کنیم؟
متشکرم بابت آموزش های مفیدتان!

پاسخ:

سلام
طراحی پنجره ای شبیه و جایگزین alert، به آشنایی در حد نسبتا حرفه ای با CSS و JavaScript نیاز دارد، به طور مثال باید بتوانید یک پنجره کوچک را در وسط صفحه (با CSS) تنظیم کنید و (با JavaScript) برای آن رفتار تعاملی (به فرض دکمه بستن پنجره) طراحی کنید، هنگام کلیک کاربر بر روی یک گزینه، به جای فراخوانی alert، یک تابع را فراخوانی کنید که تابع بلاک سفارشی شده را از حالت display none به block تبدیل کند (پنجره را نمایش دهد) و با کلیک بر روی دکمه بستن، تابع حالت display را با مقادیر none تنظیم کند (پنجره مجددا مخفی شود).

نویسنده: تینا

زمان: ۱۵:۰۶:۵۱ - تاریخ: ۱۳۹۲/۰۷/۲۰

میشه اگه وقت دارین برای مثال بالا یه نمونه کوچک به صورت کد بسازین تا امتحانش کنم و ببینم.؟
ممنون میشم. چون منم یکی از مشکلام اینه.

پاسخ:

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

<script type="text/javascript">
//show div
function ShowError(){
	document.getElementById('wrapper').style.display = 'block';		
	document.getElementById('window').style.display = 'block';
}
//close div
function CloseError(){
	document.getElementById('wrapper').style.display = 'none';		
	document.getElementById('window').style.display = 'none';
}
</script>
<style type="text/css">
.wrapper{
	display:none;
	width:100%;
	height:100%;
	top:0%;
	left:0%;	
	position:fixed;
	background:#666;
	-khtml-opacity:0.5;
	opacity:0.5;
}
.window{
	display:none;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	width:260px;
	height:75px;
	position:fixed;
	top:50%;
	left:50%;
	margin-top:-50px;  
	margin-left:-130px;
	background:#EAEAEA;
	text-align:center;
	padding-top:25px;
	direction:rtl;
	border:2px #0099CC solid;			
}
</style>
<div id="wrapper" class="wrapper"></div>
<div id="window" class="window">
خطایی رخ داده است!
<br><br>
<input type="button" value="بستن" onclick="CloseError();">
</div>
<input type="button" value="کلیک" onclick="ShowError();">

نویسنده: تينا

زمان: ۱۸:۱۱:۴۱ - تاریخ: ۱۳۹۲/۰۷/۲۱

خيلي سپاس گذارم...

نویسنده: جواد

زمان: ۲۳:۳۹:۴۷ - تاریخ: ۱۳۹۲/۰۷/۲۲

با تشکر فراوان
اگه میشه یه مقدار درباره ی تابع

setAttribute()

توضیح بدید که چطور میشه صفات درون تگ های html رو تغییر داد مثلا با یه تابع خواهشا خیلی مهمه اگه توضیح بدید ممنون میشم

پاسخ:

همان طور که اشاره کردید، setAttribute برای افزودن یا ویرایش صفات تگ های HTML استفاده می شود، syntax کلی این متد به شکل زیر است:

element.setAttribute(name, value);

به طور مثال:

<script type="text/javascript">
window.onload = function(){
	var element = document.getElementById("id");
	element.setAttribute("style", "color:red;");
}
</script>
<div id="id">متن</div>

سورس کد خروجی:

<div style="color:red;" id="id">
متن
</div>

نویسنده: one

زمان: ۱۷:۳۶:۵۷ - تاریخ: ۱۳۹۲/۰۷/۲۶

سلام
مرسی از اموزشای خوبتون امروز به من خیلی کمک کرد
من یک کد نوشتم برای اینکه از تکست فیلدم فقط مقدار عددی به طول 8 و بگیره یعنی میخوام فقط شماره تلفن باشه ولی زمان فراخوانی فقط alert میشه که عدد 8 رقمی وارد کنید کدم اینه میشه مشکلش رو بهم بگین؟

<script type="text/javascript">
function check(id){
	if(id.length!= 8) {
		alert("شماره شما باید 8 رقم باشد");
		return false;
	} 
	else if(isNaN(id) || id.indexOf(" ") != -1){
		alert("یک مقدار عددی وارد کنید");
		return false;
	}
		return true;
}
</script>

پاسخ:

تابع را به صورت زیر تغییر داده و تست کردیم، مشکلی دیده نشد:

<script type="text/javascript">
function check(id){
	if(isNaN(id) || id.indexOf(" ") != -1){
		alert("یک مقدار عددی وارد کنید");
		return false;
	}	
	else if(id.length!= 8) {
		alert("شماره شما باید 8 رقم باشد");
		return false;
	}
	return true;
}
check('1234567890');
</script>

نویسنده: مصطفی

زمان: ۱۳:۲۷:۰۲ - تاریخ: ۱۳۹۲/۰۸/۰۴

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

پاسخ:

در پاسخ سوال اول، می توانید تابع دوم را درون تابع اصلی فراخوانی کنید، مثال:

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

در مورد سوال دوم، خیلی متوجه منظورتان نشدیم، دقیقا مقدار چه چیزی به حالت اولیه برگردد؟!

نویسنده: مصطفی

زمان: ۱۸:۲۸:۰۶ - تاریخ: ۱۳۹۲/۰۸/۰۴

ممنون بابت راهنمایی
مثلا وقتی که یک select option داریم که روی گزینه ی الف تنظیم شده بعد از اینکه ما گزینه ی ج رو انتخاب کردیم و رویداد مربوط به ج رخ داد بعد از بسته شدن و باز شدن پنجره دوباره روی گزینه ی الف تنظیم باشه نه روی ج

پاسخ:

این کار به صورت پیش فرض انجام می شود، یعنی با رفرش صفحه، اولین گزینه انتخاب می شود، روش دیگر تعیین دقیق option انتخاب شده با استفاده از خاصیت selected است:

<select name="test">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>

نویسنده: محمد حسین

زمان: ۱۰:۴۸:۲۹ - تاریخ: ۱۳۹۲/۰۸/۰۶

سلام ؛
آموزش مثل همیشه عالی بود ! خسته نباشید.
---
میخواستم خواهش کنم آموزش بعدی درباره کار با کوکی ها در جاوا اسکریپت باشه.
ممنون.

پاسخ:

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

نویسنده: احسان

زمان: ۱۶:۰۹:۳۲ - تاریخ: ۱۳۹۲/۰۹/۰۱

درود
ممنون بابت آموزش های مفیدتون
یه سوال دارم ، من میخوام مقداری که در تگ <title> هست رو بخونم ولی با استفاده از این متدی که شما گفتین هر کاری می کنم نمیشه یعنی حتما باید از متد getElementById استفاده کرد چون من از متد getElementsByTagName استفاده کردم ولی بازم نشد
میشه یه راهنمایی بفرمایید
ممنون

پاسخ:

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

var title = document.getElementsByTagName("title")[0].innerHTML;

نویسنده: مصطفی

زمان: ۱۵:۰۴:۰۵ - تاریخ: ۱۳۹۲/۰۹/۰۶

سلام
ببخشید من اسکریپت های جاوا اسکریپت رو بصورت یک فایل خارجی پیوست زدم ولی جدیدا هر تغیبری درش میدم تاثیری در صفحه نمی زاره حتی اگه کامل اسکریپتاش رو پاک کنم بازم توابعی که از قبل توش نوشتم در صفحه اجرا میشه وقتی در قسمت head همون اسکریپت رو می نویسم اجرا میشه نمی دونید مشکلش چیه؟ من از easyphp استفاده می کنم

پاسخ:

سلام
به نظر مشکل از cache شدن فایل ها در مرورگر است، برای رفع مشکل یک پارامتر فرضی از نوع متد GET به آدرس فایل ها اختصاص دهید، به فرض:

<script type="text/javascript" src="http://yoursite.com/file.js?ver=t2rt77463yh9tk"></script>

با تغییر مقادیر پارامتر فرضی ver، فایل به صورت خودکار از سرور بارگذاری می شود.

نویسنده: رضا

زمان: ۱۳:۲۱:۳۰ - تاریخ: ۱۳۹۲/۰۹/۲۴

سلام نمیدونستم کجا سوالم رو مطرح کنم اگر توی این تایپیک جاش نبود راهنمایی کنید .
سوال : من از وردپرس استفاده می کنم و یه قالب برای یه برگه درست کردم و در اون قالب مطالب چند دسته رو فراخونی کردم . در جلوی هر مطلب زمان انتشارش رو درست کردم ولی اینجاش دیگه موندم میخواستم دو تا ایدی دسته در نظر بگیریم من میخوام برای هر ایدی یه اسم بزارم مثلا ایدی دسته ای شمارش 1 هست رو بزارم رضا و ایدی دسته دیگری که شمارش هست 2 بزارم سعید . خب نامگذاری تموم شد میرسه فراخوانیش . اگه مطلبی که از از دسته ایی که شماره ایدیش 1 بود وارد برگه شد جلوی مطلب اسم رضا نوشته بشه و اگه از دسته دیگری که از ایدی شماره 2 اومد جلوی مطلب نوشته بشه سعید. خدا کنه تونسته باشم منظورم رو برسونم
یه مثال هم میزنم فرض کنیم دو مطلب وارد برگه شده مطلب اول از ایدی دسته 2 اومده و مطلب دیگه از ایدی شماره 1 اومده
استقلال قهرمان شد سعید
پرسپولیس باخت رضا

پاسخ:

سلام
از کدهایی گفته اید که هیچ تصور خاصی از آنها نداریم، لطفا این نوع سوالات را با ارجاع به صفحه اصلی یا نمونه کد مطرح کنید!

نخست

قبلی

بعدی

آخر

صفحه 1 از 7

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

نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.

آخرین دیدگاه ها

امین

در:

نحوه ذخیره کردن اطلاعات با دستور INSERT در MySQL

سلام خسته نباشید یه اسکریپت دارم که وقتی کاربر ثبت نام میکنه یه پوشه و محتواش ایجاد میشه. میخوام یه صفحه با هر ثبت نام...

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

Admin

در:

پاسخ به سوالات و حل مشکلات وبلاگ نویسان

سلام دوست عزیز. میشه بگویید چگونه میتوان در وبلاگ کادری را باز کرد که بازدید کنندگان بتوانند در آن چیزی بنویسند. ممنون میشم...

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

مهدی