JavaScript Dom Accessing Elements

JavaScript'in bir web sayfasının HTML öğelerine erişmesine ve bunlarda değişiklik yapmasına izin veren bir standart API'dir.

JavaScript Dom Accessing Elements - Zubi Tech Hub

JavaScript DOM'ye Erişme

JavaScript DOM (Archive Article Model), DOM'u bir ağaç gibi düşünün, her bir düğüm bir HTML öğesidir. JavaScript'i kullanarak, herhangi bir öğeyi bulabilir ve ona herhangi bir şeyi değiştirebilirsiniz.

DOM'a erişmek için JavaScript'te birkaç yöntem vardır. En yaygın yöntem, document.getElementById() yöntemini kullanmaktır. Bu yöntem, verilen ID ile eşleşen bir öğe arar. Örneğin, HTML'nizde "myElement" ID'sine sahip bir öğe varsa, bunu şu şekilde erişebilirsiniz:

var myElement = document.getElementById("myElement");

Bu yöntem, ID'si olmayan bir öğeyi bile döndürebilir. HTML'inizde "myElement" ID'sine sahip bir öğe yoksa, bu yöntem invalid döndürecektir.

Elementlere erişmek için ikinci bir yöntem, document.getElementsByTagName() yöntemini kullanmaktır. Bu yöntem, verilen etiket adıyla eşleşen tüm öğeleri bir NodeList olarak döndürür. Örneğin, HTML'inizdeki tüm <div> öğelerine erişmek istiyorsanız, aşağıdaki gibi yapabilirsiniz:

var divElements = document.getElementsByTagName("div");

Bu NodeList, tüm <div> öğelerinin bir listesi olacaktır. Bu listeden herhangi bir öğeye şu şekilde erişebilirsiniz:

var firstDivElement = divElements[0];

Bu yöntem, öğe içermeyen bir NodeList'i de döndürebilir. HTML'inizde <div> öğesi yoksa, bu yöntem boş bir NodeList döndürecektir.

Elementlere erişmek için üçüncü bir yöntem, document.getElementsByClassName() yöntemini kullanmaktır. Bu yöntem, verilen sınıf adına sahip tüm öğeleri bir NodeList olarak döndürür. Örneğin, HTML'inizde "myClass" sınıf adına sahip tüm öğelere erişmek istiyorsanız, aşağıdaki gibi yapabilirsiniz:

var elementsWithMyClass = document.getElementsByClassName("myClass");

Bu NodeList, "myClass" sınıf adına sahip tüm öğelerin bir listesi olacaktır. Bu listeden herhangi bir öğeye şu şekilde erişebilirsiniz:

Dom Navigation

var firstElementWithMyClass = elementsWithMyClass[0];

Bu yöntem, öğe içermeyen bir NodeList'i de döndürebilir. HTML'inizde "myClass" sınıf adına sahip bir öğe yoksa, bu yöntem boş bir NodeList döndürecektir.

Bunlar, JavaScript kullanarak DOM'a erişmenin bazı yollarıdır. DOM'a JavaScript kullanarak eriştiğinizde, öğeleri bulabilir, bunlarda değişiklik yapabilir ve bunları kaldırabilirsiniz. Bu, web sayfanızla çok şey yapmanıza olanak tanır.

DOM'a Erişme Örnekleri

Aşağıda, JavaScript kullanarak DOM'a erişmek için bazı örnekler verilmiştir:

HTML öğesinin metin içeriğini değiştirme:

var myElement = document.getElementById("myElement");

myElement.innerHTML = "Bu yeni metin";

HTML öğesini DOM'dan kaldırma:

var myElement = document.getElementById("myElement");

myElement.remove();

Child Nodes

Bir HTML öğesinin tıklama olayına dinleme:

var myElement = document.getElementById("myElement");

myElement.addEventListener("click", capability() {

console.log("öğe tıklandı");

});

Bu örnekler, JavaScript kullanarak DOM'a erişmenin ve onunla etkileşim kurmanın bazı yollarını göstermektedir. JavaScript'i kullanarak DOM'a erişerek, web sayfalarınızla daha fazla şey yapabilirsiniz.