Document Nesnesi
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
Ulaşılmak istenen Html nesnesinin id’si belirtilerek, ilgili elemana ulaşılır.
Örneğin sayi1 isimli metin kutusunun içindeki değere şu şekilde ulaşabiliriz:
|
1 |
var sayi = document.getElementById("sayi1").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 “mesaj” olan bir p etiketi bulunsun. Bu etiket içerisine bir şeyler yazdırmak istersek şu satırı kullanabiliriz:
|
1 |
document.getElementById("mesaj").innerHTML = "Teşekkürler..."; |
innerHTML özelliği ile sayfanın istenen yerine Html kodları da ekleyebilriz.
|
1 |
document.getElementById("mesaj").innerHTML = "Ankete katıldığınız için <b>Teşekkürler.</b> "; |
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şmak 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;
|
1 |
document.getElementsByClassName("yazi")[0].style.color="red"; |
Yukarıdaki satırda .yazi class’ı uygulanmış ilk elemana ulaşılacaktır. (index 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ü kullanabilir.
Örnek: Aşağıdaki örnekte .yazi class’ı uygulanmış tüm elemanların metin rengi değiştirilmiştir.
|
1 2 3 4 5 6 7 |
function degistir() { var eleman = document.getElementsByClassName("yazi"); var i; for (i = 0; i < eleman.length; i++) { eleman[i].style.color = "red"; } } |
getElementsByName Metodu
Name özelliğine göre bir Html nesnesine ulaşmak istersek getElementsByName metodu kullanabilir. Kullanımı bir üstte anlatılan getElementsByClassName metoduna benzer. Ulaşılmak istenilen elemanın index numarasının da belirtilmesi gerekir.
Örnek:
|
1 |
var a = document.getElementsByName("mesajkutusu")[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. Bu örnekte name özelliği “mesajkutusu” 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:
|
1 2 3 4 |
<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;
|
1 |
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.
|
1 |
document.write("Hoş geldiniz, Sayın <b>Admin</b>"); |
