HTML DOM - تغییر محتوای HTML

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
تعریف شیء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
۱معرفی DOM
۲متدهای DOM
۳اسناد DOM
۴عناصر HTML DOM
۵DOM HTML
۶DOM CSS
۷انیمیشن DOM
۸رویدادها در DOM
۹شنوندهٔ رویداد در DOM
۱۰پیمایش در DOM
۱۱عناصر HTML DOM (گره‌ها)
۱۲مجموعه‌های DOM
۱۳لیست گره‌ها در DOM
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

HTML DOM این اجازه را به جاوا اسکریپت می‌دهد که محتوی عناصر HTML ای را تغییر دهد. [۱]

تغییر جریان خروجی HTML

جاوا اسکریپت می‌تواند محتوای HTML پویا تولید کند:

در جاوا اسکریپت، از متد document.write() می‌توان برای نوشتن متن به صورت مستقیم در جریان خروجی HTML استفاده کرد:

مثال

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <script>
 6 document.write(Date());
 7 </script>
 8 
 9 </body>
10 </html>


مشاهدهٔ نتیجه


هرگز از متد document.write() بعد از بارگذاری سند استفاده نکنید. این امر موجب بازنویسی سند می‌شود.

تغییر محتوای HTML

راحت‌ترین راه برای تغییر محتوای یک عنصر HTML استفاده از ویژگی innerHTML است.

برای تغییر محتوای یک عنصر HTML، از شیوه نوشتار (به انگلیسی: syntax) زیر استفاده کنید:

document.getElementById(id).innerHTML = new HTML

این مثال محتوای عنصر <p> را تغییر می‌دهد:

مثال

 1 <html>
 2 <body>
 3 
 4 <p id="p1">Hello World!</p>
 5 
 6 <script>
 7 document.getElementById("p1").innerHTML = "New text!";
 8 </script>
 9 
10 </body>
11 </html>


مشاهدهٔ نتیجه


توضیح مثال:

  • سند HTML فوق، یک عنصر <p> با id برابر با "p1" دارد. (id="p1")
  • ما از HTML DOM برای دریافت عنصری با id برابر با "p1" استفاده می‌کنیم. (id="p1")
  • جاوا اسکریپت محتوای (ویژگی innerHTML) عنصر را به متن "New text!" تغییر می‌دهد

این مثال محتوای عنصر <h1> را تغییر می‌دهد:

مثال

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <h1 id="id01">Old Heading</h1>
 6 
 7 <script>
 8 var element = document.getElementById("id01");
 9 element.innerHTML = "New Heading";
10 </script>
11 
12 </body>
13 </html>


مشاهدهٔ نتیجه


توضیح مثال:

  • سند HTML بالا یک عنصر <h1> با id برابر با "id01" دارد. (id="id01")
  • ما از HTML DOM برای دریافت عنصری با id برابر با "id01" استفاده می‌کنیم. (id="id01")
  • جاوا اسکریپت محتوا (ویژگی innerHTML) آن کنترل را به متن "New Heading" تغییر می‌دهد

تغییر محتوای یک خاصیت (به انگلیسی: Attribute)

برای تغییر محتوای یک خاصیت HTML از شیوه نوشتار (به انگلیسی: syntax) زیر استفاده کنید:

document.getElementById(id).attribute = new value

این مثال مقدار خاصیت src از یک عنصر <img> را تغییر می‌دهد:

مثال

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <img id="myImage" src="smiley.gif">
 6 
 7 <script>
 8 document.getElementById("myImage").src = "landscape.jpg";
 9 </script>
10 
11 </body>
12 </html>


مشاهدهٔ نتیجه


توضیح مثال:

  • سند HTML بالا یک عنصر <img> با id برابر با "myImage" دارد (id="myImage")
  • ما از HTML dom برای دریافت عنصری با id برابر با "myImage" استفاده می‌کنیم. id="myImage"
  • جاوا اسکریپت مقدار خاصیت src از آن عنصر را از مقدار "smiley.gif" به "landscape.jpg" تغییر می‌دهد

تمرینات جاوا اسکریپت

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.



منابع آموزشی