Merhaba, DOM (Document Object Model), HTML, XML gibi belgeler ile diğer programlama veya script dilleri arasında iletişim sağlayan bir arabirimdir. 

HTML’de bulunan her öğenin DOM tarafında bir karşılığı bulunur. Sayfanın tamamına veya belirli bir kontrole erişmek mümkündür.

Ana öğeler – çocuk öğeler gibi hiyerarşik yapıya aşinayız. Bir HTML belgesinde ana kök <html></html>etiketleridir. Peşinden <head></head>ve <body></body>etiketleri gelir ve bunlar <html>’in çocuklarıdır. (child element) <title></title>etiketi <head> etiketinin çocuğu, <html> etiketininse torunudur. Veya <body> içerisinde kullanacağımız bir <h1></h1>veya <p></p>etiketleri de <body> etiketinin çocuğu ve yine <html> etiketinin torunlarıdır.

Document Özellikleri

Document nesnesi, web sayfanızı temsil eder ve sayfanızdaki diğer tüm nesnelerin sahibidir. HTML sayfasındaki herhangi bir öğeye erişmek istiyorsanız, her zaman document nesnesine erişmeyle başlamanız gerekir. Örnek kullanım:

write Özelliği

Sayfa içeriğini değiştirelim:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<h1>Merhaba!</h1>

<button type="button" onclick="icerigidegistir()">
Sayfa İçeriğini Değiştir
</button>

<script>
function icerigidegistir() {
document.write("<h1>Merhaba Dünya!</h1><p>Bu İçerik artık değişti.</p>");
}
</script>
</body>
</html>
 

Çok küçük bir fonksiyon ile düğmeye tıklayınca sayfa içeriğini tamamen değiştirmesini söyledik. Burada doğrudan document’e etki ettiğimiz için sayfa içeriğimiz ve sayfamızda bulunan tüm öğeler tamamen değişti.

body Özelliği

Bu özelliği kullanarak <body> öğesi içerisindeki tüm öğelere ulaşabilir ve alt özellikler ile müdahalelerde bulunabiliriz.

innerHTML Özelliği

Bu özelliği kullanarak tüm body içeriğini veya belirli bir öğenin içeriğini değiştirebiliriz.

<!DOCTYPE html>
<html>
<body>

<p onclick="degistir()">Buraya tıkla ve içeriği değiştir.</p>

<script>
function degistir() {
  document.body.innerHTML = "Tüm body içeriği değişti.";
}
</script>

</body>
</html>

Örneğimizde doğrudan <body> öğesinin içeriğini değiştirmek için bir document.body.innerHTML kullandık. Bu sebeple başlangıçta <p> </p> etiketleri arasında olan içeriğimiz değiştiğinde <p></p> etiketleri de tamamen kalkarak değişti. Çünkü scripte <body> içerisindeki her şeyi sil yerine ‘Tüm body içeriği değişti yaz.’ dedik. Eğer .body özelliği yerine farklı bir özellik kullansaydık, innerHTML ile sadece seçtiğimiz öğenin içeriği değişirdi.

id Özelliği

Belirli bir etiketimize bir ID tanımlamak için kullanırız. Bu ID değerini daha sonra kullanmamız mümkün olur. Biz burada body içerisinde bir ID tanımlaması yapacağız.

document.body.id = 'test';

Scriptimize sadece bu tanımlamayı yaparak otomatik olarak <body> etiketimize ‘test’ ID’si tanımlamış olduk.

firstChild , firstElementChild , lastChild , lastElementChild Özelliği

Bu özelliği .body ile kullanarak <body> öğemizin ilk alt (çocuk/child) öğesini seçmiş oluruz.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
<p>Örnek Liste:</p>
<ul>
<li>Kahve</li>
<li>Çay</li>
</ul>
<p>Değiştir düğmesine basarak body öğemizin ilk child öğesi olan 'Örnek Liste:' paragraf öğemizi değiştireceğiz.</p>

<button onclick="fonksiyonum()">Değiştir</button>

<script>
function fonksiyonum() {
  document.body.firstElementChild.innerHTML = "<h1>Alışveriş Listesi</h1>";
}
</script>
</body>
</html>

firstElementChild ve firstChild arasındaki fark, firstChild öğesinin ilk alt düğümü bir öğe düğümü, bir metin düğümü veya bir yorum düğümü olarak döndürmesidir. firstElementChild ilk alt düğümü bir öğe düğümü olarak döndürür (boşluk, metin ve yorumları yok sayar).

lastChild ve lastElementChild özellikleri de benzer şekilde çalışır fakat son öğeyi hedefler.

nodeName ve tagName Özellikleri

Bu iki özellik hedeflenen öğenin etiket ismini verir. İkisi arasındaki fark tagName doğrudan etiket ismini verirken nodeName ile etiket ismi, özelliği, içeriği, yorumları da verir.

alert(document.body.nodeName);

childNodes Özelliği

Bu özellik öğenin alt öğelerini (child elements) verir.

<!DOCTYPE html>
<html>
<body><!-- Bu bir yorum (comment) satırıdır! -->

