JavaScript HTML DOM

1. HTML DOM-NESNELERE ERİŞMEK
Javascript ile HTML nesneleri üzerinde işlem uygulamak için öncelikle o nesnelere erişmek gerekiyor. Nesnelere erişmek için kullanabileceğimiz bazı yöntemler vardır:

• “id” değerine göre nesneleri bulabilirsiniz.
• Nesnenin adına göre nesneleri bulabilirsiniz.
• “class” değerine göre nesneleri bulabilirsiniz.
• “name” değerine göre nesneleri bulabilirsiniz.
• CSS seçicisine göre nesneleri bulabilirsiniz.
• HTML nesnelerini liste şeklinde alabilirsiniz.

document.getElementById(id) -----> Nesneleri "id" özelliği ile bulur.

document.getElementByTagName(name) -----> Nesnelerin adı ile bulur

document.getElementByClassName(name) -----> Nesneleri "name" özelliği ile bulur.

querySelectorAll() -----> CSS seçicisine göre nesnelere erişir. 

2. HTML DOM- NESNELERİNİ DÜZENLEMEK
HTML nesnelerini düzenlemek için kullanabileceğimiz metotlar:

nesne.innerHTML = yeni içerik -----> İçeriği seçer veya değiştirir.

nesne.attribute = yeni değer  -----> Nesnenin özelliğini değiştirir.

nesne.setAttribute(nitelik,değer) ----->  Nesnenin özelliğini değiştirir.

nesne.style.özellik = yeni özellik -----> Nesnenin CSS özelliğini değiştirir.

3. HTML DOM-NESNE OLUŞTURMA SİLME

document.createElement(nesne) -----> HTML nesnesi oluşturma.

• Yeni bir öge(node) oluşturmak için createELement() metodu kullanılır.
• Bir metin içeriği belirtmek için ise createTextNode() metodu kullanılır.
• Oluşturulan bu ögeleri projeye eklemek için appendChild() veya insertBefore() metodu kullanılır.
  
  

document.removeChild(nesne) -----> HTML nesnesini silme.

• Belirtilen bir ögenin (node) alt ögesini silmek için removeChild() metodu kullanılır. Parantez içinde silmek istenilen eleman yer alır. Bu şekilde silindiğinde silinen nesne hafızada tutulabilir.

document.appendChild(nesne) -----> HTML nesnesi ekler

• appendChild() metodu bir ögeyi başka bir ögeye taşımak veya yeni ögeyi eklemek için kullanılır. Parantez içerisinde eklemek istediğimiz yeni öge belirtilir.
• insertBefore() metodu da ögeyi belirtilen yerin önüne ekler. Parantez içerisinde iki parametre belirtilir. İlk parametre , eklenecek ögeyi, ikinci parametre ise önüne ekleneceği yeri işaret eder.
  
  

document.replaceChild(yeni,eski) -----> HTML nesnesini değiştirir.

• Bir ögenin bir alt ögesini başka bir öge ile değiştirmek için replaceChild() parantez içerisinde iki parametre bulunur. İlk parametre bulunur. İlk parametre, yeni ögdeyi , ikinci parametre ise değiştirilecek ögeyi temsil eder.

document.write(metin) -----> Ekrana bir çıktı yazar.

• Ekrana herhangi bir çıktı vermek için document.write() metodu kullanılır.
  

  document.write("Ozlem Ozdemir")