JS DOM Nedir?
İçindekiler
JS DOM (JavaScript Document Object Model), JavaScript’in web sayfalarındaki HTML öğelerine ve içeriklerine erişmek ve üzerinde değişiklik yapmak için kullanılan bir API’dir. Document Object Model, web sayfalarını bir ağaç yapısı olarak temsil eder ve her HTML öğesini bir nesne olarak ele alır. JS DOM, bu nesneleri kullanarak web sayfasındaki öğeleri bulma, ekleme, silme ve güncelleme gibi işlemleri gerçekleştirmemizi sağlar.
JS DOM’u kullanarak, bir web sayfasında bulunan herhangi bir HTML öğesine programatik olarak erişebiliriz. Örneğin, bir butonun tıklanma olayını yakalayabilir ve bir fonksiyonu tetikleyebiliriz. Aynı şekilde, bir form alanının içeriğini değiştirip, metni bir paragraf içindeki yeni bir öğeye ekleyebiliriz.
- JS DOM, HTML öğelerine erişmek ve üzerinde değişiklik yapmak için kullanılan bir API’dir.
- Document Object Model, web sayfalarını bir ağaç yapısı olarak temsil eder.
- JS DOM, web sayfasındaki öğeleri bulma, ekleme, silme ve güncelleme gibi işlemleri gerçekleştirmemizi sağlar.
| Erişim Yöntemleri |
| getElementById() |
| getElementsByClassName() |
| getElementsByTagName() |
JS DOM Erişim Yöntemleri
Javascript (JS) DOM, Document Object Model’in kısaltmasıdır. JS DOM erişim yöntemleri, web sayfalarında bulunan HTML öğelerine erişmek ve bu öğelerin içeriklerini değiştirmek için kullanılır. JS DOM, web tarayıcısında bir HTML belgesini temsil eden bir ağaç yapısıdır. Bu nedenle, JS DOM erişim yöntemleri, HTML öğelerine erişim sağlayarak, bu öğelerin üzerinde değişiklik yapmamızı sağlar.
JS DOM erişim yöntemleri kullanılarak, belirli bir HTML öğesine veya öğelerine erişmek mümkündür. Bu erişim yöntemleri, HTML öğelerinin özelliklerine ve içeriklerine erişmemizi sağlar. Örneğin, bir HTML sayfasındaki başlık etiketlerine erişmek veya bir form alanının değerini değiştirmek gibi işlemler JS DOM erişim yöntemleri ile gerçekleştirilebilir.
Liste ve tablo HTML etiketleri, JS DOM erişim yöntemleri ile elde edilen içerikleri daha zengin bir şekilde göstermek için kullanılabilir. Örneğin, bir liste içerisinde JS DOM erişim yöntemleri ile erişilen tüm başlık etiketlerini listelemek veya bir tablo içerisinde bir formun tüm alanlarının değerlerini göstermek gibi işlemler yapılarak, içeriğin daha organize bir şekilde sunulması sağlanabilir.
JS DOM Özellikleri
JS DOM (JavaScript Document Object Model), bir web sayfasının yapısını ve içeriğini temsil eden bir programlama arayüzüdür. Bu sayede JavaScript, web sayfasındaki içeriğe erişebilir, bu içeriği değiştirebilir ve sayfayı manipüle edebilir. JS DOM’un özellikleri, JavaScript’in web sayfalarıyla etkileşim sağlamak için kullanılmasını sağlar.
Bir web sayfasının JS DOM’u, bir ağaç yapısı olarak düzenlenir. Bu ağaç yapısı, HTML elemanları arasındaki hiyerarşiyi temsil eder. Bir elementin özellikleri, özellik adı ve değeri şeklinde belirtilir. Örneğin, “id” özelliği bir elementin benzersiz kimliğini belirtir. “class” özelliği ise bir elementin bir veya daha fazla sınıfını belirtir. JS DOM, bu özellikleri kullanarak elementlere erişebilir ve onları manipüle edebilir.
JS DOM, elementleri seçmek için birden fazla yöntem sunar. Bir elementi ID’siyle seçmek için getElementById() yöntemi kullanılabilir. Bir elementi sınıf adıyla seçmek için getElementsByClassName() yöntemi kullanılabilir. Bir elementi etiketiyle seçmek için getElementsByTagName() yöntemi kullanılabilir. Bunun yanı sıra, CSS seçicilerine benzer bir şekilde elementleri seçmek için querySelector() ve querySelectorAll() yöntemleri de kullanılabilir.
JS DOM ayrıca elementlerin olaylarına da erişim sağlar. Bir elementin tıklama olayını dinlemek, kullanıcının bir düğmeyi tıklamasını algılamak için addEventListener() yöntemi kullanılabilir. Benzer şekilde, bir elementin fare üzerindeyken oluşan olayları dinlemek için mouseover veya mouseout gibi olaylar da kullanılabilir. Bu olaylar, web sayfalarında etkileşim sağlamak ve kullanıcı deneyimini iyileştirmek için önemlidir.
Liste HTML etiketi, web sayfalarında içeriği yapısını temsil etmek için kullanılır. Örneğin, bir JS DOM özelliği listesini oluşturmak için <ul> (unordered list) veya <ol> (ordered list) etiketleri kullanılabilir. Bu liste etiketleri içerisinde <li> (list item) etiketleri kullanılarak özellikler sıralanabilir.
| METHOD | AÇIKLAMA |
|---|---|
| getElementById(id) | Belirtilen ID’ye sahip bir elementi seçer. |
| getElementsByClassName(className) | Belirtilen sınıf adına sahip elementleri seçer. |
| getElementsByTagName(tagName) | Belirtilen etikete sahip elementleri seçer. |
| querySelector(selector) | Belirtilen CSS seçicisine uygun olan ilk elementi seçer. |
| querySelectorAll(selector) | Belirtilen CSS seçicisine uygun olan tüm elementleri seçer. |
JS DOM Olayları
JavaScript’te DOM (Belge Nesne Modeli) olayları, web sayfalarıyla etkileşim kurmanın temel bir yoludur. DOM olayları, kullanıcıların web sayfalarında gerçekleştirdiği eylemleri algılamak ve bu eylemlere tepki vermek için kullanılır. Bu makalede, JavaScript DOM olaylarının ne olduğunu, nasıl kullanılacağını ve hangi olaylara tepki verilebileceğini inceleyeceğiz.
DOM olayları, bir web sayfasındaki belirli bir öğe üzerinde gerçekleşen eylemleri dinleme ve bunlara yanıt verme yeteneği sağlar. Örneğin, kullanıcı bir düğmeye tıkladığında veya bir form gönderdiğinde, DOM olayları kullanılarak bu eylemler algılanabilir ve özel bir işlevin çağrılması gibi bir tepki verilebilir.
JavaScript DOM olaylarının birkaç farklı türü vardır. Bunlar, klavye olayları, fare olayları, form olayları ve daha fazlasını içerir. Her olay türü, belirli bir etkinlikle ilişkilidir ve bu etkinlikler gerçekleştikçe, DOM, olayı dinler ve programcının belirlediği bir fonksiyonu çalıştırabilir.
- JS DOM Olayları
- Olay Türleri
- Olay Dinleme ve Tepki Verme
- Klavye Olayları
- Fare Olayları
- Form Olayları
- Olay İptali
| Olay Türü | Açıklama |
|---|---|
| click | Bir öğeye tıklandığında tetiklenir. |
| mouseover | Farenin bir öğenin üzerine gelmesiyle tetiklenir. |
| keydown | Bir tuşa basınca tetiklenir. |
| submit | Bir form gönderildiğinde tetiklenir. |
JS DOM Manipülasyonu
JavaScript, web sayfalarında dinamik içerik oluşturmak ve mevcut içeriği değiştirmek için kullanılan bir programlama dilidir. JavaScript’in en önemli özelliklerinden biri, Document Object Model (DOM) ile etkileşime geçme yeteneğidir. DOM, web sayfasının yapısını ve içeriğini temsil eden bir programlama arayüzüdür. Bununla birlikte, DOM manipülasyonu, web sayfasındaki var olan elementleri değiştirme veya yeni elementler eklemenin bir yoludur.
Bir web sayfasında DOM manipülasyonu yapmak için JavaScript tarafından sağlanan bir dizi yöntem bulunmaktadır. Bu yöntemler, belirli bir elemente erişmeyi, elementleri değiştirmeyi veya yeni elementler oluşturmayı sağlar. Örneğin, getElementById() yöntemi, belirli bir kimliği olan bir elemente erişmek için kullanılır. querySelector() ve querySelectorAll() yöntemleri, CSS seçicileri kullanarak elementlere erişim sağlar.
DOM manipülasyonu aynı zamanda elementlerin içeriğini değiştirmek veya elementlere yeni içerik eklemek için kullanılabilir. innerHTML özelliği, bir elementin içeriğini değiştirmek veya yeni içerik eklemek için kullanılabilir. Örneğin, bir div elementinin içeriğini değiştirmek için innerHTML özelliğini kullanabilirsiniz. Ayrıca, createElement() yöntemi, yeni bir element oluşturmak için kullanılır ve appendChild() yöntemi, bir elemente yeni bir alt element eklemek için kullanılır.
| Yöntem | Açıklama |
|---|---|
| getElementById() | Belirli bir kimliği olan bir elemente erişir. |
| querySelector() | CSS seçicilerini kullanarak bir elemente erişir. |
| querySelectorAll() | CSS seçicilerini kullanarak birden çok elemente erişir. |
| innerHTML | Bir elementin içeriğini değiştirir veya yeni içerik ekler. |
| createElement() | Yeni bir element oluşturur. |
| appendChild() | Bir elemente yeni bir alt element ekler. |
JS DOM Gezinme Yöntemleri
JS DOM Gezinme Yöntemleri, JavaScript Document Object Model (DOM) üzerinde gezinme ve erişim yöntemlerinin kullanımını içeren bir konudur. DOM, web sayfalarının yapısını ve içeriğini temsil eden bir nesne ağacıdır. JS DOM Gezinme Yöntemleri ise bu nesne ağacındaki elemanlara erişme ve bu elemanlar üzerinde işlemler yapma konusunda faydalı ipuçları ve yöntemler sunar.
Bir web sayfasındaki DOM elemanlarına erişim, sayfadaki herhangi bir elemanın seçilmesi ve üzerinde işlemler yapılması anlamına gelir. Bu işlemi yapmak için JavaScript’te bir dizi gezinme yöntemi kullanılır. Bu yöntemler, DOM ağacında bir elemanı seçmek, onun alt elemanlarına erişmek veya belirli bir kriteri sağlayan elemanları seçmek için kullanılabilir.
İşte JS DOM Gezinme Yöntemleri için sıkça kullanılan bazı yöntemler:
- getElementById: ID değeri kullanılarak bir elemanı seçmek için kullanılır.
- getElementsByClassName: Class adı kullanılarak bir eleman grupunu seçmek için kullanılır.
- getElementsByTagName: Tag adı kullanılarak belirli bir etikete sahip tüm elemanları seçmek için kullanılır.
- querySelector: CSS seçicileri kullanarak bir elemanı seçmek için kullanılır.
- querySelectorAll: CSS seçicileri kullanarak belirli kriterleri sağlayan tüm elemanları seçmek için kullanılır.
Bu gezinme yöntemlerini kullanarak, web sayfanızdaki elemanlara kolayca erişebilir ve onlarla etkileşimde bulunabilirsiniz. Örneğin, bir düğmeye tıklandığında belirli bir div elemanının gizleneceğini veya bir formun submit edildiğinde verilerin kontrol edileceğini hayal edin. JS DOM Gezinme Yöntemleri, bu gibi senaryolarda size büyük kolaylık sağlar ve web sayfanızın kullanıcı deneyimini iyileştirmenize olanak tanır.
JS DOM ve CSS Manipülasyonu
JS DOM (JavaScript Document Object Model), web sayfalarının yapısını ve içeriğini programatik olarak değiştirmemizi sağlayan bir JavaScript API’sidir. CSS (Cascading Style Sheets) ise web sayfalarının görünümünü düzenlemek için kullanılan bir stil dilidir. JS DOM ve CSS’in birlikte kullanılmasıyla web sayfalarında daha etkileşimli ve güzel bir deneyim oluşturmak mümkündür.
JS DOM ile CSS manipülasyonu, web sayfalarında CSS özelliklerini değiştirmek veya yeni stil kuralları eklemek için kullanılır. Bu sayede, belirli bir HTML elemanının rengini, boyutunu, yerini veya başka özelliklerini istediğimiz gibi değiştirebiliriz. Bunun için JavaScript kodu yazarak, ilgili HTML elemanını seçip üzerinde değişiklikler yapabiliriz.
Örneğin, aşağıdaki tabloyu ele alalım:
| Ad | Soyad | Yaş |
|---|---|---|
| Ahmet | Yılmaz | 25 |
| Canan | Kara | 30 |
| Ali | Demir | 35 |
Bu tablonun satır arkaplan rengini değiştirmek isteyelim. Bunun için JavaScript kodu yazabilir ve tablo satırlarının stil özelliklerini düzenleyebiliriz. Aşağıdaki örnek kodu inceleyelim:
Sık Sorulan Sorular
JS DOM Nedir?
JS DOM (Document Object Model) bir web sayfasının yapısı ve içeriği hakkında bir temsil sağlayan bir programlama arayüzüdür.
JS DOM Erişim Yöntemleri
JS DOM’u erişmek için yaygın olarak kullanılan yöntemler getElementById(), getElementsByClassName(), getElementsByTagName() ve querySelector() gibi metodlardır.
JS DOM Özellikleri
JS DOM, web sayfasının her öğesine erişmek ve değiştirmek için kullanabileceğiniz birçok özellik sunar. Bunlar arasında innerHTML, textContent, style gibi özellikler bulunur.
JS DOM Olayları
JS DOM olayları, bir web sayfasında gerçekleşen etkileşimlerin kontrolünü sağlar. Örneğin, bir düğmeye tıklandığında veya fare üzerinde bir öğe gezdirildiğinde JS DOM olayları tetiklenir.
JS DOM Manipülasyonu
JS DOM manipülasyonu, web sayfasının içeriğini değiştirmek ve öğelere yeni özellikler eklemek için kullanılır. Örneğin, bir metin kutusuna girilen değeri almak veya bir öğeye yeni bir sınıf eklemek gibi işlemler yapılabilir.
JS DOM Gezinme Yöntemleri
JS DOM gezinme yöntemleri, web sayfasındaki öğeler arasında hareket etmek için kullanılır. Örneğin, bir öğenin ebeveynini bulmak veya bir kardeş öğeye erişmek gibi işlemler yapılabilir.
JS DOM ve CSS Manipülasyonu
JS DOM, CSS manipülasyonu için kullanılabilir. Örneğin, bir öğenin stil özelliklerini değiştirebilir veya öğelere yeni bir sınıf ekleyebilirsiniz.