Jquery öncesinde bir nesneyi seçmek, referans almak özelliğini değiştirmek için window.document nesnesinden faydalanılmaktaydı halende popüler biçimde kullanılmaktadır bu nesne makalenin devamında bu nesneye ait bazı özelliklerini görebilirsiniz.
Javasciprt ile document nesnesi kullanımı
Bu nesne sayfanızdaki HTML taglarına ulaşabilmek için JavaScript’te oldukça çok kullanılır. windows nesnesinin bir nesnesidir. Siz window.document ya da sadece document olarakta document nesnesini çağırabilirsiniz. Çok önemli bir nesnedir.
Javascript Kodu
1 2 3 4 5 6 7 8 | function resimYukle() { //document.forms[0].elements[0].value = "Oylesine bir yazi"; document.getElementsByName("f1")[0].elements[0].value = "Oylesine bir yazi"; //document.f1.elements[0].value = "Oylesine bir yazi"; document.getElementById("h").innerHTML="Yeliz"; document.getElementsByTagName("h1")[1].innerHTML = "Resim degisti"; window.document.images[0].src = "yeliz.jpg"; } |
HTML Kodu
1 2 3 4 5 6 | <h1 id="h">Ecrin</h1> <form name="f1"> <input> </form> <h1>Resim</h1> <img rel="lightbox" src="ecrin.jpg" width="400" onclick="resimYukle()"> |
Şimdi yapacağım açıklamayı iyi okuyun ve anlayın, çünkü bunu anlarsanız bundan sonraki adımlar sizin için çok kolay olacaktır. Açıklamayı bile bile alışılmışın dışında biraz uzun tuttum. Websayfasına document nesnesiyle ulaşabiliriz. “//” olarak tanımlanan satırlar JavaScript tarafından açıklama olarak gözetilir. document nesnesinden sonra nokta konarak document nesnesinin alt nesnelerine ya da değişkenlerine ulaşabiliriz. resimYukle() fonksiyonundaki ilk satıra bakarsanız, document nesnesinden sonra . koydum ve forms[0] yazdım. forms document nesnesinden saklanan bir dizi nesnesidir. forms nesnesi içerisinde document nesnesinin gösterdiği web sayfasındaki tüm Form tagları saklanmaktadır. Köşeli parantez açarak dizideki nesnelere ulaşmak istiyorum. İçerisine sıfır yazdım ve ilk Form nesnesine ulaşmak istediğimi vurguladım. forms[0] nesnesinden sonra nokta koydum ve elements yazdım. elements nesneside forms[0] nesnesinin gösterdiği Form nesnesinin taglarıdır. dom1.html’de tek bir tag vardır o da ‘input’ tagıdır. Burada köşeli parantez içerisine sıfır yazarak ilk elemana ulaştım. Bir yazsaydım forms[0] nesnesinin ikinci tagına ulaşırdım. dom1.html’de forms[0] nesnesinin ikinci bir tagı olmadıgı için JavaScript kodumuz hata verecekti. elements[0] dizisinden sonra yine bir nokta koydum ve value yazdım. value elements[0] dizisinin bir değişkenidir ve elements[0] nesnesinin değerini değiştirir. elements[0] nesnesinin bir ‘input’ tagına işaret ettiğini anımsarsanız, bu tagın bir metin kutusu olduğunu hatırlarsınız. İkinci satırın JavaScript tarafından işlenmesini istediğim için “//” işareti koymadım. İkinci satır az önce anlattığım metin kutusuna ulaşmanın farklı bir tekniğidir. Bu sefer document nesnesinden sonra getElementsByName() metodunu kullandım. Parametre olarak f1 yazdım, çünkü ben biliyorum ki benim web sayfamda kullandığım tek bir Form nesnesi var ve adı f1. getElementByName() metoduyla taglara, tagların isimleriyle ulaşabiliyoruz. Aynı isimden birden fazla Form nesnesi olabileceği için köşeli parantez kullanarak dizinin ilk elemanını sıfır yazarak seçmiş oldum. Bir başka yöntem ise Form nesnesinin adını doğrudan bir nesne olarak kullanmaktır. Bunu da üçüncü satırda örnekledim. Document nesnesinden sonra Form nesnenesinin adı f1yazdım. Form nesneleri dışındaki taglarada ulaşam şekilleri vardır. Bunun için dördüncü satıra bakın. HTML kodunda h1 tagının id parametresine h yazmıştım. Bu taga document nesnesinin getElementById() metoduyla ulaşılabilinir. getElementById() metodunun parametresine h yazmamız yeterlidir. h1 tagının içeriğini değiştirebilmek için bu metot bize innerHTML değişkenini 124 sunmaktadır. innerHTML değişkeninin değerini değiştirmekle h1 tagının içeriğini değiştirmiş oluyoruz. Diyelim ki taglara tag ismiyle ulaşmak istiyoruz o zaman ne yapacağız. Beşinci satırda böyle bir örnek satır kodu verdim. getElementByTagName() metodunun parametresine h1 yazarak h1 olan tüm tagları bir dizi halinde elde edebiliyorum. HTML kodundaki ikinci h1 tagına ulaşabilmek için köşeli paranteze 1 değerini yazıyorum. Son olarak resimYukle() fonksiyonu çağrıldığında sayfamdaki resmimi değiştirmek istediğim için document nesnesinin images dizisine başvuruyorum. document nesnesinden sonra images yazıyorum ve köşeli parantezin içine 0 yazarak ilk resim tagına ulaşmış oluyorum. src parametresinin değierini değiştirmeklede yeni resmi yükleyebilme fırsatını kazanmış oldum. dom1.html dosyasına çift tıkladığınızda tarayıcınız bir sayfa gösterecektir. Resime tıklandığında resimYukle() fonksiyonu çağrılacaktır ve sayfanın içeriği değişecektir.
