JavaScript: DOM Metotları
Document Object Model(Doküman Nesne Modeli)'in kısaltması olan DOM dokümanlara erişmek için olan bir W3C standardıdır.
DOM; HTML, XHTML, XML gibi belgelerin script dilleriyle iletişim kurabilmesini sağlamak için geliştirilmiş bir arabirimdir ve bir W3C standardıdır. W3C tarafından; DOM, programların ve komut dosyalarının bir belgenin içeriğine, yapısına ve stiline dinamik olarak erişmesini ve güncellemesini sağlayan bir platform ve dilden bağımsız bir arayüz şeklinde ifade edilmektedir1
JavaScript, Nesne Modelini kullanarak HTML belgesini düzenlemek için gerekli tüm yetkilere sahiptir. Aşağıdaki listelenen tüm işlemleri gerçekleştirebiliriz.
- JavaScript sayfadaki tüm HTML öğelerini değiştirebilir.
- JavaScript sayfadaki tüm HTML niteliklerini değiştirebilir.
- JavaScript sayfadaki tüm CSS stillerini değiştirebilir.
- JavaScript mevcut HTML belgesindeki nitelikleri kaldırabilir.
- JavaScript yeni HTML öğeleri ve nitelikleri ekleyebilir.
- JavaScript sayfadaki tüm HTML olaylarına tepki gösterebilir.
- JavaScript yeni HTML olayları oluşturabilir.
| Metot Yazılışı | Tanım |
|---|---|
| document.getElementById() | Id ile bir elementti bul |
| document.getElementsByTagName() | Etiket ismi ile bir elementi bul |
| document.getElementsByClassName() | Class ismi ile bir elementi bul |
| element.innerHTML= | Elementin HTML içeriğini değiştir |
| element.attribute= | Elementin özelliklerini değiştir |
| element.setAttribute(attribute,value) | Elementin özelliklerinin değerini değiştir |
| element.style.property= | Elementin style özelliğini değiştir |
| document.createElement() | Bir HTML elementi oluştur |
| document.removeChild() | Bir HTML elementini çıkar |
| document.appendChild() | Bir HTML elementi ekle |
| document.replaceChild() | Bir HTML elementi değiştir |
| document.write(text) | Bir HTML elementi içine metin yaz |
| document.getElementById(id).onclick=function(){code} | Direkt document üzerinden arama yapıp, o element veya elementlere bir olay metotu ekleyebilirsiniz |
Bir HTML öğesine erişmenin en yaygın yolu öğenin ID'sini kullanmaktır.
Örnek:
1 2 3 4 5 6 7 8 | <html> <body> <p id="degistir"></p> <script> document.getElementById("degistir").innerHTML = "Merhaba Dünya!"; </script> </body> </html> |
Ayrıca hızlı bir şekilde özel etiketlere ulaşabilme şansınız vardır. Örneğin; document.anchors ile tüm a href etiketlerine ulaşırsınız. Diğer etiketlere ulaşmak için «Finding HTML Objects» aratması yapabilirsiniz.
DOM CSS
Tamamen style üzerine yapılan değişiklikleri kapsar.
1 2 3 4 5 6 7 8 | <html> <body> <p id="rengim">Merhaba Dünya!</p> <script> document.getElementById("rengim").style.color = "blue"; </script> </body> </html> |
DOM Events
DOM üzerinden HTML’deki gibi event eklenebilir. JavaScript'in HTML olaylarına tepki vermelerini sağlar.
HTML olaylarına örnekler:
- Kullanıcı fareyi tıklandığında
- Bir web sayfası yüklendiğinde
- Bir görüntü yüklendiğinde
- Fare bir öğenin üzerinde hareket ettiğinde
- Giriş alanı değiştirildiğinde
- HTML formu gönderildiğinde
- Kullanıcı bir butona tıkladığında
Örnek:
1 2 3 4 5 6 7 8 9 10 | <html> <body> <h1 onclick="changeText(this)">Tıkla Değişimi Gör!</h1> <script> function changeText(id) { id.innerHTML = "Tıklama Başarılı!"; } </script> </body> </html> |
DOM Event Listener
Bir öğeye çok sayıda olay işleyicisi eklemeye olanak sağlar.
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <body> <h2>JavaScript addEventListener()</h2> <button id="myBtn">Butonum</button> <p id="Sonuc"></p> <script> var x = document.getElementById("myBtn"); x.addEventListener("mouseover", myFunction); x.addEventListener("click", mySecondFunction); x.addEventListener("mouseout", myThirdFunction); function myFunction() { document.getElementById("Sonuc").innerHTML += "Mouse Buton Üstünde<br>"; } function mySecondFunction() { document.getElementById("Sonuc").innerHTML += "Butona Tıklandı<br>"; } function myThirdFunction() { document.getElementById("Sonuc").innerHTML += "Mouse Buton Üzerinden Ayrıldı<br>"; } </script> </body> </html> |
DOM Elementleri arasında dolaşım
- parentNode (Bir üst element)
- childNodes[nodenumber] (Sayı ile alt elementlerden biri)
- firstChild (İlk alt element)
- lastChild (Son alt Element)
- nextSibling (Sonraki element)
- previousSibling (Önceki element)
Örnek:
1 2 3 4 5 6 7 8 9 | <html> <body> <h1 id="id01">My First Page</h1> <p id="id02"></p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue; </script> </body> </html> |
Elemente bir node ekleme
Türkçe karşılığı Düğüm olan Node, yeni bir element eklememize olanak sağlar.
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <body> <h2>JavaScript HTML DOM</h2> <p>Yeni HTML Elementi Ekleyelim</p> <div id="div1"> <p id="p1">İlk Paragrafımız.</p> <p id="p2">Html içerisindeki son paragrafımız.</p> </div> <script> const para = document.createElement("p"); const node = document.createTextNode("Js ile eklenen Yeni Paragraf."); para.appendChild(node); const element = document.getElementById("div1"); element.appendChild(para); </script> </body> </html> |
DOM NodeList
Bir elementin birçok alt elementine aynı anda işlem yaptırılabilir.
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <body> <h2>JavaScript HTML DOM</h2> <p>Merhaba Dünya!</p> <p>Hello Türkiye!</p> <p>Tüm p öğelerinin rengini değiştirmek için buton'a tıklatın.</p> <button onclick="myFunction()">Buton</button> <script> function myFunction() { const myNodelist = document.querySelectorAll("p"); for (let i = 0; i < myNodelist.length; i++) { myNodelist[i].style.color = "blue"; } } </script> </body> </html> |
- 23 Mart 2022
Diğer Yazılarımız
Tüm Yazılarımız
Soru işareti kalmasın
Bu yazı hakkında aklınıza takılanlar, bir fikriniz belkide şikayetiniz vardır. Yada yazımızda hatalar olduğunu düşünüyor olabilirsiniz. Peki neden bize ulaşmayı düşünmeyesiniz ki?
Hizmetlerimiz
Binlerce müşterimizin yararlandığı 100'e yakın hizmetlerimizden sizlerde yararlanabilirsiniz. Onlarca ücretsiz web hizmeti ve profesyonel destekle sizleri daima daha ileriye taşımayı hedefliyoruz.
Tüm Yenilik ve Kampanyalardan Haberdar Ol
Son Yazılar
- CSS Grid Kullanımı Başlangıç Rehberi 1 Ocak 2025
- C# While Döngüsü Kullanımı 1 Ocak 2025
- C# ile Dosya Okuma ve Yazma İşlemleri 29 Aralık 2024