JS Bilgileri -11- JavaScript Document Object Model (DOM)
Merhaba, DOM (Document Object Model), HTML, XML gibi belgeler ile diğer programlama veya script dilleri arasında iletişim sağlayan bir arabirimdir.
HTML’de bulunan her öğenin DOM tarafında bir karşılığı bulunur. Sayfanın tamamına veya belirli bir kontrole erişmek mümkündür.
Ana öğeler – çocuk öğeler gibi hiyerarşik yapıya aşinayız. Bir HTML belgesinde ana kök `etiketleridir. Peşinden ve etiketleri gelir ve bunlar <html>’in çocuklarıdır. (child element) etiketi <head> etiketinin çocuğu, <html> etiketininse torunudur. Veya <body> içerisinde kullanacağımız bir
##
veya
`etiketleri de <body> etiketinin çocuğu ve yine <html> etiketinin torunlarıdır.
Document Özellikleri
Document nesnesi, web sayfanızı temsil eder ve sayfanızdaki diğer tüm nesnelerin sahibidir. HTML sayfasındaki herhangi bir öğeye erişmek istiyorsanız, her zaman document nesnesine erişmeyle başlamanız gerekir. Örnek kullanım:
##### write Özelliği
Sayfa içeriğini değiştirelim:
```
Merhaba!
Sayfa İçeriğini Değiştir
function icerigidegistir() {
document.write("
Merhaba Dünya!
Bu İçerik artık değişti.
");
}
```
```
```
Çok küçük bir fonksiyon ile düğmeye tıklayınca sayfa içeriğini tamamen değiştirmesini söyledik. Burada doğrudan document’e etki ettiğimiz için sayfa içeriğimiz ve sayfamızda bulunan tüm öğeler tamamen değişti.
##### body Özelliği
Bu özelliği kullanarak <body> öğesi içerisindeki tüm öğelere ulaşabilir ve alt özellikler ile müdahalelerde bulunabiliriz.
##### innerHTML Özelliği
Bu özelliği kullanarak tüm body içeriğini veya belirli bir öğenin içeriğini değiştirebiliriz.
```
Buraya tıkla ve içeriği değiştir.
function degistir() {
document.body.innerHTML = "Tüm body içeriği değişti.";
}
```
Örneğimizde doğrudan <body> öğesinin içeriğini değiştirmek için bir document.body.innerHTML kullandık. Bu sebeple başlangıçta <p> </p> etiketleri arasında olan içeriğimiz değiştiğinde <p></p> etiketleri de tamamen kalkarak değişti. Çünkü scripte <body> içerisindeki her şeyi sil yerine ‘Tüm body içeriği değişti yaz.’ dedik. Eğer .body özelliği yerine farklı bir özellik kullansaydık, innerHTML ile sadece seçtiğimiz öğenin içeriği değişirdi.
##### id Özelliği
Belirli bir etiketimize bir ID tanımlamak için kullanırız. Bu ID değerini daha sonra kullanmamız mümkün olur. Biz burada body içerisinde bir ID tanımlaması yapacağız.
```
document.body.id = 'test';
```
Scriptimize sadece bu tanımlamayı yaparak otomatik olarak <body> etiketimize ‘test’ ID’si tanımlamış olduk.
##### firstChild , firstElementChild , lastChild , lastElementChild Özelliği
Bu özelliği .body ile kullanarak <body> öğemizin ilk alt (çocuk/child) öğesini seçmiş oluruz.
```
Örnek Liste:
- Kahve
- Çay
Değiştir düğmesine basarak body öğemizin ilk child öğesi olan 'Örnek Liste:' paragraf öğemizi değiştireceğiz.
Değiştir
function fonksiyonum() {
document.body.firstElementChild.innerHTML = "
Alışveriş Listesi
";
}
```
firstElementChild ve firstChild arasındaki fark, firstChild öğesinin ilk alt düğümü bir öğe düğümü, bir metin düğümü veya bir yorum düğümü olarak döndürmesidir. firstElementChild ilk alt düğümü bir öğe düğümü olarak döndürür (boşluk, metin ve yorumları yok sayar).
lastChild ve lastElementChild özellikleri de benzer şekilde çalışır fakat son öğeyi hedefler.
##### nodeName ve tagName Özellikleri
Bu iki özellik hedeflenen öğenin etiket ismini verir. İkisi arasındaki fark tagName doğrudan etiket ismini verirken nodeName ile etiket ismi, özelliği, içeriği, yorumları da verir.
```
alert(document.body.nodeName);
```
##### childNodes Özelliği
Bu özellik öğenin alt öğelerini (child elements) verir.
```
Düğmeye tıklayarak body öğesinin bütün child öğelerini görebilirsiniz.
Düğme
Not: Öğelerin arasındaki boşluklar birer metin (text) olarak kabul edilir. Ve metinleri de bir öğe olarak kabul eder.
function fonksiyonum() {
var c = document.body.childNodes;
var txt = "";
var i;
for (i = 0; i
```
##### childElementCount Özelliği
Bu özellik öğenin kaç tane alt öğesi (child element) olduğunu gösterir. Yalnızca etiketleri sayar.
```
Düğmeye tıklayarak body öğesinin bütün child öğelerini görebilirsiniz.
Düğme
Not: Öğelerin arasındaki boşluklar birer metin (text) olarak kabul edilir. Ve metinleri de bir öğe olarak kabul eder.
function fonksiyonum() {
var txt = document.body.childElementCount;
document.getElementById("test").innerHTML = txt;
}
```
##### hasChildNodes Özelliği
Öğenin alt öğelerinin olup olmadığını kontrol eder. Eğer alt öğeye sahipse ‘true’ değilse ‘false’ değerini döndürür.
```
Düğmeye tıklayarak body öğesinin bütün child öğelerini görebilirsiniz.
Düğme
Not: Öğelerin arasındaki boşluklar birer metin (text) olarak kabul edilir. Ve metinleri de bir öğe olarak kabul eder.
function fonksiyonum() {
var txt = document.body.hasChildNodes();
document.getElementById("test").innerHTML = txt;
}
```
##### hasAttribute(‘ozellik’) ve hasAttributes Özellikleri
hasAttributes öğenin herhangi bir özellik içerip içermediğini kontrol eder, hasAttribute(‘ozellik’) ise belirli bir özelliğin varlığını kontrol eder.
```
Düğmeye tıklayarak body öğesinin bütün child öğelerini görebilirsiniz.
Düğme
Not: Öğelerin arasındaki boşluklar birer metin (text) olarak kabul edilir. Ve metinleri de bir öğe olarak kabul eder.
function fonksiyonum() {
var txt = document.body.hasAttributes();
document.getElementById("test").innerHTML = txt;
var txt2 = document.body.hasAttribute('class');
document.getElementById("test2").innerHTML = txt2;
}
```
Burada <body> öğesine yalnızca ID özelliği verdik. Scriptimizdeki ilk sorduğumuz hasAttributes() <body> etiketimiz bir özelliğe (ID) sahip olduğu için true döndü. Ancak ikinci sorduğumuz hasAttribute(‘class’) <body> etiketimiz bir class özelliğine sahip olmadığı için false döndü.
##### className Özelliği
Bu özelliği 2 şekilde kullanmak mümkün. Bu özelliği kullanarak bir öğeye class tanımlayabilirsiniz veya bir öğenin sahip olduğu class ismini öğrenebilirsiniz.
```
.stilim {
width: 300px;
background-color: rebeccapurple;
text-align: center;
font-size: 25px;
color: white;
}
Click the button to set a class for div.
I am a DIV element
Stil Ata
Stil Adını Ver
function stilata() {
document.getElementById("test").className = "stilim";
}
function stiladver() {
var x = document.getElementById("test").className;
alert(x);
}
```
##### getElementsByTagName ve getElementsByClassName Özellikleri
Öğeleri etiket isimleriyle almak için getElementsByTagName , class isimleriyle almak için getElementsByClassName kullanırız.
```
- Kahve
- Çay
İlk liste öğesini değiştirmek için düğmeye tıklayın.
Tıkla
function fonksiyonum() {
var list = document.getElementsByClassName("liste")[0];
list.getElementsByTagName("LI")[0].innerHTML = "Süt";
}
```
Bu örnekte ikisini birden kullandık. ‘liste’ classına sahip ilk öğeyi seçmek için getElementsByClassName(‘liste’)[0] kullandık. sonra listenin altındaki <li> etiketine sahip ilk öğeyi seçmek için getElementsByTagName(‘li’)[0] kullandık.
##### insertBefore Özelliği
Bir öğeyi belirli başka bir öğenin öncesine eklemek için kullanırız. Bu özelliği örneklerken createElement , createTextNode , appendChild , getElementById özelliklerini de kullanarak detaylı bir örnekleme yapacağız.
- createElement(‘etiket’): Bir etiket oluşturmak için kullanırız.
- createTextNode(‘metin’): Metin içeriği oluşturmak için kullanırız.
- appendChild: Oluşturduğumuz öğeyi eklemek için kullanırız.
- getElementById: Belirli bir öğeyi ID değeriyle seçmek için kullanırız.
```
- Kahve
- Çay
Listeye bir öğe eklemek için düğmeye tıklayın.
Tıklayın
function fonksiyonum() {
var yeniOge = document.createElement("LI");
var textnode = document.createTextNode("Süt");
yeniOge.appendChild(textnode);
var liste = document.getElementById("listem");
liste.insertBefore(yeniOge, liste.childNodes[0]);
}
```
Örneği inceleyecek olursak; Öncelikle createElement ile bir <li> etiketi oluşturduk. Daha sonra createTextNode ile içeriği ‘Süt’ olan bir metin oluşturduk. Ardından appendChild kullanarak ‘Süt’ metnini <li> etiketinin içine yerleştirdik. Daha sonra listemizi ID’sini seçerek getElementById kullanarak seçtik. Ve son olarak insertBefore kullanarak listenin ilk öğesinden önce (liste.childNodes[0]) olacak şekilde yeni öğemizi ekledik.
##### getAttributeNode Özelliği
Bir öğenin sahip olduğu özelliklere erişmek veya müdahale etmek için bu özelliği kullanırız.
```
.renkata {
color: red;
}
.ikincirenk {
color: green;
}
Merhaba
h1 öğesinin class özelliğinin değerini almak için düğmeye tıklayın.
Değeri Gör
h1 öğesinin class özelliğinin değerini değiştirmek için düğmeye tıklayın.
Değeri Değiştir
function fonksiyonum() {
var elmnt = document.getElementsByTagName("H1")[0];
var attr = elmnt.getAttributeNode("class").value;
document.getElementById("test").innerHTML = attr;
}
function fonksiyonum2() {
var elmnt = document.getElementsByTagName("H1")[0];
elmnt.getAttributeNode("class").value = "ikincirenk";
}
```
##### removeChild Özelliği
Bu özellik bir öğenin alt öğelerinden istenilen bir tanesini kaldırmak için kullanılır.
```
- Kahve
- Çay
- Süt
Listedeki ilk öğeyi kaldırmak için düğmeye tıklayın.
Kaldır
function myFunction() {
var liste = document.getElementById("listem");
liste.removeChild(liste.childNodes[0]);
}
```
Liste öğelerini örnekte özellikle boşluksuz yazdık. Çünkü removeChild boşlukları da bir öğe kabul eder ve örneğimizde boşluk bıraksaydık düğmeye ilk tıkladığımızda boşluğu kaldırmış olurdu. Bir öğeyi silmek için aynı zamanda kaldıracağımız öğeyi seçip remove() özelliğini de kullanabiliriz.
##### style Özelliği
Bu özellik öğenin stil özelliklerine müdahale etmek için kullanılır ve içerisinde bir çok alt özellik barındırır.
```
Başlığın Rengini Değiştirelim
Başlığın rengini kırmızı yapmak için düğmeye tıklayın.
Tıkla
function fonksiyonum() {
document.getElementById("basligim").style.color = "red";
}
```
Bu örnekte style.color özelliğini kullandık. Diğer CSS özelliklerini de özellik ismiyle birlikte JavaScript’te style özelliği kullanarak ekleyebilirsiniz. CSS Özellikleri