JavaScript DOM ERİŞİM YÖNTEMLERİ

Belge nesnesi, bir web belgesini veya sayfayı temsil eder. Bir belgeyi hiyerarşik bir ağaç yapısı olarak temsil eder ve belge ağacındaki her öğeye DOM'da (Belge Nesnesi Modeli) bir Düğüm denir.

Yapısal olarak, Belge Nesnesi Modeli düğümlerden oluşur ve her düğüm web belgesindeki içeriği temsil eder. Geliştiricilere her şeyi bir web sayfasında göstermek için bir yol sunar böylece web sayfasının içeriğine erişim yöntemler seti aracılığıyla erişilebilir olur.

HTML ELEMANLARI BULMA


Genellikle JavaScript ile HTML öğelerini değiştirmek isteyebilirsiniz. Bunu yapmak için önce HTML öğeleri bulmanız gerekir. HTML öğelerini bulmak için javaScript'de çeşitli erişim yöntemleri sunar.

Id ile HTML Elemanı Bulma


Genellikle DOM içindeki bir öğeye erişmek ve niteliklerini değiştirmek istiyorsanız. Javascript, bir öğeye DOM ağaç yapısından erişmenin en kolay yolu olan document.getElementById() yöntemini sağlar. Belirtilen değer ile ID özniteliğine sahip olan öğeyi döndürür.

Aşağıda ki örnek, id = "test" olan öğeyi bulur:

ÖRNEK:

 
 var x = document.getElementById("test");
 
 

Eleman bulunursa, yöntem öğeyi bir nesne olarak (x öğesinde) döndürür. Eleman bulunamazsa, x'de boş değer bulunacaktır.

Etiket Adına Göre HTML Elements Bulma


getElementsByTagName() yöntemi, dokümandaki tüm öğelerin belirtilen etiket adına sahip bir koleksiyonunu bir NodeList nesnesi olarak döndürür.

NodeList nesnesi düğümlerin bir koleksiyonunu temsil eder. Düğümlere dizin numaraları erişilebilir. Endeks 0'dan başlar.

İpucu: NodeList nesnesinin length özelliğini, belirtilen etiket adına sahip öğe sayısını belirlemek için kullanabilirsiniz; ardından, tüm öğeler arasında döngü oluşturabilir ve istediğiniz bilgiyi ayıklayabilirsiniz.

İpucu: Parametre "*", belgedeki tüm öğeleri döndürür.

ÖRNEK:

 
 var x = document.getElementsByTagName("p");
 
 

Yukarıda ki örnek tüm <p> öğelerini bulur:

ÖRNEK:

 
 var x = document.getElementById("deneme");
 
 var y = x.getElementsByTagName("p");
 
 

Yukarıda ki örnek, id = "deneme" öğesini bulur ve sonra "deneme" içindeki tüm <p> öğelerini bulur:

ÖRNEK:

Belgedeki tüm <p> öğelerinin arka plan rengini değiştirin:


var x = document.getElementsByTagName("P");

var i;

for (i = 0; i < x.length; i++) {

    x[i].style.backgroundColor = "blue";
  
}

ÖRNEK:

Dokümandaki tüm öğeleri alın:

 
 var x = document.getElementsByTagName("*");
 
 

HTML Öğelerini Sınıf adına göre bulma


getElementsByClassName() yöntemi, belgede belirtilen sınıf adına sahip tüm öğelerin bir koleksiyonunu bir NodeList nesnesi olarak döndürür.

NodeList nesnesi düğümlerin bir koleksiyonunu temsil eder. Düğümlere dizin numaraları erişilebilir. Endeks 0'dan başlar.

İpucu: Belirtilen sınıf adına sahip öğe sayısını belirlemek için NodeList nesnesinin length özelliğini kullanabilirsiniz, ardından tüm öğeler arasında döngü oluşturabilir ve istediğiniz bilgiyi ayıklayabilirsiniz.

ÖRNEK:

class="deneme" olan elementi seçin.


var x = document.getElementsByClassName("deneme");

ÖRNEK:

Hem "test" ve "renk" sınıflarına sahip tüm öğeleri alın:


 var x = document.getElementsByClassName("test renk");

ÖRNEK:

Class = "deneme" olan tüm öğelerin arka plan rengini değiştirin:


var x = document.getElementsByClassName("test");

var i;

for (i = 0; i < x.length; i++) {

    x[i].style.backgroundColor = "blue";
  
}

HTML DOM querySelector () Yöntemi


querySelector() yöntemi, belgede belirtilen bir CSS seçiciyle eşleşen ilk öğeyi döndürür.

Not:querySelector() yöntemi yalnızca belirtilen seçicilerle eşleşen ilk öğeyi döndürür. Tüm eşleşenleri geri getirmek için bunun yerine querySelectorAll() yöntemini kullanın.

Seçici, birkaç kez kullanılan belgede bir kimlikle eşleşirse (bir "kimlik", bir sayfada benzersiz olması gerektiğini ve birden fazla kullanılmaması gerektiğini unutmayın), ilk eşleşen öğeyi döndürür.

Sözdizimi :


document.querySelector(CSS selectors)

Dokümandaki ilk <p> öğesini seçin.

ÖRNEK:


document.querySelector("p");

<p> öğesinin ilk Class = "test" olan elemanı şeçin.

ÖRNEK:


document.querySelector("p.test");

id="test" olan elemanı seçin.

ÖRNEK:


document.querySelector("#test");

HTML DOM querySelectorAll () Yöntemi


querySelectorAll() yöntemi, belgede belirtilen bir CSS seçiciyle eşleşen tüm öğeleri statik bir NodeList nesnesi olarak döndürür.

NodeList nesnesi düğümlerin bir koleksiyonunu temsil eder. Düğümlere dizin numaraları erişilebilir. Endeks 0'dan başlar.

İpucu: Belirtilen seçiciyle eşleşen öğelerin sayısını belirlemek için NodeList nesnesinin length özelliğini kullanabilirsiniz, ardından tüm öğeler arasında dolaşıp istediğiniz bilgiyi alabilirsiniz.

div etiketin alt elemanı p'yi seçin.

ÖRNEK:


var x = document.querySelectorAll("div > p");

Belgede tüm <h2>, <div> ve <span> öğelerinin arka plan rengini ayarlayın:

ÖRNEK:


var x = document.querySelectorAll("h2, div, span");

var i;

for (i = 0; i < x.length; i++) {

    x[i].style.backgroundColor = "green";
    
}


NOT : querySelector , jquery seçicilere göre hızlıdır.

HTML Elemanlarını HTML Nesne Koleksiyonlarıyla Bulma


Bu örnek, form koleksiyonunda id = "frm1" olan form öğesini bulur ve tüm öğe değerlerini görüntüler:


var x = document.forms["frm1"];

var text = "";

var i;

for (i = 0; i < x.length; i++) {

    text += x.elements[i].value + "<br>";
  
}

document.getElementById("demo").innerHTML =

Aşağıdaki HTML nesnelerine (ve nesne koleksiyonlarına) de erişilebilir:

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

7616

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.