javaScript DOM'da GEZİNME

HTML DOM ile, düğüm ağacındaki tüm düğümlere JavaScript ile erişilebilir. Yeni düğümler oluşturulabilir ve tüm düğümler değiştirilebilir veya silinebilir.

Düğüm İlişkileri

Düğüm ağacındaki düğümler birbirleriyle hiyerarşik bir ilişki içeriyor.

İlişkileri tanımlamak için ebeveyn, çocuk ve kardeş terimleri kullanılır.

• Bir düğüm ağacında, üst düğüme kök düğüm denir.
• Her düğümün kökünün dışında tam olarak bir üst öğesi vardır.
• Bir düğüm birkaç çocuk sahibi olabilir.
• Kardeşler aynı ebeveynin düğümleridir.

JavaScript ile düğümler arasında gezinmek için aşağıdaki düğüm özelliklerini kullanabilirsiniz:

• parentNode
• ChildNodes [ nodenumber ]
• firstChild
• lastChild
• nextSibling
• previousSibling

DOM öğelerle ve içerikleriyle her şeyi yapmaya izin verir, ancak önce ilgili DOM nesnesine erişip bir değişkene atamamız gerekir ve daha sonra bunu değiştirebiliriz.

DOM üzerindeki tüm işlemler document nesneyle başlar. Oradan herhangi bir düğüme erişebiliriz.

DOM düğümleri arasında gezinmeyi sağlayan bağlantıların örnek bir şeması.

JavaScript'deki düğümleri anlamak için bir örnek verelim.

ÖRNEK:

<p>Bu jsdom'dur </p>

Yukarıdaki örnekte iki düğüm, "P" ve bir metin düğümü vardır. Her iki düğümün birleşimi bir paragrafı temsil eder. Daha iyi anlamak için başka bir kod örneği verelim.

<p>Bu <b>jsdom</b> </p>

Yukarıdaki kod parçası, bir üst düğüm "P" ve iki alt düğüm (metin ve B düğümü) oluşturdu. "B" düğümü ayrıca bir alt düğüm (metin) içerir.

Aşağıdaki şekil, bir önceki kod parçasının elemanlarının ağaç biçiminde nasıl temsil edilebileceğini göstermektedir.

parentNode Özellik :

ParentNode özelliği, belirtilen düğümün üst düğümünü bir Düğüm nesnesi olarak döndürür.

Not : HTML'de doküman HTML öğesinin üst düğümüdür, HEAD ve BODY, HTML öğesinin alt düğümleridir.

Sözdizimi :

node.parentNode

ÖRNEK :

HTML :

<div >

  <p id="test">javascript Dersi</p>
  
</div>

javaScript :

  var x = document.querySelector('#test');
  
  var ad = x.parentNode.nodeName;
  
  alert(ad); //ÇIKTI : DIV

childNodes Özellik :

ChildNodes özelliği, bir düğümün alt düğümlerinin bir koleksiyonunu bir NodeList nesnesi olarak döndürür. Koleksiyondaki düğümler, kaynak kod'da göründükleri gibi sıralanır ve dizin numaraları ile erişilebilir. Endeks 0'dan başlar.

Not : Elemanlardaki boşluk metin olarak kabul edilir ve metin düğüm olarak kabul edilir. Yorumlar da düğüm olarak kabul edilir.

İpucu : Alt düğümlerin sayısını belirlemek için NodeList nesnesinin length özelliğini kullanabilirsiniz , ardından tüm alt düğümlerde dolaşır ve istediğiniz bilgiyi elde edebilirsiniz.

İpucu : Bir düğümün öğe düğümlerinin (metin ve yorum düğümleri hariç) bir koleksiyonunu döndürmek için, children özelliğini kullanın.

İpucu : element.childNodes[0], firstChild özelliği ile aynı sonucu üretecektir.

Sözdizimi :

element.childNodes

ÖRNEK :

HTML :

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

javaScript :

var x= document.querySelector("#test").childNodes[0];

alert(x.textContent); //ÇIKTI: javascript dersi

javaScript :

var x= document.querySelector("#test").childNodes.length;

alert(x); //ÇIKTI :1

firstChild yöntemi

FirstChild özelliği, belirtilen düğümün ilk alt düğümünü bir Düğüm nesnesi olarak döndürür.

FirstElementChild , ilk alt düğümü bir öğe düğümü olarak döndürürken, firstChild ilk öğe düğümü, metin düğümü veya yorum düğümü olarak ilk alt düğümü döndürdüğü , firstElementChild ise metin ve yorum düğümleri yok sayar bu iki elementin asındaki farktır.

