getElementById() veya kimlikİleElemanAl() kalıbını kullanma
Script, aralık vermeden yazılan yazı demekti. Şimdi kalıbın adını aralık vererek yazıp ne anlama geldiğine bakalım:
get: almak
element: eleman
by: ile
identity: kimlik
Kalıpta identity kelimesi kırpılmış, id olarak yazılmıştır.
get element by identity demek, kimlik ile eleman almak demektir.
Bir katmanımız olsun. Bunun için div etiketini kullanıyorduk. Bu katmana "Burada metin var." yazmış olalım.
<div> Burada metin var. </div>
Şimdi buna bir id ekleyelim. id'in değerini yazarken, Türkçe karakter ( ç, ğ, ı, ö, ş, ü ) kullanılmaz. Onun id'i zambak olsun.
<div id="zambak" >Burada metin var. </div>
Sıra geldi script içinde bu katmandan bahsetmeye. Bunun için getElementById yazdıktan sonra parantez içinde, tırnak işaretleri arasına, id'in değerini yazmalıyız.
getElementById('zambak');
şeklinde olacak.
document.getElementById('zambak'); ile dokümandaki zambak kimlikli elemandan bahsettik. Her defasında bunu uzun uzun yazmak yerine e dedik mi artık bu anlaşılsın diye e isimli bir değişkene atayıp şöyle yazdık.
e = document.getElementById('zambak'); e dersem dokümandaki zambak kimlikli elemandan bahsettiğimi anla.
Örnek 1
<script type ="text/javascript">
function mesaj () {
var e = document.getElementById('zambak');
alert(e.outerHTML) ;
alert(e.innerHTML) ;
}
</script>
<body>
<button onclick = "mesaj ()"> mesajı göster </button>
<div id="zambak">Burada metin var. </div>
Butona tıklayarak mesaj kutusunu görün.
e.outerHTML ile dış html yani div'in dışından başlayarak bitinceye kadar olan kodu ifade edilir. Mozilla kullanıcıları bu mesajı göremeyebilir.
<div id="zambak">Burada metin var. </div>
e.innerHTML ile iç html yani div'in içindeki html kodu ifade edilir.
Burada metin var.
Şimdi aynı id başka elemanlara verilince ne oluyor onu görelim. Aşağıdaki örnekte gördüğünüz gibi 3 tane div var ve hepsinde aynı id kullanılmış.
Örnek 2
<script type ="text/javascript">
function goster () {
var e = document.getElementById('karanfil');
alert(e.outerHTML) ;
alert(e.innerHTML) ;
}
</script>
<body>
<button onclick = "goster ()" > hangisi </button>
<div id="karanfil">1.katman </div>
<div id="karanfil">2. katman </div>
<div id="karanfil">3. katman </div>
Butona tıklayınca mesaj kutusu sadece ilk divin dış html kodunu gösterecek. Yani;
<DIV id="karanfil">1.katman</DIV>
Mesaj kutusu sadece ilk divin iç html kodunu gösterecek. Yani;
1.katman
yazılı olacak. Görüldüğü gibi biz istediğimiz kadar başka elemanlara da aynı id'i verelim, ilk elemandan sonrakileri görmezden gelecek. Bu örneği yapmamızın nedeni aynı id'i başka elemana vermenin bir anlam taşımadığını göstermektir.
getElementById kalıbında, elements (elemanlar) değil de element (eleman) kelimesinin kullanılması id'in tek olması gerektiğini bize hatırlatabilir.
Elemanın içine klavyeden bir karakter girildikten sonra bir fonksiyonun çalışmasını sağlayalım.
e.onkeyup = function () { klavyeden karakter girilince fonksiyon çalışsın.
Buraya neler yapılmasını istiyorsan onu yaz.
} Fonksiyon bitti.
Aşağıdaki örnekte, window.onload ile bir fonksiyonun, sayfa açılır açılmaz çalışmasını sağladık. Metin kutusuna bir id verip e isimli değişkene atadık. Genelde değişkene e adını vermemin sebebi, eleman kelimesinin e'si olduğu içindir. Metin kutusuna klavyeden her karakter girildiğinde bir başka fonksiyonun çalışmasını sağladık.
alert( e.type ) ; elemanın tipini verir. text, button, radio, checkbox, password, submit, file, gibi.
alert( e.id ) ; elemanın id'ini verir.
alert( e.tagName ) ; elemanın etiket adını verir. INPUT, DIV, A, TEXTAREA, SPAN,... gibi.
alert( e.name ) ; elemanın adını verir.
alert(e.value) ; elemanın değerini verir.
alert(this.value) ; bu değer veya bunun değeri diye düşünebiliriz. Elemanın değerini verir.
Örnek 3
<script type ="text/javascript">
window.onload = function () {
var e = document.getElementById('papatya');
e.onkeyup = function () {
alert( e.type ) ;
alert( e.id ) ;
alert( e.tagName ) ;
alert( e.name ) ;
alert(e.value) ;
alert(this.value) ;
}
}
</script>
<body>
<p> Metin kutusuna, klavyeden bir karakter giriniz. </p>
<input type ="text" id="papatya" name ="ad" value="" >
Metin kutusuna, klavyeden bir karakter girerek mesaj kutularını görebilirsiniz.
onkeyup yerine onclick, onmouseover, onmouseout, onkeydown, onfocus, onblur, onchange gibi olaylar yazılarak da başka örnekler yapılabilir.
Elemanın yerini, yüksekliğini, genişliğini, içindeki yazıyı, stilini değiştirmeyi deneyelim.
Başlangıçta katmanın, soldan uzaklığı 10px, genişliği ve yüksekliği 100px, arka plan rengi yeşilin bir tonu, yazı rengi kırmızıdır. Katmana tıkladıktan sonra ise soldan uzaklığı 300px, genişlik ve yüksekliği 200px, arka plan rengi sarı, yazı rengi ise mavi olacaktır. Katmanda yazan yazı da değişmiştir. Artık katmanda "Nereden nereye" yazmaktadır. Ne de olsa eski yerinde olmayacak.
Örnek 4
<script type="text/javascript">
function git () {
var e = document.getElementById('katman');
e.style.position = "relative";
e.style.left = "300";
e.style.width = "200";
e.style.height = "200";
e.style.backgroundColor = "yellow";
e.style.color = "blue";
e.innerHTML = "Nereden nereye."
}
</script>
<body>
<div id="katman"
style="position:relative; left: 10px; width:100px; height:100px; background-color:lime; color:red"
onclick="git()">
Bana tıkla. Yerim, genişliğim, yüksekliğim değişecek.</div>
Sayfanızdaki katmana tıklayarak yerini değiştirebilirsiniz.
İframenin içindeki sayfayı değiştirebiliriz. Başlangıçta iframe içinde javascript örnekleri var iken butona tıkladıktan sonra css örnekleri var olacak.
e.src= "http://www.w3schools.com/css/css_examples.asp" ;
satırı ile iframe içindeki sayfayı değiştirdik.
İframenin id'ini gönül isterdi ki çerçeve yazabileyim ama Türkçe karakter kullanamayacağım için cerceve yazmayı uygun gördüm.
Örnek 5
<script type="text/javascript">
function iframeDegis(){
var e = document.getElementById('cerceve');
e.src= "http://www.w3schools.com/css/css_examples.asp" ;
}
</script>
<body>
<button onclick="iframeDegis()" > sayfayı değiştir </button>
<iframe src="http://www.w3schools.com/js/js_examples.asp" width="500" height="300" id="cerceve"></iframe>
Sayfanızda butona tıklayarak iframe içindeki sayfayı değiştirebilirsiniz.
Butona basınca iframe içine swf dosyası, resim dosyası yerleşmesini de sağlayabilirsiniz.
Resim değiştirme
Şimdi de resim değiştirelim. Başlangıçta katmanda olan resim, butona tıkladıktan sonra değişecek. Bu değişmeyi
e.src ="buraya yeni resmin adresini yazmak gerekiyor" ;
satırı ile yapıyoruz.
Örnek 6
<script type="text/javascript">
function resimDegis(){
var e = document.getElementById('il');
e.src= "istanbul.jpg" ;
}
</script>
<body>
<button onclick="resimDegis()" > resmi değiştir </button>
<img width="100" height="75" src="istanbul2.jpg" id="il" alt="Güzel İstanbul" >
Sayfanızda butona tıklayarak resmi değiştirin.
Bir resme tıklayınca, resmin genişlik ve yüksekliğini değiştirelim. height ile yükseklik, width ile genişlik değerini değiştireceğiz.
e.width ile genişliğini,
e.height ile yüksekliğini ifade edeceğiz.
Örnek 7
<script type="text/javascript">
function buyu (){
var e = document.getElementById("lale");
e.width = 132 ;
e.height = 200 ;
}
</script>
<body>
<img id="lale" src="lale.jpg" width="66" height="132" onclick="buyu ()" alt="tıkla bana" >
Sayfanızda resme tıklayarak resmin genişlik ve yüksekliğini değiştirebilirsiniz.
Swf dosyası yerleştirme
Butona tıklayınca, katmana bir oyun yerleştirelim. 3 tane oyunumuz var. Bu 3 oyunun linkini bir dizi içinde gösterdik.
var dizi = [ eleman0, eleman1, eleman2 ,... elemanN] diye devam eder. Bunun içine linkleri yazalım. Her elemanı tırnak işaretleri arasına yazacağız ve elemanlar arasına virgül koyacağız. Son elemandan sonra virgül konulmayacak. Kendi oyun dosyalarınızın adını, adresini yazın.
var dizi = [
'yumurta.swf',
'altigen.swf',
'kardanadam.swf'
] ;
var e = document.getElementById('oyun'); satırı ile oyunu yerleştireceğimiz katmanı tanımladık.
e.innerHTML = '<embed src=' + ' " ' + dizi[numara] + ' " ' + ' width ="600" height ="410" > '
Yukarıdaki satır ile katmanın iç html'sine gömme yöntemi ile dosyamıza yerleştirdik. Tırnak işaretleri arasına yazıyoruz. Araya + koyarak birleştirebiliriz. Eğer bir değer yazıyorsak o zaman tırnak işareti kullanmaya gerek yok. Örneğimizde dizi[numara] bir değer olduğu için tek tırnak işaretleri arasına yazılmadı. Diğerleri tek tırnak işaretleri arasına yazılıp + ile birleştirildi.
Böyle de yazabilirdik.
e.innerHTML = '<embed src= " ' + dizi[numara] + ' " width ="600" height ="410" > '
dizi[numara] ile dizinin 0., 1., 2. elemanlarını ifade edeceğiz..
<button onclick="oyna ('0')" > yumurta süsle </button>
<button onclick="oyna ('1')" > altıgen oyunu </button>
<button onclick="oyna ('2')" > kardan adam oyunu </button>
Hangi butona tıklarsan o butonun yanındaki "oyna ('dizinin işte buraya yazılan sırasındaki elemanını ') " ifade etmiş olacağız.
dizi[0] ile yumurta oyunu
dizi[1] ile altıgen oyunu
dizi[2] ile kardan adam oyunu belirtilmiş olur.
Örnek 8
<script type="text/javascript">
function oyna (numara){
var e = document.getElementById('oyun');
var dizi = [
'yumurta.swf',
'altigen.swf',
'kardanadam.swf'
];
e.innerHTML = '<embed src=' + ' " ' + dizi[numara] + ' " ' + ' width ="600" height ="410" >'
}
</script>
<body>
<div id="oyun"></div>
<p> <button onclick="oyna ('0')" > yumurta süsle </button></p>
<p> <button onclick="oyna ('1')" > altıgen oyunu </button></p>
<p> <button onclick="oyna ('2')" > kardan adam oyunu </button></p>
Sayfanızdaki butonlara tıklayarak oyunu oynayabilirsiniz.
Select Elemanı
Şimdi ise bir select elemanının optionlarının sayısını, seçilen optionun değerini, innerHTML yazısını, ve sayfayı seçilen optionun değerine yönlendirmeyi görelim. Select'e bir id verilmiş.
var e = document.getElementById("il"); il kimliğini taşıyan elemanı ifade etmek için e isimli bir değişkene atadık. e dersem il id'ini taşıyan select'i anla.
alert(e.length) ; Bu select elemanının, optionlarının sayısını verir. Örneğimizde optionların sayısı 3'tür.
alert(e.options.length) ; Bu da select içindeki optionların sayısını verecektir. Örneğimizde optionların sayısı 3'tür.
alert(e.selectedIndex) ; Select elemanı içinden seçilen optionun sırasını verecek. Bu bir sayı verecek. Select elemanı içindeki optionlar 0'dan başlayarak 1, 2, diye artarak devam ederler. İlk option 0, ikinci option 1, üçüncü option 2 ile gösterilecektir.
alert(e.options[e.selectedIndex].value) ; Bu satır seçilen optionun değerini verir. Bunlar linklerden biridir.
alert(e.options[e.selectedIndex].text) ; Optionların görünen yazılarını verecektir. ankara, istanbul, izmir olabilir. innerHTML de aynı sonucu verecek. İki şekilde de yazılabilir.
alert(e.options[e.selectedIndex].innerHTML) ; Bu satır seçilen optionun iç html kodunu verir. Bu görünen yazıdır. ankara, istanbul, izmir olabilir.
location.href = e.options[e.selectedIndex].value ; Gönderilen sayfa, elemanın seçilen optionunun değeri olacaktır.
Örnek 9
<script type="text/javascript">
function bul () {
var e = document.getElementById("il");
alert(e.length) ;
alert(e.options.length) ;
alert(e.selectedIndex) ;
alert(e.options[e.selectedIndex].value) ;
alert(e.options[e.selectedIndex].text) ;
alert(e.options[e.selectedIndex].innerHTML) ;
location.href = e.options[e.selectedIndex].value ;
}
</script>
<select id="il" onchange="bul ()">
<option value = "http://www.istanbul.gov.tr/Default.aspx?pid=321">istanbul</option>
<option value = "http://www.ankara.edu.tr/">ankara</option>
<option value = "http://www.izmirturizm.gov.tr/">izmir</option>
</select>
Sayfanızda select'ten seçim yapınca mesaj kutuları gelecek ve başka sayfaya gideceksiniz.
getElementById() kalıbını getElementsByTagName() kalıbı ile birlikte kullanma
getElementsByTagName() ile kastedilen etiketAdıİleElemanlarAl() yeni etiket adı ile elemanlar almaktır. Bununla ilgili bir örnek yapalım.
Etiket adları nelerdir? span, div, h1, h2, h3, h4, h5, p, div, input, button, a,...
Katmandaki a etiketini taşıyan elemanların iç html kodundaki "link" yazısının rengini değiştirelim. Katmandaki ilk a etiketi taşıyan eleman 0., ondan sonraki 1., ondan sonraki 2., diye artarak devam edecektir.
var e = document.getElementById("menu"); id'i menu olan katmanı e değişkenine atadık. e dersem id'i menu olan katmanı anla.
var o = e.getElementsByTagName("a"); id'i menu olan katmandaki a etiketini taşıyan elemanı o değişkenine atadık. o dersem id'i menu olan katmandaki a etiketi taşıyan bir elemandan bahsettiğimi anla.
alert(o.length) ; id'i menu olan katmanda, a etiketi taşıyan elemanların sayısını verir. Örneğimizde bu sayı 3 olacaktır.
alert(o[0].href); id'i menu olan katmanda, a etiketi taşıyan 0. elemanın, href değerini verir.
o[0].style.color = "lime"; id'i menu olan katmanda, a etiketi taşıyan 0. elemanın yazı rengi yeşilin bir tonu olsun.
alert(o[1].href); id'i menu olan katmanda, a etiketi taşıyan 1. elemanın, href değerini verir.
o[1].style.color = "red"; id'i menu olan katmanda, a etiketi taşıyan 1. elemanın yazı rengi kırmızı olsun.
alert(o[2].href); id'i menu olan katmanda, a etiketi taşıyan 2. elemanın, href değerini verir.
o[2].style.color = "yellow"; id'i menu olan katmanda, a etiketi taşıyan 2. elemanın yazı rengi sarı olsun.
Örnek 10
<script type = "text/javascript">
function renkli () {
var e = document.getElementById("menu");
var o = e.getElementsByTagName("a");
alert(o.length) ;
alert(o[0].href);
o[0].style.color = "lime";
alert(o[1].href);
o[1].style.color = "red";
alert(o[2].href);
o[2].style.color = "yellow";
}
</script>
<body>
<button onclick = "renkli ()" > tıkla bana </button>
<div id="menu" >
<p><a href ="http://www.pageresource.com/jscript/" > link</a></p>
<p><a href ="http://www.javascriptkit.com/" > link</a></p>
<p><a href ="http://javascript.internet.com/" > link</a></p>
</div>
Sayfanızda butona tıklayın. Linklerin rengi, teker teker değişecektir.
while döngüsü ile bir örnek
function onayla () { onayla isimli fonksiyonu yazmaya başlıyoruz.
var e = document.getElementById("liste"); Bu satır ile id'i liste olan katmandan bahsettik.
var o = e.getElementsByTagName("input"); o isimli değişkene, id'i liste olan katmandaki input etiketini taşıyan elemanı atadık. Katmandaki input etiketini taşıyan ilk eleman 0. eleman, ondan sonraki 1. eleman, ondan sonraki 2. eleman diye artarak devam edecektir. Kaçıncı elemandan bahsettiğimizi while döngüsünde belirteceğiz.
alert(o.length) ; Bu satır id'i liste olan katmandaki input etiketini taşıyan elemanların sayısını verecektir. Örneğimizde mesaj kutusu 4 diyecektir.
var i = 0; i isimli değişkenin değeri 0'dır.
while( i < o.length) { Bu satır ile i değişkeni, input etiketi taşıyanların sayısından küçük iken yapılacaklar belirtilecek. Yani i 4'ten küçük iken neler yapılacak onu yazacağız.
alert(i) ; Mesaj kutusu i değişkeninin değerini söyleyecek.
o[i].checked = true; Bu satır ile id'i liste olan katmandaki input etiketi taşıyan kaçıncı eleman olduğunu belirteceğiz. i 0 iken, katmandaki ilk input etiketli elemandan bahsediyoruz. i artıp 1 olunca, katmandaki ikinci sıradaki elemandan bahsediyoruz. i 2 olunca, katmandaki üçüncü sıradaki elemandan bahsediyoruz. i 3 olduğunda ise katmandaki dördüncü sıradaki elemandan bahsediyoruz. Kendisinden bahsedilen eleman işaretlenecektir.
i++ ; i değişkeninin değerini 1 sayı artır.
} while döngüsü kapatıldı.
} fonksiyon bitti.
Örnek 11
<script type="text/javascript">
function onayla () {
var e = document.getElementById("liste");
var o = e.getElementsByTagName("input");
alert(o.length) ;
var i = 0;
while(i < o.length){
alert(i) ;
o[i].checked = true;
i++ ;
}
}
</script>
<body>
<button onclick = "onayla ()" > onay kutularını işaretle </button >
<div id="liste" onclick = "onayla ()" >
<p><input type = "checkbox" ></p>
<p><input type = "checkbox" ></p>
<p><input type = "checkbox" ></p>
<p><input type = "checkbox" ></p>
</div>
Sayfanızda butona tıkladığınızda fonksiyon çalışacak ve onay kutuları işaretlenecek.
Son olarak; getElementById() kalıbı tüm tarayıcılarda çalışarak yüzünüzü güldürecektir.
Not: Yukarıdaki kodları not pad a dosyaAdi.uzantısı şeklinde kaydetmek gerekiyor. DosyaAdi yerine istediğiniz adı yazabilirsiniz. Uzantısı yerine ise htm veya html yazacaksınız. Dosya adı ile uzantısı arasında “.” Nokta olacak. Mesela; onay.htm gibi.
|
kaynak=