<p>Düğmeye tıklayarak body öğesinin bütün child öğelerini görebilirsiniz.</p>

<button onclick="fonksiyonum()">Düğme</button>

<p><strong>Not:</strong> Öğelerin arasındaki boşluklar birer metin (text) olarak kabul edilir. Ve metinleri de bir öğe olarak kabul eder.</p>

<p id="test"></p>

<script>
function fonksiyonum() {
  var c = document.body.childNodes;
  var txt = "";
  var i;
  for (i = 0; i < c.length; i++) {
    txt = txt + c[i].nodeName + "<br>";
  }

  document.getElementById("test").innerHTML = txt;
}
</script>

</body>
</html>

childElementCount Özelliği

Bu özellik öğenin kaç tane alt öğesi (child element) olduğunu gösterir. Yalnızca etiketleri sayar.

<!DOCTYPE html>
<html>
<body><!-- Bu bir yorum (comment) satırıdır! -->

<p>Düğmeye tıklayarak body öğesinin bütün child öğelerini görebilirsiniz.</p>

<button onclick="fonksiyonum()">Düğme</button>

<p><strong>Not:</strong> Öğelerin arasındaki boşluklar birer metin (text) olarak kabul edilir. Ve metinleri de bir öğe olarak kabul eder.</p>

<p id="test"></p>

<script>
function fonksiyonum() {
  var txt = document.body.childElementCount;
  document.getElementById("test").innerHTML = txt;
}
</script>

</body>
</html>

hasChildNodes Özelliği

Öğenin alt öğelerinin olup olmadığını kontrol eder. Eğer alt öğeye sahipse ‘true’ değilse ‘false’ değerini döndürür.

<!DOCTYPE html>
<html>
<body><!-- Bu bir yorum (comment) satırıdır! -->

<p>Düğmeye tıklayarak body öğesinin bütün child öğelerini görebilirsiniz.</p>

<button onclick="fonksiyonum()">Düğme</button>

<p><strong>Not:</strong> Öğelerin arasındaki boşluklar birer metin (text) olarak kabul edilir. Ve metinleri de bir öğe olarak kabul eder.</p>

<p id="test"></p>

<script>
function fonksiyonum() {
  var txt = document.body.hasChildNodes();
  document.getElementById("test").innerHTML = txt;
}
</script>

</body>
</html>

hasAttribute(‘ozellik’) ve hasAttributes Özellikleri

hasAttributes öğenin herhangi bir özellik içerip içermediğini kontrol eder, hasAttribute(‘ozellik’) ise belirli bir özelliğin varlığını kontrol eder.

<!DOCTYPE html>
<html>
<body id="deneme"><!-- Bu bir yorum (comment) satırıdır! -->

<p>Düğmeye tıklayarak body öğesinin bütün child öğelerini görebilirsiniz.</p>

<button onclick="fonksiyonum()">Düğme</button>

<p><strong>Not:</strong> Öğelerin arasındaki boşluklar birer metin (text) olarak kabul edilir. Ve metinleri de bir öğe olarak kabul eder.</p>

<p id="test"></p>
<p id="test2"></p>

<script>
function fonksiyonum() {
  var txt = document.body.hasAttributes();
  document.getElementById("test").innerHTML = txt;
  var txt2 = document.body.hasAttribute('class');
  document.getElementById("test2").innerHTML = txt2;
}
</script>

</body>
</html>

Burada <body> öğesine yalnızca ID özelliği verdik. Scriptimizdeki ilk sorduğumuz hasAttributes() <body> etiketimiz bir özelliğe (ID) sahip olduğu için true döndü. Ancak ikinci sorduğumuz hasAttribute(‘class’) <body> etiketimiz bir class özelliğine sahip olmadığı için false döndü.

className Özelliği

Bu özelliği 2 şekilde kullanmak mümkün. Bu özelliği kullanarak bir öğeye class tanımlayabilirsiniz veya bir öğenin sahip olduğu class ismini öğrenebilirsiniz.

<!DOCTYPE html>
<html>
<head>
<style>
.stilim {
  width: 300px;
  background-color: rebeccapurple;
  text-align: center;
  font-size: 25px;
  color: white;
}
</style>
</head>
<body>

<p>Click the button to set a class for div.</p>

<div id="test">
I am a DIV element
</div>

<button onclick="stilata()">Stil Ata</button>
<button onclick="stiladver()">Stil Adını Ver</button>

<script>
function stilata() {
  document.getElementById("test").className = "stilim";
}

function stiladver() {
  var x = document.getElementById("test").className;
  alert(x);
}
</script>

</body>
</html>

getElementsByTagName ve getElementsByClassName Özellikleri

Öğeleri etiket isimleriyle almak için getElementsByTagName , class isimleriyle almak için getElementsByClassName kullanırız.

<!DOCTYPE html>
<html>
<body>

<ul class="liste">
  <li>Kahve</li>
  <li>Çay</li>
</ul>

<p>İlk liste öğesini değiştirmek için düğmeye tıklayın.</p>

<button onclick="fonksiyonum()">Tıkla</button>

<script>
function fonksiyonum() {
  var list = document.getElementsByClassName("liste")[0];
  list.getElementsByTagName("LI")[0].innerHTML = "Süt";
}
</script>

</body>
</html>

Bu örnekte ikisini birden kullandık. ‘liste’ classına sahip ilk öğeyi seçmek için getElementsByClassName(‘liste’)[0] kullandık. sonra listenin altındaki <li> etiketine sahip ilk öğeyi seçmek için getElementsByTagName(‘li’)[0] kullandık.

insertBefore Özelliği

Bir öğeyi belirli başka bir öğenin öncesine eklemek için kullanırız. Bu özelliği örneklerken createElement , createTextNode , appendChild , getElementById özelliklerini de kullanarak detaylı bir örnekleme yapacağız.

  • createElement(‘etiket’): Bir etiket oluşturmak için kullanırız.
  • createTextNode(‘metin’): Metin içeriği oluşturmak için kullanırız.
  • appendChild: Oluşturduğumuz öğeyi eklemek için kullanırız.
  • getElementById: Belirli bir öğeyi ID değeriyle seçmek için kullanırız.
<!DOCTYPE html>
<html>
<body>

<ul id="listem">
  <li>Kahve</li>
  <li>Çay</li>
</ul>

<p>Listeye bir öğe eklemek için düğmeye tıklayın.</p>

<button onclick="fonksiyonum()">Tıklayın</button>

<script>
function fonksiyonum() {
  var yeniOge = document.createElement("LI");
  var textnode = document.createTextNode("Süt");
  yeniOge.appendChild(textnode);

  var liste = document.getElementById("listem");
  liste.insertBefore(yeniOge, liste.childNodes[0]);
}
</script>

</body>
</html>

Örneği inceleyecek olursak;  Öncelikle createElement ile bir <li> etiketi oluşturduk. Daha sonra createTextNode ile içeriği ‘Süt’ olan bir metin oluşturduk. Ardından appendChild kullanarak ‘Süt’ metnini <li> etiketinin içine yerleştirdik. Daha sonra listemizi ID’sini seçerek getElementById kullanarak seçtik. Ve son olarak insertBefore kullanarak listenin ilk öğesinden önce (liste.childNodes[0]) olacak şekilde yeni öğemizi ekledik.

getAttributeNode Özelliği

Bir öğenin sahip olduğu özelliklere erişmek veya müdahale etmek için bu özelliği kullanırız. 

<!DOCTYPE html>
<html>
<head>
<style>
.renkata {
  color: red;
}
.ikincirenk {
  color: green;
}
</style>
</head>
<body>

<h1 class="renkata">Merhaba</h1>

<p>h1 öğesinin class özelliğinin değerini almak için düğmeye tıklayın.</p>

<button onclick="fonksiyonum()">Değeri Gör</button>

<p id="test"></p>

<p>h1 öğesinin class özelliğinin değerini değiştirmek için düğmeye tıklayın.</p>

<button onclick="fonksiyonum2()">Değeri Değiştir</button>



<script>
function fonksiyonum() {
  var elmnt = document.getElementsByTagName("H1")[0];
  var attr = elmnt.getAttributeNode("class").value;
  document.getElementById("test").innerHTML = attr;
}

function fonksiyonum2() {
  var elmnt = document.getElementsByTagName("H1")[0];
  elmnt.getAttributeNode("class").value = "ikincirenk";
}
</script>

</body>
</html>

removeChild Özelliği

Bu özellik bir öğenin alt öğelerinden istenilen bir tanesini kaldırmak için kullanılır.

<!DOCTYPE html>
<html>
<body>

<ul id="listem"><li>Kahve</li><li>Çay</li><li>Süt</li></ul>

<p>Listedeki ilk öğeyi kaldırmak için düğmeye tıklayın.</p>

<button onclick="myFunction()">Kaldır</button>

<script>
function myFunction() {
  var liste = document.getElementById("listem");
  liste.removeChild(liste.childNodes[0]);
}
</script>

</body>
</html>

Liste öğelerini örnekte özellikle boşluksuz yazdık. Çünkü removeChild boşlukları da bir öğe kabul eder ve örneğimizde boşluk bıraksaydık düğmeye ilk tıkladığımızda boşluğu kaldırmış olurdu. Bir öğeyi silmek için aynı zamanda kaldıracağımız öğeyi seçip remove() özelliğini de kullanabiliriz.

style Özelliği

Bu özellik öğenin stil özelliklerine müdahale etmek için kullanılır ve içerisinde bir çok alt özellik barındırır. 

<!DOCTYPE html>
<html>
<body>

<h1 id="basligim">Başlığın Rengini Değiştirelim</h1>

<p>Başlığın rengini kırmızı yapmak için düğmeye tıklayın.</p>

<button onclick="fonksiyonum()">Tıkla</button>

<script>
function fonksiyonum() {
  document.getElementById("basligim").style.color = "red";
}
</script>

</body>
</html>

Bu örnekte style.color özelliğini kullandık. Diğer CSS özelliklerini de özellik ismiyle birlikte JavaScript’te style özelliği kullanarak ekleyebilirsiniz. CSS Özellikleri