Javascript: #DOM’u Anlamak

Kubilay Kahil
Nov 4 · 6 min read

Merhabalar, bu yazıyı takip ederek Javascript ile HTML DOM’u kullanmayı, manipüle etmeyi ve kolay bir şekilde nasıl işlemlerinizi yapabileceğinizi anlattım. DOM üzerinde işlemler yapabilmek için, verilen örnekleri uygulayarak pratik yapmanızı ve hayalgücünüzü kullanarak örneklerle pekiştirmenizi tavsiye ediyorum. Yazının sonunda verilen kaynakları incelemeniz konuyu daha iyi anlamanızı sağlayacaktır.

DOM Nedir?

DOM (Document Object Module) HTML dökümanları içerisinde bulunan nesnelere kolaylıkla erişim sağlamak ve üzerinde işlemler yapabilmek için tasarlanan bir modeldir. DOM ile HTML dosyamızda bulunan her şeye erişim sağlayabiliriz.

HTML dosyasında bulunan bütün öğeler, DOM üzerinde bir nesne olarak görülür. DOM modelin ismi, document ise bu nesnelerin kapsayıcısıdır. Bu kapsayıcı içerisinde bulunan <html> evet bildiğiniz html etiketi head, body nesnelerinin içerisinde bulunan diğer nesnelerin kapsayıcısıdır. Head ve body etiketleri de içerisinde bulunan diğer nesnelerin kapsayıcılarıdır. Aynı örüntü üzerinde bu durum tekrar eder.

matruşkaların en büyüğü için document temsil ediyor diyebiliriz.

Document objesi için matruşkaların en büyüğü örneği verilebilir. Ama küçüldükçe bir farklılık doğuyor. Document nesnemizi düşünürsek, bir matruşkanın içerisinde aynı boyutta bulunan iki matruşka çıkabilir.

En büyük matruşkamız document , altındaki html nesnesini ve html objesinin içerisinde bulunan matruşkalar da head ve body nesnelerini temsil ediyor. Aşadaki tablo içerisinde modellemeyi inceleyebilirsiniz:

w3schools document modeli

Peki ya Node?

Node(düğüm) iç içe olan bu yapıyı hiyerarşik olarak ayırır. HTML belgesi içerisinde bütün elemanlar bir düğümdür:

<head>
</head>
<body>
</body>

Yukarıda head ve body elemanları birer düğümdür.

Node elemanları arasında aile ilişkisi vardır. Bu iki düğüm html düğümünün altında bulundukları için html düğümünün çocuklarıdır. Head, body aynı köke (aynı tag altında) bağlı oldukları için de kardeşlerdir.

DOM kullanarak HTML belgesi içerisindeki nesnelerle işlemler yapabileceğimizi söylemiştik. Bu işlemler için DOM özellik ve metodları uygulayabiliriz. Bütün metodları tek tek incelemek yerine bunları örnekler üzerinde göstereceğim. Bütün özellik ve metodları incelemek veya sırf göz gezdirmek için linki takip edebilirsiniz.

Basit örneklerle başlayalım:

<p id=”sehir”>Eskişehir</p><script type=”text/javascript”>

var konum = document.getElementById(“sehir”).innerHTML;
alert(konum);
</script>

Erişim sağladığımız kodu inceleyelim. Document ile HTML belgemiz içerisinde bir değere erişeceğimizi belirtiyoruz. getElementById(“sehir”), id değeri “sehir” olan elemana ulaşıyoruz. innerHTML ile id değeri “sehir” olan düğümün içindeki veriye ulaşabiliyoruz.

Düğümlere erişim sağlayabileceğimiz metodlar

Yukarıda geçen üç yöntem ile nesnelere erişim sağlayabiliriz

<p id=”sehir”>Eskişehir</p>
<p id=”sehir2">Ankara</p>
<p class=”konum”>Bulunduğunuz Şehir: </p>

<script type=”text/javascript”>

var konum = document.getElementById(“sehir”).innerHTML;
document.getElementsByClassName(“konum”)[0].innerHTML += “<b>” + konum + “</b>”;
</script>

Id değeri “sehir” olan düğümün içindekileri, “konum” class değeri olan düğümün içerisine ekledik. getElementsByClassName(“konum”)[0], önceki kod parçamızla yapı olarak neredeyse aynı. Ama kodun sonundaki index numarası nereden çıktı ?

HTML belgesi içerisinde kullandığımız id isimleri tekildir. Birden fazla kez kullanılmaz. Class ve TagName (etiket) ise birden fazla kullanılabilirler. Düğüme ulaşmak için Class veya TagName kullanıyorsak, index numarasını belirtmemiz gerekiyor.

Düğümleri Tarayıcı Üzerinde Görüntüleme

Tarayıcınızda bulunan konsolu açın,
document
komunutu girin. Dönen sonuç üzerine tıklayın. Açılan ekranda satır sonlarında bulunan düğüm işareti olan bütün elemanlar birer düğüm noktasıdır.

Düğümlerin konsol üzerinde gösterimi

Konsol üzerinde test amaçlı çalışmalar yapabilir, kodlarınızı kontrol edebilirsiniz. Bir örnek ile devam edelim..

Elimizde şehirlerin tutulduğu bir select listesi var. Liste içerisinde bulunan option etiketlerinde class değerleri şehirlerin bulundukları bölgeyi gösteriyor. Bu class etiketlerine erişerek, bütün şehirleri bölgelerine göre ayıralım.

İlk olarak HTML dosyamızı hazırlamakla işe başlayalım:

<!doctype html>
<html>
<head>
<title>Türkiye İl Haritası</title><meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">

*{
border: 0;
margin: 4px;
padding: 0;
}
#sehir{
width: 40%;
height: auto;
margin: 5% 0 0 30%;
border: 1px solid gray;
padding: 50px;
text-align: center;
font-size: 30px;
}
div{
display: block;
margin: 10%;
}
</style></head><body>

