Adı : DOM Yapısı ile JavaScript'te HTML İşlemleri Nasıl Yapılır?

DOM (Document Object Model), web sayfaları içeriği ve yapısal özelliklerini temsil etmek için kullanılan bir API'dir. JavaScript, DOM kullanarak HTML sayfalarını manipüle etmek için yaygın olarak kullanılır. Bu yazıda, DOM yapısını kullanarak JavaScript ile HTML işlemlerinin nasıl yapılacağına dair çeşitli örnekler vereceğim.
DOM Yapısı Nedir?
DOM yapısı, bir HTML belgesinin soy ağacını örnekleyen bir yapıdır. Bu ağaç, özellikle metin, etiketler, nitelikler ve diğer öğeleri içerir. Her öğe bir düğüm olarak adlandırılır ve her bir düğüm birbirine bağlanmıştır. DOM, her bir düğümün özelliklerine ve ilişkilerine erişmek ve bu öğeleri değiştirmek için kullanılır.
JavaScript'te DOM Kullanarak HTML Öğelerine Erişmek
DOM yapısını kullanarak JavaScript, HTML öğelerine erişebilir ve değişiklikler yapabilir. Örneğin, belirli bir HTML öğesi için id belirleyebiliriz ve JavaScript kodlarında bu id üzerinden öğeye erişebiliriz. Aşağıdaki örnek, belirli bir HTML öğesinin yazısını değiştirir:
```html

Bu bir örnek başlığıdır.

```
Yukarıdaki örnekte, document.getElementById() yöntemi kullanarak HTML belgesindeki belirli bir öğeye erişildi. Örneğimizde, h1 etiketi id=title ile tanımlandı ve innerHTML özelliği kullanılarak yazı içeriği Bu başlık değiştirildi olarak değiştirildi.
JavaScript'te DOM Kullanarak HTML Öğelerine Ekleme ve Kaldırma İşlemleri
DOM yapısını kullanarak JavaScript, HTML öğelerini ekleme veya kaldırma işlemi yapabilir. Aşağıdaki örnekte, bir HTML formu oluşturmak için DOM kullanarak birkaç HTML öğesi ekleyeceğiz:
```html










```
Yukarıdaki örnekte, yeni bir input öğesi oluşturmak için document.createElement() yöntemi kullanılarak bir input öğesi oluşturduk. Daha sonra, setAttribute() yöntemiyle özellikleri ekledik ve daha sonra var mainDiv = document.getElementById(mainDiv) ile sayfadaki öğeye eriştik ve öğeye yeni bir öğe (email adresi) ekledik.
Aşağıdaki örnekte bir öğeyi DOM kullanarak kaldırmayı öğreneceğiz:
```html

Avukat Web Siteniz Yok mu?

Hemen bugün bir Avukat Web Siteniz Olsun, Web'in gücünü keşfedin.

SSL Sertifikası + Sınırsız İçerik + Full SEO Uyumlu + Full Mobil Uyumlu.
Üstelik İsterseniz Yapay Zeka Hukuk Asistanı Seçeneğiyle

Hemen İncele

---

DOM HTML JavaScript düğüm özellik içerik öğe erişmek değiştirmek