JavaScript:HTML DOM در جاوااسکریپت - تغییر محتوای HTML

از ویکی کد
پرش به ناوبری پرش به جستجو
دورهٔ آموزشی جاوااسکریپت
Javascript.jpg
جاوااسکریپت
موارد آموزشی
۱آموزش جاوااسکریپت
۲مقدمه‌ای بر جاوااسکریپت
۳JavaScript:قوانین و اصول اولیه زبان جاوااسکریپت
۴JavaScript:خروجی جاوااسکریپت
۵JavaScript:عبارت‌ها در جاوااسکریپت
۶JavaScript:شیوهٔ نوشتن (Syntax) عبارات یا دستورات در جاوااسکریپت
۷JavaScript:نظرات یا کامنت‌ها (Comments) در جاوااسکریپت
۸JavaScript:متغیرها در جاوااسکریپت
۹JavaScript:عملگرهای جاوااسکریپت
۱۰JavaScript:عملگرهای ریاضی در جاوااسکریپت
۱۱JavaScript:عملگرهای مقداردهی در جاوااسکریپت
۱۲JavaScript:انواع داده‌ها در جاوااسکریپت
۱۳JavaScript:توابع در جاوااسکریپت
۱۴JavaScript:اشیاء (object) در جاوااسکریپت
۱۵JavaScript:رویدادها در جاوااسکریپت
۱۶JavaScript:رشته‌های متنی (string) در جاوااسکریپت
۱۷JavaScript:متدهای نوع داده متنی یا رشته‌ای در جاوااسکریپت
۱۸JavaScript:اعداد در جاوااسکریپت
۱۹JavaScript:متدهای داده‌های عددی در جاوااسکریپت
۲۰JavaScript:آرایه‌ها در جاوااسکریپت
۲۱JavaScript:متدهای آرایه در جاوااسکریپت
۲۲JavaScript:مرتب‌سازی آرایه‌ها در جاوااسکریپت
۲۳JavaScript:متدهای پیمایش آرایه در جاوااسکریپت
۲۴JavaScript:اشیاء تاریخ و زمان در جاوااسکریپت
۲۵JavaScript:فرمت‌های تاریخ و زمان در جاوااسکریپت
۲۶JavaScript:متدهای دریافت تاریخ و زمان در جاوااسکریپت
۲۷JavaScript:متدهای تنظیم زمان و تاریخ در جاوااسکریپت
۲۸JavaScript:شی ریاضی (Math) در جاوااسکریپت
۲۹JavaScript:ایجاد عدد تصادفی در جاوااسکریپت
۳۰JavaScript:مقادیر بولین (Booleans) در جاوااسکریپت
۳۱JavaScript:عملگرهای منطقی و مقایسه‌ای در جاوااسکریپت
۳۲JavaScript:ساختار if else و else if در جاوااسکریپت
۳۳JavaScript:تکه کد Switch در جاوا اسکریپت
۳۴JavaScript:حلقه For در جاوااسکریپت
۳۵JavaScript:حلقه While در جاوااسکریپت
۳۶JavaScript:کلمات کلیدی Break و Continue در جاوااسکریپت
۳۷JavaScript:تبدیل نوع داده‌ها در جاوااسکریپت
۳۸JavaScript:عملیات‌های بیتی در جاوااسکریپت
۳۹JavaScript:عبارات با قاعده در جاوااسکریپت
۴۰JavaScript:خطاها در جاوااسکریپت - رخ دادن خطا و رفع آن
۴۱JavaScript:Scope در جاوااسکریپت
۴۲JavaScript:Hoisting یا جا به جایی کدها در جاوااسکریپت
۴۳JavaScript:استفاده از مد یا حالت سخت‌گیرانه (use strict) در جاوااسکریپت
۴۴JavaScript:کلمه کلیدی This در جاوااسکریپت
۴۵JavaScript:کلمه کلیدی Let در جاوااسکریپت
۴۶JavaScript:ثابت‌ها در جاوااسکریپت
۴۷JavaScript:تعریف توابع به صورت پیکان
۴۸JavaScript:کلاس‌ها در جاوااسکریپت
۴۹JavaScript:اشکال‌زدایی در جاوااسکریپت
۵۰JavaScript:راهنمای استایل و استانداردهای کدنویسی در جاوااسکریپت
۵۱JavaScript:بهترین تمرینات جاوااسکریپت
۵۲JavaScript:اشتباهات رایج در برنامه‌نویسی جاوااسکریپت
۵۳JavaScript:کارایی در جاوااسکریپت
۵۴JavaScript:کلمات رزرو شده در جاوااسکریپت
۵۵JavaScript:ورژن‌های جاوااسکریپت
۵۶JavaScript:ECMAScript 5 - JavaScript 5
۵۷JavaScript:ECMAScript 6 - ECMAScript 2015
۵۸JavaScript:جیسون (JSON) در جاوااسکریپت
فرم‌ها
۱JavaScript:فرم‌ها در جاوااسکریپت
۲JavaScript:API ارزشیابی در جاوااسکریپت
اشیاء (Object)
۱JavaScript:اشیاء در جاوااسکریپت
۲JavaScript:ویژگی‌های اشیاء در جاوااسکریپت
۳JavaScript:متدهای اشیاء در جاوااسکریپت
۴JavaScript:روش‌های دسترسی به شیء در جاوااسکریپت
۵JavaScript:سازنده‌های شیء در جاوااسکریپت
۶JavaScript:شکل اصلی شیء در جاوااسکریپت
۷JavaScript:متدهای شیء در ورژن ES5 جاوااسکریپت
تابع
۱JavaScript:تعریف تابع در جاوااسکریپت
۲JavaScript:پارامتر توابع در جاوااسکریپت
۳JavaScript:فراخوانی تابع در جاوااسکریپت
۴JavaScript:صدا کردن تابع در جاوااسکریپت
۵JavaScript:تابع Apply در جاوااسکریپت
۶JavaScript:بسته‌ها (به انگلیسی: Closures) در جاوااسکریپت
HTML DOM
۱JavaScript:HTML DOM در جاوااسکریپت
۲JavaScript:متدهای HTML DOM در جاوااسکریپت
۳JavaScript:HTML DOM Document در جاوااسکریپت
۴JavaScript:عناصر HTML DOM در جاوااسکریپت
۵JavaScript:HTML DOM در جاوااسکریپت - تغییر محتوای HTML
۶JavaScript:DOM در جاوااسکریپت - تغییر CSS
۷JavaScript:انیمیشن در HTML DOM جاوااسکریپت
۸JavaScript:رویدادها در HTML DOM جاوااسکریپت
۹JavaScript:شنونده رویداد در HTML DOM جاوااسکریپت
۱۰JavaScript:پیمایش در HTML DOM جاوااسکریپت
۱۱JavaScript:عناصر (گره‌ها) HTML DOM در جاوااسکریپت
۱۲JavaScript:مجموعه‌های HTML DOM جاوااسکریپت
۱۳JavaScript:لیست گره‌ها در HTML DOM جاوااسکریپت
Browser BOM
۱JavaScript:پنجره جاوااسکریپت - مدل شیء مرورگر
۲JavaScript:پنجره صفحه نمایش در جاوااسکریپت
۳JavaScript:موقعیت پنجره در جاوااسکریپت
۴JavaScript:تاریخچه پنجره در جاوااسکریپت
۵JavaScript:ناوبری پنجره در جاوااسکریپت
۶JavaScript:جعبه پیغام جاوااسکریپت
۷JavaScript:رویدادهای زمان‌بندی شده در جاوااسکریپت
۸JavaScript:کوکی‌های جاوااسکریپت
AJAX
۱JavaScript:مقدمه‌ای بر AJAX
۲JavaScript:AJAX - شیء XMLHttpRequest
۳JavaScript:AJAX - ارسال یک درخواست به سرور
۴JavaScript:AJAX - پاسخ سرور
۵JavaScript:مثال‌های XML در AJAX
۶JavaScript:مثال‌های PHP در AJAX
۷JavaScript:مثال‌های ASP در AJAX
۸JavaScript:مثال پایگاه داده در AJAX
۹JavaScript:نرم‌افزارهای XML
۱۰JavaScript:مثال‌های AJAX
JSON
۱JavaScript:مقدمه‌ای بر JSON
۲JavaScript:شیوهٔ نوشتار JSON
۳JavaScript:JSON در برابر XML
۴JavaScript:انواع داده‌های مجاز در JSON
۵متد JSON.parse()
۶متد JSON.stringify()
۷JavaScript:اشیاء JSON
۸JavaScript:آرایه‌ها در JSON
۹JavaScript:PHP در JSON
۱۰JavaScript:HTML در JSON
۱۱JavaScript:JSONP
jQuery
۱JavaScript:جاوااسکریپت / انتخابگرهای DOM جی‌کوئری
۲JavaScript:جاوااسکریپت / عناصر HTML جی‌کوئری
۳JavaScript:جاوااسکریپت / استایل‌های CSS در جی‌کوئری
۴JavaScript:جاوااسکریپت / HTML DOM در جی‌کوئری

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

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

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

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

مثال

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>


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

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

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

document.getElementById(id).innerHTML = new HTML

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

مثال

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>

توضیح مثال:

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

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

مثال

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
var element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

</body>
</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>را تغییر می‌دهد:

مثال

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>

توضیح مثال:

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

منابع آموزشی