JavaÖrnekli Script DOM Eğitimi

By: James Hartman James Hartman
Hours Güncellenmiş

DOM nedir? JavaSenaryo?

JavaScript, Document Object Model (DOM) kullanarak bir web sayfasındaki tüm öğelere erişebilir. Aslında, web tarayıcısı sayfa yüklendiğinde web sayfasının bir DOM'unu oluşturur. DOM modeli, şu şekilde bir nesne ağacı olarak oluşturulur:

DOM girişi JavaSenaryo

DOM ve Etkinlikler nasıl kullanılır?

DOM'u kullanma, JavaScript birden fazla görevi gerçekleştirebilir. Yeni öğeler ve nitelikler oluşturabilir, mevcut öğeleri ve nitelikleri değiştirebilir ve hatta mevcut öğeleri ve nitelikleri kaldırabilir. JavaSenaryo ayrıca mevcut olaylara tepki verebilir ve sayfada yeni olaylar oluşturabilir.

getElementById, innerHTML Örneği

  1. getElementById: Kimliği ayarlanmış öğelere ve niteliklere erişmek için.
  2. innerHTML: Bir öğenin içeriğine erişmek için.

Bu Örneği kendiniz deneyin:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1 id="one">Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p>This is the technology section.</p>
  <script type="text/javascript">
		var text = document.getElementById("one").innerHTML;
		alert("The first heading is " + text);
  </script>
</body>
</html>

getElementsByTagName Örnek

getElementsByTagName: Etiket adını kullanarak öğelere ve niteliklere erişmek için. Bu yöntem bir döndürecektir dizi aynı etiket adına sahip tüm öğelerin.

Bu Örneği kendiniz deneyin:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p id="second">This is the technology section.</p>
  <script type="text/javascript">
	var paragraphs = document.getElementsByTagName("p");
    alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
    document.getElementById("second").innerHTML = "The orginal message is changed.";
  </script>
</body>
</html>

Olay işleyicisi Örnek

  1. createElement: Yeni eleman oluşturmak için
  2. RemoveChild: Bir öğeyi kaldırır
  3. bir ekleyebilirsiniz olay işleyicisi bunun gibi belirli bir öğeye:
document.getElementById(id).onclick=function()
{
    lines of code to be executed
}

OR

document.getElementById(id).addEventListener("click", functionname)

Bu Örneği kendiniz deneyin:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <input type="button" id="btnClick" value="Click Me!!" />
  <script type="text/javascript">
	document.getElementById("btnClick").addEventListener("click", clicked);
    function clicked()
    {
   		 alert("You clicked me!!!");
    }	
  </script>
</body>
</html>

Beğenebilirsin: