Document Nesnesi
JavaScript ile web sayfamızdaki etiketlerin ve form elemanlarının içeriklerine-değerlerine ulaşmak, bunlarla işlem yapmak ve değiştirmek isteyebiliriz.
Özellikle form elemanlarına ziyaretçiler tarafından girilen bilgilere ulaşmaya sıkça ihtiyaç duyarız.
JavaScript'te çeşitli metotlar kullanarak html etiketlerinin içerik ve özelliklerine ulaşabilir ve istersek bu özellikleri değiştirebiliriz.
Bu metotlardan bazıları şunlardır.
getElementById Metodu
Web sayfasındaki html etiketlerine ulaşmak için en çok kullanılan metotlardan biridir. Ulaşılmak istenen html nesnesinin id'si belirtilerek, ilgili elemana ulaşmamızı sağlar.
Örneğin k1 isimli metin kutusunun içindeki değere şu şekilde ulaşabiliriz:
var sayi = document.getElementById("k1").value;
Benzer şekilde istenen elemanın stil özellikleri, innerHtml özelliği gibi birçok özelliğine erişilerek değişiklik yapılabilir.
innerHTML Özelliği
Body kısmında yer alan bir html etiketinin içeriğini değiştirmemizi sağlar.
Örnek: Sayfamızda id'si "sonuc" olan bir p etiketi bulunsun. Bu etiket içerisine birşeyler yazdırmak istersek şu satırı kullanabiliriz:
document.getElementById("sonuc").innerHTML = "Teşekkürler. Mesajınız Alındı.";
innerHTML özelliği ile sayfanın istenen yerine Html kodları da ekleyebilriz.
document.getElementById("sonuc").innerHTML = "<b>Teşekkürler.</b> Mesajınız Alındı.";
JavaScript ile sayfaya html kodları eklerken, tırnak işaretlerini karıştırırsak sorun yaşarız. Bu nedenle çift tırnak içerisinde tekrar tırnak işareti kullanmamız gerekirse, içteki tırnak işaretlerini tek tırnak olarak yazmalıyız.
Hatırlatma: JavaScript büyük küçük harfe duyarlı bir dildir. Ayrıca html'de olduğu gibi komut satırlarını yazarken her istediğimiz yerde alt satıra geçemeyiz. JavaScript komut satırları nokta (.) ve eşittir (=) gibi karakterlerden sonra bölünebilmekteyken, komutlar, tırnak içleri ve benzeri ifadeler bölünerek alta geçilmemelidir.
Örnek:
document.getElementById("sonuc"). innerHTML = "<table width='150' border='0' cellspacing='0' cellpadding='3'> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr></table>";
getElementsByClassName Metodu
Id özelliği her etiket için farklı olması gereken bir özelliktir. Bu durumda getElementById metodu ile aynı anda birden fazla elemana ulaşmamız mümkün değildir.
Class özelliği ise sayfada bir çok etikete uygulanmış olabilir. Sayfada aynı class'ın uygulandığı tüm elemanlar ile işlem yapmak istersek getElementsByClassName metodunu kullanabiliriz.
Bu metotta parantez içinde aradığımız class adı yazılır, devamında ise köşeli parantez içerisinde o class'a sahip elemanlar içindeki kaçıncı elemana ulaşacağımız belirtilir.
Örneğin;
document.getElementsByClassName("yazi")[0].style.color="red";
Yukarıdaki satırda .yazi class'ı uygulanmış ilk elemana ulaşılacaktır. İndex numaraları her zaman 0'dan başlar.
Sayfada aynı class'ın uygulandığı tüm elemanlara ulaşmak ve işlem yapmak istersek bir döngü kullanabiliriz.
Örnek: Aşağıdaki örnekte .yazi class'ı uygulanmış tüm elemanların metin rengi değiştirilmiştir.
function degistir() {
var eleman = document.getElementsByClassName("yazi");
var i;
for (i = 0; i < eleman.length; i++) {
eleman[i].style.color = "red";
}
}
getElementsByName Metodu
Şayet id'ye göre değil de name özelliğine göre bir html nesnesine ulaşmak istersek getElementsByName metodunu kullanabiliriz. Kullanımı bir üstte anlatılan getElementsByClassName metoduna benzer. Ulaşılmak istenilen elemanın index numarasının da belirtilmesi gerekir.
Örnek:
var a = document.getElementsByName("kutu")[0].value;
Köşeli parantez içinde belirttiğimiz index numarası, o sayfada belirttiğimiz name özelliğine sahip elemanlardan kaçıncı sıradakinin alınacağını belirtmiş olur. İndeks numarası 0'dan başlar.
Bu örnekte name özelliği "kutu" olan ilk html elemanına ulaşılacaktır.
Form ve Nesne Adları Kullanılarak Form Elemanlarının Değerine Ulaşma
Sayfamızdaki html formu içindeki elemanların değerlerine şu şekilde de ulaşabiliriz.
Örnek:
Aşağıdaki gibi bir html formumuz olsun:
<form name="form1">
<input name="kutu1" type="text" />
<button onclick="tikla()" value="Hesapla">Hesapla</button>
</form>
Formun adı form1, ulaşmak istediğimiz metin kutusunun adı ise kutu1 olduğu için;
var a=document.form1.kutu1.value;
şeklinde kutunun değerine ulaşabiliriz.
Write Metodu
Sayfaya metin ya da Html kodlarını sayfaya yazdırmamızı sağlar.
document.write("Hoş geldiniz, Sayın <b>Aslı</b>");
javascript getelementsbyclassname, get elements by class, javascript ile form elemanının değerine ulaşma, html etiketlerinin içeriklerini ve değerlerini değiştirme, id göre istenen etikete ulaşma, javascript kutudan değer alma
KONU İLE İLGİLİ ÖRNEKLER
|
Aynı class'ın uygulandığı elemanlara ulaşma ve özelliklerini değiştirme
|
Kendin Dene
|
Örnekte aynı class'a sahip etiketlerin metin rengi değiştirilmektedir.
Kendin Dene butonuna tıkla, kodları incele, değiştir, sonucu gör...
Kendin Dene butonuna tıkla, kodları incele, değiştir, sonucu gör...
Kendin Dene butonuna tıkla, kodları incele, değiştir, sonucu gör...
Kendin Dene butonuna tıklayarak örneğin kodlarını görebilir, değiştirebilir ve sonucu görebilirsin.
|
JavaScript ile Html Elemanlarının Stil Özelliklerini Değiştirme
|
|
yazi isimli p etiketinin metin rengini değiştirmek için:
document.getElementById("yazi").style.color ="red";
yazi isimli p etiketinin kenarlık özelliklerini değiştirmek için:
document.getElementById("yazi").style.border ="1px solid red";
yazi isimli p etiketinin genişliğini değiştirmek için:
document.getElementById("yazi").style.width ="200px";
Örnekler çoğaltılabilir.
19038 kez okundu.