JavaScript HTML DOM - تغییر HTML
HTML DOM اجازه میدهد JavaScript محتوای عنصر HTML را تغییر دهد.
تغییر جریان خروجی HTML
JavaScript میتواند محتوای HTML دینامیک ایجاد کند:
در JavaScript،document.write()
برای نوشتن مستقیم به جریان خروجی HTML استفاده میشود:
مثال
<!DOCTYPE html> <html> <body> <script> document.write(Date()); </script> </body> </html>
هرگز پس از بارگذاری مستند از document.write()
. این کار محتوای مستند را پوشش میدهد.
تغییر محتوای HTML
سادهترین روش برای تغییر محتوای HTML مستند، استفاده از innerHTML
خصوصیت.
برای تغییر محتوای عنصر HTML، از این نحوه استفاده کنید:
document.getElementById(id).innerHTML = text جدید
این مثال مقدار <p>
محتوای عنصر:
مثال
<html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML = "hello kitty!"; </script> </body> </html>
توضیح مثال:
- HTML مستند بالا یک عنصر <p> با id="p1" دارد
- ما از HTML DOM برای دریافت این عنصر با id="p1" استفاده کردیم
- JavaScript محتوای این عنصر (innerHTML) را به "Hello Kitty!" تغییر میدهد
این مثال مقدار <h1>
محتوای عنصر:
مثال
<!DOCTYPE html> <html> <body> <h1 id="header">Old Header</h1> <script> var element = document.getElementById("header"); element.innerHTML = "New Header"; </script> </body> </html>
توضیح مثال:
- HTML بالا یک عنصر <h1> با id="header" دارد
- ما از HTML DOM برای دریافت عنصر با id="header" استفاده کردیم
- JavaScript محتوای این عنصر را (innerHTML) تغییر میدهد
تغییر مقدار ویژگی
برای تغییر مقدار ویژگی HTML از این نحو استفاده کنید:
document.getElementById(id).ویژگی = new value
این مثال مقدار <img>
عنصر src
مقدار ویژگی:
مثال
<!DOCTYPE html> <html> <body> <img id="myImage" src="smiley.gif"> <script> document.getElementById("myImage").src = "landscape.jpg"; </script> </body> </html>
توضیح مثال:
- سند HTML بالا شامل یک عنصر <img> با id="myImage" است
- ما از HTML DOM برای دریافت عنصر با id="myImage" استفاده میکنیم
- JavaScript این عنصر را از "smiley.gif" به "landscape.jpg" تغییر میدهد