HTML DOM ﺮﺻﺎﻨﻋ ﯼﺍﻮﺘﺤﻣ ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟﺍ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﻪﺑ HTML ﺪﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ.
.ﺖﺳﺍ innerHTML
ﯽﮔﮋﯾﻭ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ HTML ﺮﺼﻨﻋ ﮏﯾ ﯼﺍﻮﺘ
:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻮﺤﻧ ﻦﯾﺍ ﺯﺍ ،HTML ﺮﺼﻨﻋ ﮏﯾ ﯼﺍﻮﺘﺤﻣ ﺮﯿﯿﻐﺗ ﯼﺍﺮﺑ
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>
→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript can Change HTML</h2>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
:ﻩﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﻝﺎﺜﻣ
.ﺖﺳﺍ id="p1"
ﺎﺑ <p>
.ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ id="p1"
ﺎﺑ ﺮﺼﻨﻋ ﺖﻓﺎﯾﺭﺩ ﯼﺍﺮﺑ HTML DO
.ﺪﻫﺩ ﯽﻣ ﺮﯿﯿﻐﺗ "ﺪﯾﺪﺟ" ﻪﺑ ﺍﺭ ﺮﺼﻨﻋ ﻥﺁ (innerHTML
) ﯼﺍﻮﺘﺤ
:ﺪﻫﺩﯽﻣ ﺮﯿﯿﻐﺗ ﺍﺭ <h1>
ﺮﺼﻨﻋ ﯼﺍﻮﺘﺤﻣ ﻝﺎﺜﻣ ﻦﯾﺍ
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
<p>JavaScript changed "Old Heading" to "New Heading".</p>
</body>
</html>
:ﻩﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﻝﺎﺜﻣ
.ﺖﺳﺍ id="id01"
ﺎﺑ <h1>
.ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ id="id01"
ﺎﺑ ﺮﺼﻨﻋ ﺖﻓﺎﯾﺭﺩ ﯼﺍﺮﺑ HTML
.ﺪﻫﺩ ﯽﻣ ﺮﯿﯿﻐﺗ "ﺪﯾﺪﺟ" ﻪﺑ ﺍﺭ ﺮﺼﻨﻋ ﻥﺁ (innerHTML
) ﯼﺍﻮﺘﺤ
:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻮﺤﻧ ﻦﯾﺍ ﺯﺍ ،HTML ﯽﮔﮋﯾﻭ ﮏﯾ ﺭﺍﺪﻘﻣ ﺮﯿﯿﻐﺗ ﯼﺍﺮﺑ
document.getElementById(id).attribute = new value
:ﺪﻫﺩﯽﻣ ﺮﯿﯿﻐﺗ ﺍﺭ <img>
ﺮﺼﻨﻋ src ﯽﮔﮋﯾﻭ ﺭﺍﺪﻘﻣ ﻝﺎﺜﻣ
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src = "landscape.jpg";
</script>
<p>The original image was smiley.gif, but the script changed it to landscape.jpg</p>
</body>
</html>
:ﻩﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﻝﺎﺜﻣ
.ﺖﺳﺍ id="myImage"
ﺎﺑ <img>
.ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ id="myImage"
ﺎﺑ ﺮﺼﻨﻋ ﺖﻓﺎﯾﺭﺩ ﯼﺍﺮﺑ HT
.ﺪﻫﺩ ﯽﻣ ﺮﯿﯿﻐﺗ "landscape.jpg" ﻪﺑ "smiley.gif" ﺯﺍ ﺍﺭ ﺮﺼﻨﻋ ﻥﺁ
:ﺪﻨﮐ ﺩﺎﺠﯾﺍ ﺎﯾﻮﭘ HTML ﯼﺍﻮﺘﺤﻣ ﺪﻧﺍﻮﺗ ﯽﻣ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
.ﺩﻮﺷ ﻩﺩﺎﻔﺘﺳﺍ HTML ﺭﺩ ﻢﯿﻘﺘﺴﻣ ﻦﺘﺷﻮﻧ ﯼﺍﺮﺑ ﺪﻧﺍﻮﺗ ﯽﻣ document.wr
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<body>
<p>Bla, bla, bla</p>
<script>
document.write(Date());
</script>
<p>Bla, bla, bla</p>
</body>
</html>
ﺪﺷ ﺪﻫﺍﻮﺧ .ﺪﯿﻨﮑﻧ ﻩﺩﺎﻔﺘﺳﺍ document.write()
ﺯﺍ ﺪﻨﺳ ﯼﺮﯿﮔ