Javascript Html Dom Nesneleri (getElementById, InnerHtml)

JAVASCRIPT DOCUMENT (DOM) NESNESİ

Javascript ile bir html web sayfasındaki etiketlere form elamanlarına girilen değerlere ulaşabilir ve oraya girilen verilerle işlem yapabilir veya değiştirebiliriz.

Javascipt form elemanlarına site ziyaretçiler tarafından girilen bilgileri ulaşmak ve verileri çeşitli matematiksel işlemlere sokulmak istenebilir. Javascript’te bazı metotlar kullanmak suretiyle html etiketlerin içeriklerine ulaşabiliriz.

getElementyById metodu

Web sayfasındaki herhangi bir HTML etiketine ulaşmak için en sık kullanılan metottur. Ulaşmak istediğimizde html nesnenin id’sini belirtmemiz gerekmektedir. 

Örneğin id’si sayi olan bir metin kutusuna girilen veriye ulaşmak için şu satırı yazmamız gerekiyor.

var sayi = document.getElementById("sayi1").value;

getElementsByClassName Metodu

Html belgesinde belirtilen sınıf adı ile öğelere ulaşmayı sağlar. Id’den farkı ise id aynı andan birden fazla elemana ulaşılamaz fakat class özelliği ile aynı anda bir çok etikete ulaşılmaktadır.

Class=”sayi” olan elementi seçmek için;

var sayi = document.getElementByClassName("sayi1");

class=”yildiz” lan tüm öğelerin arka plan rengini sarı yapalım.

var a = document.getElementByClassName("yildiz");
for (var i=0;i < a.length;i++)
a[i].style.backgroundColor=”yellow”;

getElementsByName Metodu

Id iledeğil de name özelliği ile bir html nesnesine ulaşmak istersek getElementsByName metodunu kullanmamız gerekir.

Class=”sayi” olan elementi seçmek için;

var sayi = document.getElementByName("sayi1");

innerHTML Özelliği

Herhangi bir html etiketinin içeriğini değiştirmek için kullanılır. Örneğin id’si sonuç olan bir metin kutusuna “Hoşgeldiniz” yazısını görüntületebiliriz.

document.getElementById("sonuc").innerHTML = " Hoşgeldiniz...";

Form, Nesne Adlarını Kullanarak Elemanlara Ulaşma

Web sayfamızdaki html formun elemanlarına ulaşmak için kullanılır.

<form name="form_adi">
<input name="sayi1" type="number" />
<button onclick="hesapla()" value="Hesapla">Hesapla</button>
</form>

Formun içindeki metin kutusuna ulaşmak için;

var x=document.form_adi.sayi1.value;

olarak yazılmalıdır.

Javascript İle Html Elemanların Style Özelliklerini Değiştirme

deneme isimli p tagının yazı rengini mavi yapmak için ;

document.getElementById("deneme ").style.color ="blue";

deneme adında p etiketinin yazı arka plan rengini değiştirmek için;

document.getElementById("deneme ").style. backgroundColor ="grey”;

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir