JS ile tüm HTML-CSS dosyalarına erişebilir ve üstünde istediğimiz değişikliği yapabiliriz.İstediğimiz kod bloklarına erişmek için birkaç yöntem var şimdi onlardan bahsedeceğiz sonra nasıl dosyada işlem yapabileceğimize bakacağız.
JavaScript Dom
JavaScript Kodlara Erişim Yöntemleri
getElementById
İd ile eşleşen tüm kod bloklarına erişmemizi sağlar. Örnek vermek gerekirse:
<p id=”başlık”>Kod Akademisi</p>
<script>
document.getElementById(“başlık”)
</script>
Yukarıda id’si başlık olan kod bloğuna eriştik fakat herhangi bir şey yapmadık. Neler yapabileceğimizi birazdan göreceğiz.
getElemenstByName
Name yani isimle belirtilen tüm kod bloklarına erişmemizi sağlar.
Mesela:
<p name”konu”>DOM</p>
<script>
document.getElementsByName(“konu”)
</script>
Yukarıdaki kodlarımızda adı “konu” olan bir paragraf oluşturduk daha sonra getElementByName yöntemini kullanarak adı konu olan kod bloğuna eriştik ve herhangi bir işlem yapmadık.
getElementsByTagName
TagName yani ism etiketi ile belirtilen tüm kod bloklarına erişmemizi sağlar.
Mesela:
<p>JavaScript Eğitim Serisi/DOM</p>
<script>
<script>
document.getElementsByTagName(“p”)
</script>
Şeklinde kod yazdığımızda “p” etiketi ile belirtilen kod bloğuna erişiriz.
getElementsByClassName
Class adı ile eşleşen tüm kod bloklarına erişmemizi sağlar.
Mesela:
<p class=”kod”>Kod Akademisi</p>
<script>
document.getElementsByClassName(“kod”)
</script>
Yukarıda class adını “kod” ile belirttiğimiz kod bloğuna eriştik fakat bir işlem yapmadık.
querySelector
Seçici ile ilk eşleşen kod bloğuna erişmemizi sağlar.
Mesela:
<p class=”kutu”>Alıntı Örnek</p>
<script>
document.querySelector(“.kutu”);
</script>
Şeklinde kod yazdığımızda seçicinin ilk eşleştiği “kutu” ögesine erişmiş oluruz.
querySelectorAll
querySelectorden tek farkı ilk eşleşen kod bloğuna değil eşleşen tüm kod bloklarına erişimi sağlar.
Mesela:
<p class=”kutu”>Alıntı Örnek</p>
<p class=”kutu”>Alıntı Örnek2</p>
<script>
document.querySelector(“.kutu”);
</script>
Şeklinde kod yazdığımızda seçicimiz eşleşen iki kod bloğunada erişebilecektir.
Bunların yanında birkaç tane daha erişim yöntemi var kısaca bahsedelim.
document.anchors~Sayfadaki tüm bağlantılara erişmemizi sağlar.
document.body~Sayfadaki body etiketlerine erişmek için kullanılır.
document.documentElement~Tüm dökümana ulaşmak için kullanılır.
document.embeds~Eklentilere erişmek için kullanılır.
document.forms~Sayfadaki tüm formlara ulaşmak için kullanılır.
document.head~Sayfadaki head etiketlerine erişmek için kullanılır.
document.images~Sayfadaki görsellere erişmek için kullanılır.
document.links~Sayfadaki a href ile belirtilen linklere ulaşmak için kullanılır.
document.scripts~Sayfadaki script dosyalarına erişmek için kullanılır.
document.title~Sayfa başlığına erişmek için kullanılır.
document.cookie~Çereze erişmek için kullanılır.
Sayfada Değişiklik Yapma
JS’de sayfada istediğimiz değişikliği yapabiliriz. Bunların birkaç yöntemi var örneklerle onlara bakalım.
HTML İçeriğini Değiştirme
Bir sayfadaki HTML içeriğini değiştirmek için “innerHTML” özelliğini kullanırız.
Mesela:
<p id=”başlık”>Kod Akademisi</p>
<script>
document.getElementById(“başlık”).innerHTML = “Yeni Metinimiz”;
</script>
Şeklinde kod yazdığımızda id’sini başlık olarak belirttiğimiz paragraftaki Kod Akademisi metni değiştirilir ve yerine “Yeni Metinimiz” yazar.
HTML Stilini Değiştirme
Bunu bir örnekle anlatalım.
<p id=”p2″>Alıntı Örnek!</p>
<script>
document.getElementById(“p2”).style.color = “blue”;
</script>
Yukarıda öncelikle id değeri p2 olan bir paragraf yazdık. Daha sonra <script> etiketleri arasında getElementById yöntemi kullanarak “p2” kod bloğuna ulaştık ve style.color yaparak metin rengini mavi yaptık eğer JS kodlarını kaldırırsanız metnimizin default yani siyah renkte olduğunu görebilirsiniz.
Bununla ilgili bir alıntı örneği sizle paylaşmak isterim.
<h1 id=”kodakademisi”>Alıntı</h1>
<button type=”button”
onclick=”document.getElementById(‘kodakademisi’).style.color = ‘red'”>
Bana Tıkla</button>
<button type=”button”
onclick=”document.getElementById(‘kodakademisi’).style.color = ‘blue'”>
Bana Tıkla2</button>
Yukarıda öncelikle id değeri “kodakademisi” olan bir metin yazdık. Daha sonra bana tıkla yazan bir buton oluşturduk eğer kullanıcı bana tıkla yazan butona tıklarsa metin rengimiz kırmızıya dönecek.
Eğer kullanıcı bana tıkla2 yazan butona tıklarsa rengimiz maviye dönecek. Bunu testlerde vs. kullanabilirsiniz.
Bu özelliği kullanarak CSS’de sayfada bir çok özellik yapabilirsiniz. Eğer neler yapabileceğinizi görmek istiyorsanız buraya tıklayabilirsiniz.
Kullanıcı Metne Tıkladığında Metni Değiştirmek
Mesela
Fareyi Buraya Getir
Size kodları üzerinden anlatayım:
<div _msthash=”429767″ _msttexthash=”247286″ onmouseout=”this.innerHTML=’Fareyi Buraya Getir'” onmouseover=”this.innerHTML=’Teşekkürler'” style=”background-color: blue; color: black; float: left; font-size: 15px; font-weight: bold; height: 80px; margin: 20px; padding-top: 20px; text-align: center; width: 170px;”>Fareyi Buraya Getir</div>
CSS kodlarımızla görünümünü oluşturduk daha sonra onmouseout şeklinde bir değişken tanımladık
ve fareyi buraya getir yazısı ekledik. Daha sonra onmouseover şeklinde bir değişken ekledik ve fare ilk metnimizin üstüne geldiğinden Teşekkürler mesajı olarak değişmesini istedik.
BU METNE TIKLA!
Burda ise şöyle yaptık:
<h1 onclick=”this.innerHTML=’HATA!'”>BU METNE TIKLA!</h1>
Bu metne tıkla diyen bir yazı oluşturduk. Ve eğer metne tıklanırsa o yazıyı değiştirmesi için innerHTML özelliğini kullandık.
Yukarıdaki butonun kodları şöyle:
<button id=”myBtn”>Tarihi Görüntülemek İçin Tıklayın</button>
<p id=”demo”></p>
<script>
document.getElementById(“myBtn”).onclick = displayDate;
function displayDate() {
document.getElementById(“demo”).innerHTML = Date();
}
</script>
Öncelikle butonumuzu oluşturduk id değerine “myBtn” yazdık.
Daha sonra id değeri demo olan bir kod bloğu oluşturduk o kod bloğunu innerHTML özelliği yardımı ile saat ve tarihi görüntülemek için kullanacağız.
Daha sonra ById yöntemiyle butonun olduğu kod bloğumuza eriştik. Ve display date adında bir fonksiyon oluşturduk kullanıcı butonu tıkladığında fonksiyonumuz devreye girecek ve id değeri demo olan kod bloğuna saat ve tarihi yazdıracak.
AddEventListener() Yöntemi
Bu yöntemle kullanıcı bir olay gerçekleştirirse (tıklama vs.) ona bir alert, mesaj vs. bırakabilirsiniz. Örnek vermek gerekirse :
element.addEventListener(olay, fonksiyon, boole);
Yukarıdaki komut satırında ilk parametremiz yani olay yazan yer kullanıcının gerçekleştidiği olaydır. Bu parametreye tıklama , fareyi üzerine getirme gibi değerler atayabiliriz.
İkinci parametre kullanıcının ilk parametrede gerçekleştirdiği olay sonucu çağırdığımız fonksiyondur.
Üçüncü parametre ise isteğe bağlı boole vs. değerlerinin girildiği yerdir zorunluluğu yoktur.
Örneğin :
<button id=”kodakademisi”>Dokun</button>
<script>
document.getElementById(“kodakademisi”).addEventListener(“click”, function() {
alert(“Kod Akademisi JavaScript Eğitim Serisi”);
});
</script>
Yukarıdaki kodlarda ilk olarak id değeri “kodakademisi” olan bir buton oluşturduk ve butonumuzun üstüne dokun yazdık.
Daha sonra “getElementById” yöntemini kullanarak butona ulaştık.
Ve butonumuza addEventListener() yöntemini ekledik.
Butonumuz tıklanınca bize alert yani uyarı olarak “Kod Akademisi JavaScript Eğitim Serisi”
mesajını yollayacak bir fonksiyon ekledik. Ve eğer butona click yani tıklanma olursa tarayıcı fonksiyondaki mesajı yollayacaktır.
Eğer istersek fonksiyonu harici olarak oluşturup çağırabiliriz. Ancak biz kod bloğunda yeni fonksiyon oluşturduk bu yöntem önerilmez.
RemoveEventListener()
Bu yöntemle addEventListener kullanarak eklediğiniz metodları kaldırabilirsiniz.
Kullanımı addEventListener ile aynıdır.
Remove()
Bu yöntemi kullanarak HTML içeriğinde istediğiniz yeri silebilirsiniz.
<div>
<p id=”ilk”>Kod Akademisi.</p>
<p id=”ikinci”>JavaScript Eğitim Serisi / DOM</p>
</div>
<button onclick=”fonksiyonum()”>Paragrafı Sil</button>
<script>
function fonksiyonum() {
var elmnt = document.getElementById(“ilk”);
elmnt.remove();
}
</script>
Yukarıdaki kodlarda öncelikle id değeri ilk ve ikinci olan iki adet paragraf oluşturduk.
<p id=”ilk”>Kod Akademisi.</p>
<p id=”ikinci”>JavaScript Eğitim Serisi / DOM</p>
Daha sonra bir buton oluşturduk ve butona tıklanınca devreye girecek “fonksiyonum” adında bir fonksiyonu içe dahil ettik. Ve butonun üzerine “Paragrafı Sil” yazdık.
<button onclick=”fonksiyonum()”>Paragrafı Sil</button>
Daha sonra <script> etiketleri arasında fonksiyonun çalışabilmesi için fonksiyonun kodlarını yazdık.
<script>
function fonksiyonum() {
var elmnt = document.getElementById(“ilk”);
elmnt.remove();
}
</script>
Kullanıcı butona tıklarsa ilk yazdığımız paragraf silinecek ikinci paragraf duracaktır.
Metine Ulaşıp Ekrana Yazdırma
<h2>KOD AKADEMİSİ – JS EĞİTİM SERİSİ/DOM</h2>
<p>Kod Akademisi</p>
<p>JavaScript Eğitim Serisi</p>
<p>DOM</p>
<p id=”yenimetin”></p>
<script>
var kodakademisi = document.getElementsByTagName(“p”);
document.getElementById(“yenimetin”).innerHTML =
“innerHTML şunlara ulaştı: ” +
kodakademisi[1].innerHTML + ” ” + kodakademisi[2].innerHTML;
</script>
Yukarıdaki kodları şöyle açıklayalım :
Öncelikle <h2> etiketleri arasına “KOD AKADEMİSİ – JS EĞİTİM SERİSİ/DOM” yani başlığımızı yazdık.
Daha sonra <p> etiketi kullanarak 4 adet paragraf oluşturduk. Bu paragrafların ilk üçü normal metinken dördüncü metin innerHTML kullanarak yeni metinimizi yazdıracağımız yer.
Sonrasında <script> etiketleri arasında kodakademisi adında değişken tanımladık ve getElementsByTagName methodu kullanarak <p> etiketi olan tüm yerlere erişimi sağladık.
Sonrasında getElementById yöntemiyle id değeri “yenimetin” olan dördüncü paragrafımıza eriştik ve innerHTML kullanarak ikinci ve üçüncü paragrafımızı bu paragrafa yazdırdık.
NOT: JS’de ilk değer herzaman 0’dır. Yukarıdaki kodlarda <p>Kod Akademisi</p> yazan yer 0 değerine sahiptir.
Yazımız buraya kadardı diğer derslere devam etmeyi unutmayın:)
Anlamadığınız yer olursa yorum bırakmaktan çekinmeyin:)
Etiketler:javascript , js , javascript eğitim , js eğitim ,
javascript nedir, js nedir, javascript dom, javascript document object model, javascript innerHTML türkçe, javascript innerHTML ,javascript dom türkçe, javascript kod akademisi
