16 Apr 2018

Dom Manipulasyonu 1

Javascript ve DOM #1

Dom Nedir?

Kısaca bir örnekle özetleyelim:

<a href"mailto:tamayeseruysal@gmail.com">Buy coffee beans</a>

a ==> tag(etiket)

href ==> attribute(özellik?)

mailto:tamayeseruysal@gmail.com ==> attribute value(özelliğin değeri?)

Buy coffee beans ==> text (yazı)

<!DOCTYPE html>

<head>
	<title>Dom Çalışması</title>
</head>

<body>

<h1>Örnek Çalışma</h1>
	
	<div class="menu">
		<ol id="nav">
			<li><a id="home" href="#home">home</a></li>
			<li id="receipe">receipe</li>
		</ol>
	</div>
</body>

<footer>
	<div class="footer">
		<b> Copyright ==> Tamay Eser Uysal</b>
	</div>
</footer>

Bu kodu kopyalayıp yeni bir index.html dosyasına yapıştırıp bir web tarayıcısı ile açın ve sonrasında tarayıcınızın javascript konsolunu açın.

İlk deneyimiz ile başlayalım:

document.body.style.backgroundColor ="blue";

Bu kodu konsolunuza yapıştırın/yazın. Ne oldu? Arka plan mavi oldu değil mi? Evet işte DOM manipülasyonları ile aslında genel olarak böyle şeyler yapacağız. Bir nevi CRUD işlemleri… Sileceğiz, değiştireceğiz, yeni oluşturacağız…

Neden syntaxımız bu şekildeydi?

document bizim html dosyamızın tamamını kapsıyor ve aslında yazım sırasına dikkat ederseniz aynı bir kütüphaneden bir element seçer gibi davranıyoruz yani ==> document > body > style > backgroundColor şeklindeki hiyeraşiyi “.”‘lar ile ayırıyoruz. Aşağıdaki resmin bunu çok iyi anlattığını düşünüyorum.

![Dom Hiyeraşisi]: (https://www.w3schools.com/js/pic_htmltree.gif)

Şimdi bir de html dosyamızdan sadece bir id’yi alalım.

let homepage = document.getElementById('home');

Şimdi bu linki başka bir link ile değiştirelim:

homepage.href = 'http://puskuruk.github.io'

Evet artık “home” yazısına tıkladığımızda “http://puskuruk.github.io” bağlantısına gidiyor.

İkinci yazımda kaldığımız yerden devam edeceğiz.