Javascript Document Nesnesi ve Elemanlara Ulaşma

Bu konunun temeline Javascript'te Anlık Toplama İşlemi Yapma adlı konuda değinmiştik. Şimdi bu dersimizde daha ayrıntılı bir biçimde inceleyeceğiz. Yalnız bu söylemiş olduğum konuda sadece id değerine göre işlem yapmıştık. Fakat element seçicisi sadece id ile kalmayıp başka özelliklere göre de işlem görmektedir.

getElementById(); Methodu Kullanımı

Bu metot parantez içinde yer alan değere ait olan bilgiler ile işlem yapmaktadır. Parantez içinde yer alan id değerine sahip olan bütün nesnelere erişebilmektedir. İşlem olarak ister sahip olduğu veriye ulaşabilir ya da değiştirebilirsiniz.

<script type="text/javascript">
function islem(){
var icerik = document.getElementById("metin").value;
document.write(icerik);
}
</script>

Metin : <input type="text" id="metin" /> <br />
<input type="submit" id="sonuc" onclick="islem();"/>

Bu örnekte input değerinden gelen veriyi getElementById ile alıp ekrana yazdırdık. Bu örnekte gelen veriyi alıp ekrana yazdırdık şimdide gelen veriyi alıp seçtiğimiz elementin değerini değiştirelim.

<script type="text/javascript">
function islem(){
var icerik = document.getElementById("metin").value;
document.getElementById("yazilacak").value = icerik;
}
</script>

Metin : <input type="text" id="metin" /> <br />
<input type="submit" id="sonuc" onclick="islem();"/> <br/>
İçine Veri Gelecek : <input type="text" id="yazilacak" />

Bu örnekte metin alanına yazılan herhangi bir değer yazilacak id sine sahip olan input değerine yazılacaktır. Buradaki değiştirme boş veriyi doldurma durumu olarak değerlendirilmiştir.

getElementsByName(); Methodu Kullanımı

Bu metot ise aynı id deki gibi işlem görmektedir. Bu sefer id yerine html nesnesinin name özelliğine göre işlem yapmaktadır. Bir önceki örneği name ile değiştirerek yazalım. Yalnız burada farklılık olarak artık Array yapısı işin içine gireceğinden dolayı element yerine elements kullanılacaktır. Ayrıca hangi veri çekileceğini belirtmek için item() değeri de kullanılmalıdır.

<script type="text/javascript">
function islem(){
var icerik = document.getElementsByName("metin").item(0).value;
document.write(icerik);
}
</script>

Metin : <input type="text" name="metin" /> <br />
<input type="submit" id="sonuc" onclick="islem();"/>

Bu şekilde düzenleme yaparak artık id yerine name özelliğini kullanarak işlem yapmasını sağlayabiliriz. İd ile kullanımları aynı olduğundan örnekleri çoğaltmak istemiyorum.

getElementsByTagName(); Methodu Kullanımı

Bu metot diğer iki metot gibi kullanılmaktadır. Fakat burada dikkat edilmesi gerekilen husus, bu metot elementi baz aldığından dolayı aynı dosyada bulunan html tagları olursa işlemlerde bir sorun meydana gelecektir. Böyle bir durum ile karşılaşmamak için seçilen tagın index değerini belirtmemiz gerekmektedir. Yani örnek olarak şöyle bir yapı olmalıdır.

<script type="text/javascript">
function getir(){
var al = document.getElementsByTagName("input").item(0).value;
document.write(al);
}
</script>

Bilgi 1 : <input type="text"/> <br/>
Bilgi 2 : <input type="text"/> <br/>

<button type="submit" onclick="getir()">Bilgileri Al</button>

Bu örnekte özellikle 2 adet input değeri yazdım. Burada yer alan inputlardan üstteki olana yazılan yazı fonksiyon tarafından alınacak ve işlem görecektir. Alttaki inputa yazılan değer ise işlem görmeyecektir. Bunun nedeni fonksiyonda yer alan item(0) değerinin belirtilmesidir. Bu değeri item(1) olarak değiştirirsek o zaman alttaki inputta yer alan değeri çekecek ve işlem görecektir.
- 01.05.2014 / 04:45:42 2

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

Php Dersleri
10:48 Php Dersleri

Php ile Dosya Oluşturma | Touch Functionunu Kullanarak

Kategori: Php Dersleri | 03.05.2013
3:26 Php Dersleri

PDO ile MySQL Veri Silme İşlemi | Delete

Kategori: Php Dersleri | 07.06.2014
17:46 Php Dersleri
16:16 Php Dersleri

PDO ile MySQL Veri Tabanından Veri Çekme

Kategori: Php Dersleri | 03.06.2014

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.