article

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

javascript-getelement-inner

معمولا در زبان های برنامه نویسی مختلف، برخی خاصیت ها و متدها بیشتر از سایر موارد به کار می روند که می توان اصطلاح متدهای پرکاربرد را برای آنها به کار برد، در کدنویسی با جاوا اسکریپت، دو متد پرکاربرد 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>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» دستور switch و case در جاوا اسکریپت (JavaScript)
» کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
» کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
» توابع (Functions) در جاوا اسکریپت (JavaScript)
» حلقه for و while در جاوا اسکریپت (JavaScript)
commentنظرات (۹۵ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: مطهره
زمان: ۱۳:۴۵:۵۹ - تاریخ: ۱۳۹۶/۰۶/۱۱
سلام خیلی خیلی ممنونم درست شد
نویسنده: زهرا
زمان: ۲۲:۳۱:۱۵ - تاریخ: ۱۳۹۷/۰۷/۱۱
خدا قوت
ساییتون عالی هست.
نویسنده: farazsh
زمان: ۰۲:۱۷:۴۰ - تاریخ: ۱۳۹۷/۱۰/۱۵
با سلام
اساتید و دوستان کسی می دونه این صفحه چگونه مقدارها را بین یکدیگر دریافت می کنند لطفا راهنمایی بفرمایید صفحه توضیحات محصول زیر می باشد روی لینک کلیک کنید به دامنه دیگر می رود و در آن دامنه صفحه به صورت اتوماتیک id محصول را جایگزین می کند
http://site.hdom.ir/site/29364/html
این صفحه id محصول را چگونه دریافت می کند و دوباره به صفحه محصول انتقال می دهد
http://ampf.ir/ap/
لطفا راهنمایی بفرمایید
لطفا راهنمایی بفرمایید
پاسخ: 
با توجه به نمونه آدرس های درج شده و بررسی ما، پارامترها حداقل در مرحله قبل از پرداخت از طریق آدرس URL و متد GET منتقل می شوند، اعداد 470 و 30617 پارامترهایی هستند که شما از سرور دانلود فایل درخواست می کنید و سرور متناسب با درخواست شما محتوای مد نظر را نمایش می دهد.
نویسنده: احمد
زمان: ۱۴:۲۹:۴۶ - تاریخ: ۱۳۹۷/۱۱/۱۷
با سلام
من وقتی که توی یک صفحه به طور مرتب از innerHTML در ایجکس برای نمایش نتایج استفاده میکنم پردازش صفحه به سختی صورت میگیره و کند میشه و مجبور میشم که صفحه رو ریلود کنم. به نظر شما علت کند شدنش چیه و از چه راهی باید این مشکل رو برطرف کنم؟
پاسخ: 
دو احتمال زیر را بررسی کنید:
- مشکل از حجم زیاد اطلاعاتی است که با متد innerHTML دریافت و مجددا مقداردهی می کنید، برای رفع این حالت باید هر دریافت و درج پاسخ از موارد قبلی مستقل باشد، این کار با ایجاد بلاک های div با آی دی مجزا و به صورت داینامیک در خروجی امکانپذیر است، مثال:
<style>
.block {
width: auto;
height: 50px;
border: 1px solid #999;
margin: 2px;
}
</style>
<script>
var loop = 1;
var last;
function testInnerHTML(sort){
var elm = document.getElementById('result');
var div = document.createElement('div');
div.setAttribute('id', 'block-' + loop);
div.setAttribute('class', 'block');
div.innerHTML = 'New Result ' + loop + '!';

if(sort == 'up'){
elm.appendChild(div);
} else if(sort == 'down'){
if(last == 'undefined' || last == null ){
elm.appendChild(div);
last = document.getElementById('block-' + loop);
} else {
elm.insertBefore(div, last);
last = document.getElementById('block-' + loop);
}
}

loop++;
}
</script>
<div id="result"></div>
<input type="button" value="Test" onclick="testInnerHTML('down');">
تابع را با دو آرگیومنت up و down مقداردهی و با زدن دکمه F12 در مرورگر فایرفاکس خروجی HTML آن را بررسی کنید.
- مشکل می تواند از تعداد زیاد درخواست های ای جکس در بازه زمانی کوتاه باشد که در این صورت می توانید تعداد درخواست ها را کاهش داده یا با توابعی مانند setTimeout و clearTimeout آنها را مدیریت کنید.
نویسنده: Sajedehpourhossein
زمان: ۱۶:۳۶:۲۰ - تاریخ: ۱۳۹۷/۱۲/۰۴
سلام و خسته نباشید.... من میخوام یک تکست باکس در صفحه وبم ایجاد کنم که هر عددی که کاربر توش وارد میکنه (در خود صفحه ی خروجی) با زدن دکمه ی ثبت در صفحه به همون اندازه عدد برام ردیف جدول بکشه.... ممنون میشم راهنماییم کنین
پاسخ: 
برای ساخت جدول با جاوا اسکریپت حالت های مختلفی متصور است به همین دلیل بهتر است متدهای مربوطه را از اصول مقدماتی فرا بگیرید تا ویرایش دلخواه مثال زیر ممکن باشد:
<script>
function makeTable(div, input) {
var table_div = document.getElementById(div);
var table_input = document.getElementById(input);
var table_value = table_input.value;

var table_tag = document.createElement('TABLE');
table_tag.border = '1';

var table_body = document.createElement('TBODY');
table_tag.appendChild(table_body);

for(var r = 1; r <= table_value; r++) {
var tr = document.createElement('TR');
table_body.appendChild(tr);

for(var d = 1; d <= table_value; d++) {
var td = document.createElement('TD');
td.width = '100';
td.appendChild(document.createTextNode("Cell " + r + "," + d));
tr.appendChild(td);
}
}

table_div.appendChild(table_tag);
}
</script>
<div id="div-test"></div>

<label for="input-test">Table Cells:</label>
<input id="input-test" type="text">

<input type="button" value="Make Table!" onclick="makeTable('div-test', 'input-test');">
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




6 × 2
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form adel
در:
سلام با تشکر از سایت خوب شما. یه سوال داشتم چگونه تمام این کدها را در جاوا اسکریپت همزمان قرار دهیم. من مثلا دستور این...
۲۱:۲۵:۴۰ ۱۳۹۸/۰۸/۲۴

form یه سوال کننده
در:
سلام. ببخشید چطور میشه ایمیل هایی رو میفرستن که ریپلای زدن رو ایمیلی که از طرف ما نبوده بیشتر تو تبلیغات دیدم امیدوارم منظورم و...
۰۳:۲۳:۰۸ ۱۳۹۸/۰۸/۲۴

form پرتو
در:
با عرض سلام و خسته نباشید امیدوارم حالتون خوب باشه من دو سه سال پیش وبلاگم رو حذف کردم ایا امکانش هست برگرده؟ ادرس...
۱۴:۵۵:۵۲ ۱۳۹۸/۰۸/۲۰

form علی
در:
سلام من نمی تونم html tag رو چطور در وبلاگم قرار بدم وبلاگم اینه
tagtak.blog.ir
۱۰:۲۳:۳۴ ۱۳۹۸/۰۸/۲۰

form حمید
در:
سلام. خسته نباشید. من میخاستم استایل فیلدهای فرمم رو تغییر بدم منتهی نمیدونم از چه کدهایی باید استفاده کنم. برای اینکه فرمی به شکل...
۱۰:۳۶:۱۹ ۱۳۹۸/۰۸/۱۹

form سمیه
در:
سلام ممنون بابت آموزش مفیدتون توی تگ ها هرچیزی که در تگ head قرار بگیره نمایش داده نمیشه، اما ممنون میشم...
۲۰:۴۹:۲۳ ۱۳۹۸/۰۸/۱۷

form استادمجازی
در:
سلام. از ادمین عزیز و همگی دعوت می کنم آموزش های خوبتون را بصورت آموزش ویدیویی یا صوتی و... در سایت ostadmajazi.com استادمجازی ...
۲۲:۱۲:۲۳ ۱۳۹۸/۰۸/۱۳

form mohamad
در:
سلام و خسته نباشید ، توی فرمی که ساختم چند تا drop down دارم که میخوام با php براشون شرط بذارم به طوری...
۱۳:۵۱:۳۴ ۱۳۹۸/۰۸/۱۰

form رضا
در:
خسته نباشید این جلسه آخر html بود؟؟؟؟
۰۱:۱۵:۰۷ ۱۳۹۸/۰۸/۱۰

form امیرمحمد
در:
سلام و خسته نباشید استاد بنده میخوام بین دو کد زیر که مشخص کردم رو به دست بیارم
// ---------------------set سلام...
۱۹:۳۰:۵۳ ۱۳۹۸/۰۸/۰۸

form حجت
در:
خیلی ممنونم از لطف شما. اوکی شد.
۱۰:۲۸:۳۵ ۱۳۹۸/۰۸/۰۶

form میلاد
در:
آشنایی نسبی با css, php و ajax دارم و نمیخام از library های موجود در نت استفاده کنم. خواستم با همین متد که انصافا روان...
۲۳:۲۲:۵۵ ۱۳۹۸/۰۸/۰۵

form عرفان
در:
با سلام. مدتی بود که بدلایل مشکلات زیاد نتونستم به وبلاگم رسیدگی کنم ولی وقتی برگشتم میبینم که هزاران بازدید داشتم و همشونم به زبان...
۲۲:۴۹:۴۴ ۱۳۹۸/۰۸/۰۵

form raha
در:
سلام وقتتون بخیر ببخشید علامت @ در کل به چه معناست ممنون میشم پاسخ دهید
۲۰:۱۲:۵۹ ۱۳۹۸/۰۸/۰۵

form میلاد
در:
باسلام تشکر از مطالب روان و پرکاربردتان. در خصوص آموزش مذکور، نحوه و ترفند نمایش محور عمودی در سمت چپ نمودار (مشابه...
۰۲:۳۸:۴۰ ۱۳۹۸/۰۸/۰۵