Not : Elemanlardaki boşluk metin olarak kabul edilir ve metin düğümü olarak kabul edilir.

İpucu: Belirtilen bir düğümün herhangi bir alt düğümünü döndürmek için element.childNodes özelliğini kullanın. ChildNodes[0], firstChild ile aynı sonuca neden olacaktır.

Sözdizimi :

node.firstChild

ÖRNEK :

HTML :

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

javaScript :

var x= document.querySelector("#test").firstChild.nodeName;

alert(x);//ÇIKTI:#text

Yukarıdaki örnekte ilk düğüm metindir, bunuda "#text" diye okudu.

lastChild Özellik

LastChild özelliği, belirtilen düğümün son alt düğümünü bir Düğüm nesnesi olarak döndürür.

LastElementChild, son öğe düğümü olarak son çocuk düğümünü döndürürken (metni yok sayar) lastChild, son nesne düğümünü, bir metin düğümünü veya bir yorum düğümünü döndürdüğünü görürüz. Bu özellikler iki element arasındaki farktır.

Not : Elemanlardaki boşluk metin olarak kabul edilir ve metin düğüm olarak kabul edilir.

ÖRNEK :

HTML :

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

javaScript :

var x= document.querySelector("#test").lastChild.nodeName;

alert(x);//ÇIKTI:#text

Yukarıdaki örnekte son düğüm boşluktur bunuda "#text" diye okudu.

nextSibling özelliği

NextSibling özelliği, aynı ağaç düzeyinde belirtilen düğümün hemen altındaki düğümü döndürür. Döndürülen düğüm, bir Node nesnesi olarak döndür.

NextElementSibling sonraki kardeş düğümünü bir öğe düğümü olarak döndürürken (metin ve yorum düğümlerini yoksayar) nextSibling öğesinin düğümünü, metin düğümü veya yorum düğümü olarak bir sonraki kardeş düğümünü döndürdüğünü, bu özellikler iki element arasındaki farktır.

Sözdizimi :

node.nextSibling

ÖRNEK :

Liste elemanın sonraki kardeşi içeriğini alın.

HTML :

<ul><li id="test1">javascript (first li)</li><li id="test2">php (second li)</li></ul>

javaScript :

var x=document.querySelector("#test1").nextSibling.innerHTML; 

alert(x); // ÇIKTI :php (second li)

previousSibling özelliği

PreviousSibling özelliği, belirtilen düğümün önceki düğümünü, aynı ağaç düzeyinde döndürür. Döndürülen düğüm, bir Node nesnesi olarak döndürülür.

PreviousElementSibling önceki kardeş düğümünü bir öğe düğümü olarak döndürürken (metin ve yorum düğümlerini yoksayar) previousSibling öğesinin düğüm, metin düğümü veya yorum düğümü olarak önceki kardeş düğümünü döndürdüğü bu özellikler iki element arasındaki farktır.

Sözdizimi :

node.previousSibling

ÖRNEK :

Bir liste öğesinin önceki kardeşinin HTML içeriğini alın.

HTML :

<ul><li id="test1">javascript (first li)</li><li id="test2">php (second li)</li></ul>

javaScript :

var x= document.querySelector("#test2").previousSibling.innerHTML; 

alert(x); // ÇIKTI :javascript (first li)

Öğe amaçlı gezinme

Yukarıda listelenen gezinti özellikleri, tüm düğümleri ifade eder . Örneğin, childNodes metin düğümlerini, öğe düğümlerini ve varsa yorum düğümlerini bile görebiliriz.

Ancak birçok görev için metin veya yorum düğümleri istemiyoruz. Etiketleri temsil eden ve sayfanın yapısını oluşturan öğe düğümlerini değiştirmek istiyoruz.

Bu yüzden yalnızca öğe düğümlerini dikkate alan daha fazla gezinme bağlantısı görelim.

Yukarıdaki verilen javascript kod adları ile aynı sadece kod isminin ortasına "Element" kelimesi ekliyoruz.

• children - Sadece element düğümleri olan çocuklar.
• firstElementChild, lastElementChild- ilk ve son öğe çocuklar.
• previousElementSibling, nextElementSibling- Komşu unsurları.
• parentElement - ebeveyn elemanı.

<p id="test">               
<b> metin1 </b> 
<i> Metin2 </i> 
Metin3  
<i> Metin4 </i>  
<b> Metin5 </b>
</p> 

var x= document.querySelector("#test").childNodes[4];

alert(x.textContent);