DOM HTML ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ


فهرست مطالب

    نمایش فهرست مطالب


HTML DOM ﺮﺻﺎﻨﻋ ﯼﺍﻮﺘﺤﻣ ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟﺍ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﻪﺑ HTML ﺪﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ.


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 ﺎﯾﻮﭘ ﯼﺍﻮﺘﺤﻣ

:ﺪﻨﮐ ﺩﺎﺠﯾﺍ ﺎﯾﻮﭘ 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> 

document.write()

.ﺩﻮﺷ ﻩﺩﺎﻔﺘﺳﺍ 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() ﺯﺍ ﺪﻨﺳ ﯼﺮﯿﮔ



تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024