JavaScript HTML DOM - HTML Değiştirme

HTML DOM, JavaScript'in HTML öğelerinin içeriğini değiştirmesine izin verir.

HTML çıktı akışını değiştirmek

JavaScript, dinamik HTML içeriği oluşturabilir:

JavaScript'te,document.write() Doğrudan HTML çıktı akışına yazmak için kullanılabilir:

Örnek

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

Kişisel Deneyimleyin

Belge yüklenmeden sonra kesinlikle kullanmayın document.write()Bu, belgeyi kapsamlı şekilde geçersiz kılar.

HTML içeriğini değiştirmek

HTML belgesi içeriğini değiştirmek en basit yöntem innerHTML Özellik.

HTML öğesinin içeriğini değiştirmek için bu grameri kullanın:

document.getElementById(id).innerHTML = new text

Bu örnekte <p> Öğenin içeriği：

Örnek

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
</body>
</html>

Kişisel Deneyimleyin

Örnek Açıklaması:

  • Yukarıdaki HTML belgesi, id="p1" olan <p> öğesini içerir
  • id="p1" olan bu öğeyi HTML DOM kullanarak elde ettik
  • JavaScript, bu öğenin içeriğini (innerHTML) "Hello Kitty!" olarak değiştirir

Bu örnekte <h1> Öğenin içeriği：

Örnek

<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>

Kişisel Deneyimleyin

Örnek Açıklaması:

  • Yukarıdaki HTML, id="header" olan bir <h1> öğesi içerir
  • HTML DOM kullanarak id="header" olan öğeyi elde ettik
  • JavaScript bu elementin içeriğini (innerHTML) değiştirir

Öznitelik Değerini Değiştirme

HTML özelliklerinin değerlerini değiştirmek için aşağıdaki dilbilgisi kullanılır:

document.getElementById(id).öznitelik = yeni değer

Bu örnekte <img> Özelliği src Değer:

Örnek

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>

Kişisel Deneyimleyin

Örnek Açıklaması:

  • Yukarıdaki HTML belgesi id="myImage" olan bir <img> elementi içerir
  • id="myImage" olan elementi HTML DOM kullanarak elde ederiz
  • JavaScript bu elementin src özelliğini "smiley.gif" den "landscape.jpg" e değiştirir