<select id="sehir" name="Sehir">
<option value="0">------</option>
<option value="1" class="akdeniz">Adana</option>
<option value="2" class="guneyAnadolu">Adıyaman</option>
<option value="3" class="ege">Afyonkarahisar</option>
<option value="4" class="doguAnadolu">Ağrı</option>
<option value="5" class="karadeniz">Amasya</option>
<option value="6" class="icAnadolu">Ankara</option>
<option value="7" class="akdeniz">Antalya</option>
<option value="8" class="karadeniz">Artvin</option>
<option value="9" class="ege">Aydın</option>
<option value="10" class="marmara">Balıkesir</option>
<option value="11" class="marmara">Bilecik</option>
<option value="12" class="doguAnadolu">Bingöl</option>
<option value="13" class="doguAnadolu">Bitlis</option>
<option value="14" class="karadeniz">Bolu</option>
<option value="15" class="akdeniz">Burdur</option>
<option value="16" class="marmara">Bursa</option>
<option value="17" class="ege">Çanakkale</option>
<option value="18" class="icAnadolu">Çankırı</option>
<option value="19" class="karadeniz">Çorum</option>
<option value="20" class="ege">Denizli</option>
<option value="21" class="guneyAnadolu">Diyarbakır</option>
<option value="22" class="marmara">Edirne</option>
<option value="23" class="doguAnadolu">Elazığ</option>
<option value="24" class="doguAnadolu">Erzincan</option>
<option value="25" class="doguAnadolu">Erzurum</option>
<option value="26" class="icAnadolu">Eskişehir</option>
<option value="27" class="guneyAnadolu">Gaziantep</option>
<option value="28" class="karadeniz">Giresun</option>
<option value="29" class="karadeniz">Gümüşhane</option>
<option value="30" class="doguAnadolu">Hakkâri</option>
<option value="31" class="akdeniz">Hatay</option>
<option value="32" class="akdeniz">Isparta</option>
<option value="33" class="akdeniz">Mersin</option>
<option value="34" class="marmara">İstanbul</option>
<option value="35" class="ege">İzmir</option>
<option value="36" class="doguAnadolu">Kars</option>
<option value="37" class="karadeniz">Kastamonu</option>
<option value="38" class="icAnadolu">Kayseri</option>
<option value="39" class="marmara">Kırklareli</option>
<option value="40" class="icAnadolu">Kırşehir</option>
<option value="41" class="marmara">Kocaeli</option>
<option value="42" class="icAnadolu">Konya</option>
<option value="43" class="ege">Kütahya</option>
<option value="44" class="doguAnadolu">Malatya</option>
<option value="45" class="ege">Manisa</option>
<option value="46" class="akdeniz">Kahramanmaraş</option>
<option value="47" class="guneyAnadolu">Mardin</option>
<option value="48" class="ege">Muğla</option>
<option value="49" class="doguAnadolu">Muş</option>
<option value="50" class="icAnadolu">Nevşehir</option>
<option value="51" class="icAnadolu">Niğde</option>
<option value="52" class="karadeniz">Ordu</option>
<option value="53" class="karadeniz">Rize</option>
<option value="54" class="marmara">Sakarya</option>
<option value="55" class="karadeniz">Samsun</option>
<option value="56" class="guneyAnadolu">Siirt</option>
<option value="57" class="karadeniz">Sinop</option>
<option value="58" class="icAnadolu">Sivas</option>
<option value="59" class="marmara">Tekirdağ</option>
<option value="60" class="karadeniz">Tokat</option>
<option value="61" class="karadeniz">Trabzon</option>
<option value="62" class="doguAnadolu">Tunceli</option>
<option value="63" class="guneyAnadolu">Şanlıurfa</option>
<option value="64" class="ege">Uşak</option>
<option value="65" class="doguAnadolu">Van</option>
<option value="66" class="icAnadolu">Yozgat</option>
<option value="67" class="karadeniz">Zonguldak</option>
<option value="68" class="icAnadolu">Aksaray</option>
<option value="69" class="karadeniz">Bayburt</option>
<option value="70" class="icAnadolu">Karaman</option>
<option value="71" class="icAnadolu">Kırıkkale</option>
<option value="72" class="guneyAnadolu">Batman</option>
<option value="73" class="guneyAnadolu">Şırnak</option>
<option value="74" class="karadeniz">Bartın</option>
<option value="75" class="doguAnadolu">Ardahan</option>
<option value="76" class="doguAnadolu">Iğdır</option>
<option value="77" class="marmara">Yalova</option>
<option value="78" class="karadeniz">Karabük</option>
<option value="79" class="guneyAnadolu">Kilis</option>
<option value="80" class="akdeniz">Osmaniye</option>
<option value="81" class="karadeniz">Düzce</option>
</select>
<div id="marmara">
<h3>Marmara Bölgesi: </h3>
</div>
<div id="karadeniz">
<h3>Karadeniz Bölgesi: </h3>
</div>
<div id="doguAnadolu">
<h3>Doğu Anadolu Bölgesi: </h3>
</div>
<div id="guneyAnadolu">
<h3>Güney Anadolu Bölgesi: </h3>
</div>
<div id="icAnadolu">
<h3>İç Anadolu Bölgesi: </h3>
</div>
<div id="akdeniz">
<h3>Akdeniz Bölgesi: </h3>
</div>
<div id="ege">
<h3>Ege Bölgesi: </h3>
</div>
</body>
</html>

Şöyle bir görünüm elde etmiş olduk:

Şimdi script kodlarımız ile class bilgisini alalım ve bölge altlarına doğru şehirleri ekleyelim:

<script type="text/javascript">

var sehir = "";
var bolge = "";
var i = 1;
for( i ; i < 82 ; i++ ){

sehir = document.getElementsByTagName("option")[i];
bolge = sehir.className;
document.getElementById(bolge).innerHTML += sehir.innerHTML + "<br>"; }</script>

Bu kısa kod parçası ile şehirleri bölgeleriyle eşleştirdik.

JS DOM ile neler yaptığımı inceleyelim:

sehir = document.getElementsByTagName("option")[i];

Option etiketine sahip bütün düğümleri sehir değişkenine aktardım.

bolge = sehir.className;

Aktardığım her sehir değişkeninin bir class değeri vardı. Class değeri içerisinde bulunduğu bölge yazıyordu. Bölgeyi bolge değişkenine aktardım.

document.getElementById(bolge).innerHTML += sehir.innerHTML + "<br>";

HTML belgemizde bolge değişkenin sahip olduğu değere eşit id’ler mevcut. Bu id değerlere sehir değişkenimizin içerisindeki metini ekledim.

Bir sonraki yazıda bu konuya destek niteliğinde örneklerle devam edeceğim. Kalın sağlıcakla…

Kodları incelemek için github linkini kontrol edebilirsiniz:


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade