JS DOM CSS’si

DOM Nedir?

DOM, Document Object Model (Belge Nesne Modeli) anlamına gelir ve web sayfalarının yapısını temsil eder. Bir web sayfası açıldığında tarayıcı, HTML kodunu okur ve bu kodu bir ağaç yapısı olarak temsil eder. Bu ağaç yapısına Document Object Model denir ve tarayıcı tarafından manipüle edilebilir. DOM, web sayfalarında bulunan her bir elementi, bu elementlerin özelliklerini ve ilişkilerini temsil eder.

DOM temel olarak HTML ve XML dosyalarını bir programlama dili tarafından erişilip değiştirilebilen bir yapıya dönüştürür. JavaScript kullanarak, DOM kullanarak web sayfalarına dinamik olarak erişebilir ve bu sayede sayfadaki elementleri, özelliklerini ve içeriklerini değiştirebilirsiniz.

DOM ayrıca web sayfasındaki elementleri seçmek, yeni elementler eklemek, var olan elementleri silmek, element özelliklerini değiştirmek, CSS stillerini değiştirmek ve belge olaylarını dinlemek gibi işlemleri gerçekleştirmek için kullanılır. Bu nedenle, web geliştirme sürecinde DOM’un önemi oldukça yüksektir.

JS ile Elementleri Seçmek

Web geliştirme sürecinde, JavaScript (JS) dilinin en önemli konularından biri, web sayfasındaki belirli HTML öğelerini seçmektir. Bu, web sayfasının belirli bir bölümüne veya öğesine müdahale etmek, o öğenin özelliklerini veya içeriğini değiştirmek için gereklidir. JS ile elementleri seçmek için çeşitli yöntemler ve yöntem zincirlerini kullanabiliriz.

Birinci yöntem, getElementById() fonksiyonunu kullanmaktır. Bu fonksiyon, HTML dokümanındaki bir öğeyi benzersiz kimliğiyle (ID) birlikte seçmemize olanak sağlar. Örneğin, HTML içerisinde belirli bir div öğesine sahip olan ID değeri “myDiv” olan bir öğeyi seçmek için aşağıdaki kodu kullanabiliriz:

var myElement = document.getElementById(“myDiv”);

İkinci yöntem ise querySelector() fonksiyonunu kullanmaktır. Bu fonksiyon, CSS seçicilerini kullanarak belirli bir öğeyi seçmemize olanak sağlar. Örneğin, HTML içerisindeki ilk p öğesini seçmek için aşağıdaki kodu kullanabiliriz:

var myElement = document.querySelector(“p”);

Üçüncü yöntem ise getElementsByTagName() fonksiyonunu kullanmaktır. Bu fonksiyon, belirli bir etikete sahip tüm öğeleri seçmemize olanak sağlar. Örneğin, HTML içerisindeki tüm div öğelerini seçmek için aşağıdaki kodu kullanabiliriz:

var myElements = document.getElementsByTagName(“div”);

JS ile elementleri seçmek, web sayfalarını dinamik ve etkileşimli hale getirmek için temel bir beceridir. Bu yöntemleri kullanarak belirli öğeleri seçerek, web sayfanızda istediğiniz değişiklikleri yapabilirsiniz.

Eleman Özelliklerini Değiştirmek

Bir web sayfasında, web tarayıcısı tarafından oluşturulan her bir öğeye bir “element” denir. DOM (Belge Nesne Modeli) ise bu web sayfasındaki öğelerin bir hiyerarşik yapısını temsil eden bir arayüzdür. DOM, JavaScript tarafından kullanılarak web sayfasının öğelerine erişmek ve bu öğelerin özelliklerini değiştirmek için kullanılır.

JavaScript kullanarak, web sayfasının öğelerini seçebilir ve bu öğelerin özelliklerini değiştirebiliriz. Örneğin, bir elementin arka plan rengini değiştirebilir, metin içeriğini güncelleyebilir veya öğeye yeni bir sınıf ekleyebiliriz. Bu şekilde, web sayfalarımızı dinamik ve etkileşimli hale getirebiliriz.

Element özelliklerini değiştirmek için JavaScript’te kullanabileceğimiz birçok özellik ve yöntem vardır. Örneğin, setAttribute() yöntemiyle bir elemente yeni bir özellik ekleyebilir, style özelliği aracılığıyla CSS stillerini değiştirebilir veya innerHTML özelliği ile bir elementin içeriğini güncelleyebiliriz. Bunlar sadece birkaç örnektir ve her elementin kendi özelliklerine ve yöntemlerine sahip olduğunu unutmamak önemlidir.

1. Elementin özelliklerini değiştirmek için JavaScript kullanırken dikkat etmemiz gereken bazı önemli noktalar vardır. İlk olarak, elementin doğru bir şekilde seçilmesi gerekir. Bunun için öncelikle elementin özelliklerini değiştirmek istediğimiz yerdeki HTML yapısını incelemeli ve elementi tanımlayan benzersiz bir tanımlayıcı bulmalıyız. Bunu yaparken, elementi getElementById(), getElementsByClassName() veya querySelector() gibi JavaScript yöntemleriyle seçebiliriz.
2. Element seçildikten sonra, özelliklerini değiştirebiliriz. Bunun için elementin sahip olduğu özelliklere erişmemiz ve bu özelliklere istediğimiz değerleri atamamız gerekmektedir. Örneğin, elementin arka plan rengini değiştirmek için style.backgroundColor özelliğini kullanabilir, metin içeriğini değiştirmek için ise innerHTML özelliğini kullanabiliriz.
3. Elementin özelliklerini değiştirdikten sonra, değişikliklerin uygulanması için sayfayı güncellememiz gerekmeyebilir. JavaScript, canlı olarak değişiklikleri uygular ve web tarayıcısında anında görüntülenmesini sağlar. Bu, web sayfasının daha dinamik ve etkileşimli olmasını sağlar.

Element Ekleme ve Silme

Element ekleme ve silme, JavaScript ile web sayfalarının yapısını dinamik olarak değiştirmenin en temel yoludur. Bu işlem, web sayfasındaki mevcut elementlere yeni elementler eklemek veya var olan elementleri silmek suretiyle gerçekleştirilir. Bu yazıda, JavaScript kullanarak element ekleme ve silme işlemlerini nasıl gerçekleştirebileceğinizi ve bu işlemlerin nasıl kullanışlı olabileceğini keşfedeceksiniz.

Element ekleme işlemi, web sayfasına dinamik olarak yeni bir element eklemeyi içerir. Bu işlem, kullanıcının etkileşimi veya belirli bir olaya tepki olarak gerçekleşebilir. Örneğin, bir butona tıklandığında yeni bir div elementi eklemek isteyebilirsiniz. Bunun için, JavaScript’de createElement() ve appendChild() fonksiyonlarını kullanabilirsiniz. createElement() fonksiyonu ile yeni bir element oluştururken, appendChild() fonksiyonu ile bu elementi belirli bir ögeye (parent elementine) ekleyebilirsiniz.

Element silme işlemi ise, web sayfasındaki bir elementi kaldırmayı içerir. Bu işlem için removeChild() fonksiyonunu kullanabilirsiniz. Örneğin, bir butona tıklandığında belirli bir div elementini kaldırmak isteyebilirsiniz. Bu durumda, önce removeChild() fonksiyonunu kullanarak silmek istediğiniz elementi belirlemeniz ve daha sonra bu elementin parent elementinden silinmesini sağlamanız gerekmektedir.

• createElement(): Yeni bir element oluşturmak için kullanılır.
• appendChild(): Bir elementi belirli bir ögenin altına eklemek için kullanılır.
• removeChild(): Bir elementi web sayfasından kaldırmak için kullanılır.

Element ekleme ve silme işlemleri, web sayfanızı dinamik hale getirmenizi ve kullanıcı etkileşimlerine tepki verebilmenizi sağlar. Bu sayede, kullanıcı deneyimini geliştirebilir ve web sayfanızı daha etkileşimli hale getirebilirsiniz. Element ekleme ve silme fonksiyonlarını kullanarak, istediğiniz elementleri istediğiniz zaman ekleyebilir veya kaldırabilirsiniz.

Fonksiyon	Açıklama
createElement()	Yeni bir element oluşturur.
appendChild()	Bir elementi belirli bir ögenin altına ekler.
removeChild()	Bir elementi web sayfasından kaldırır.

Element ekleme ve silme işlemleri, JavaScript üzerinde oldukça yaygın olarak kullanılan işlemlerdir. Bu işlemleri kullanarak web sayfanızın içeriğini yeniden düzenleyebilir, kullanıcıların deneyimini geliştirebilir ve interaktif bir web sayfası oluşturabilirsiniz. Element ekleme ve silme işlemlerini JavaScript ile kullanmak, web geliştirme sürecinde güçlü bir araçtır ve etkileyici sonuçlar elde etmenizi sağlar.

CSS Stillerini Değiştirmek

Web sitelerinin görünümünü özelleştirmek için CSS kullanmak oldukça önemlidir. CSS (Cascading Style Sheets), bir web sayfasının tasarımını kontrol etmek için kullanılan bir stil dilidir. Bu stil dilini kullanarak, metin rengini değiştirebilir, arka plan görüntüsünü ayarlayabilir, kenarlık ekleyebilir ve daha birçok değişiklik yapabilirsiniz. Bu yazıda, CSS ile stillerini değiştirme konusunda ipuçları ve teknikler üzerinde duracağız.

– CSS Seçicilerini Kullanmak

Belirli bir HTML öğesine CSS stillerini uygulamak için seçiciler kullanabilirsiniz. Seçiciler, belirli HTML öğelerini hedeflemek ve onlara stil uygulamak için kullanılan kod parçacıklarıdır. Örneğin, bir paragrafın metin rengini değiştirmek için aşağıdaki CSS kodunu kullanabilirsiniz:

p { color: blue; }

Yukarıdaki kod, tüm <p> öğelerine (paragraflara) mavi bir metin rengi uygular. CSS seçicileriyle ilgili daha fazla bilgiye buradan ulaşabilirsiniz.

– Öncelik ve Öncelik Sıralaması

Bazı durumlarda, birden fazla stilin aynı öğeye uygulanması gerekebilir. Bu durumda, CSS’in öncelik sıralamasını anlamak önemlidir. Her bir stilin kendine özgü bir öncelik seviyesi vardır ve bu seviyeler, stilin nasıl uygulanacağını belirlemek için kullanılır. Öncelik sıralaması, seçicilerin spesifikliği, doğruluk, önem ve kaynak gibi faktörleri dikkate alır. Daha spesifik bir seçici kullandığınızda veya stil tanımınıza !important eklediğinizde, stilin önceliği artar.

– CSS Class ve ID Kullanımı

CSS Class ve ID’ler, stillerini değiştirmek istediğiniz belirli öğeleri hedeflemek için kullanışlıdır. Class, birden fazla öğeye stil uygulamak istediğinizde kullanılırken, ID yalnızca bir öğeyi hedeflemek için kullanılır. Class ve ID’leri HTML öğelerine ekleyerek, CSS’te belirli öğeleri kolayca hedefleyebilirsiniz. Örneğin, aşağıdaki CSS kodu ile “my-element” adlı bir Class’a sahip tüm öğelerin arka plan rengini değiştirebilirsiniz:

.my-element { background-color: yellow; }

Yukarıdaki örnek, “my-element” Class’ına sahip tüm öğelere sarı bir arka plan rengi uygular. Class ve ID’lerin nasıl kullanılacağı hakkında daha fazla bilgiye buradan ulaşabilirsiniz.

Yukarıdaki ipuçları ve tekniklerle, CSS stil değiştirmenin temellerini öğrenebilir ve web sitelerinizin görünümünü dilediğiniz gibi özelleştirebilirsiniz.

Belge Olaylarını Dinlemek

Web geliştirme sürecinde, belge olaylarını dinlemek ve yanıt vermek oldukça önemlidir. Bu, kullanıcı etkileşimlerini takip etmek, verileri doğru şekilde işlemek ve web sitesi veya uygulamanın istenen şekilde davranmasını sağlamak için gereklidir.

Belge olayları, bir web sayfasındaki etkileşimlerle ilişkili olan eylemlerdir. Kullanıcı bir düğmeye tıkladığında, bir form gönderdiğinde veya bir fareyi hareket ettirdiğinde, belge olayları tetiklenir ve bu olaylara yanıt verilebilir.

Belge olaylarını dinlemek için JavaScript kullanılır. JavaScript sayesinde belge olaylarını algılayabilir ve gerektiğinde belirli bir eylem gerçekleştirebilirsiniz. Bunun için addEventListener() metodunu kullanabilirsiniz.

• click: Kullanıcı bir öğeye tıkladığında tetiklenir.
• submit: Bir form gönderildiğinde tetiklenir.
• mouseover: Bir öğenin üzerine gelindiğinde tetiklenir.
• keydown: Bir tuşa basıldığında tetiklenir.

Olay	Açıklama
click	Kullanıcı bir öğeye tıkladığında tetiklenir.
submit	Bir form gönderildiğinde tetiklenir.
mouseover	Bir öğenin üzerine gelindiğinde tetiklenir.
keydown	Bir tuşa basıldığında tetiklenir.

DOM Manipülasyonunda Performans İpuçları

DOM (Document Object Model), web sayfalarının HTML, XML veya XSLT gibi belge türlerini temsil etmek için kullanılan bir standarttır. Web uygulamaları geliştirirken, DOM’u kullanarak belgenin yapısı, içeriği ve stilini değiştirebiliriz. Ancak, DOM manipülasyonunun verimli bir şekilde yapılması önemlidir çünkü yanlış kullanım performans sorunlarına yol açabilir.

DOM manipülasyonunda performansı artırmak için aşağıdaki ipuçlarını kullanabilirsiniz:

• 1. Seçicileri Doğru Kullanın: DOM manipülasyonunda öncelikle elementleri seçmek önemlidir. Seçicileri doğru kullanarak sadece gereken elementleri seçmeli ve gereksiz seçimlerden kaçınmalısınız. CSS seçicilerini kullanarak optimize edilmiş seçiciler oluşturabilirsiniz.
• 2. Yerine getirme Operasyonlarını Azaltın: DOM manipülasyonu maliyetli bir işlem olabilir, bu nedenle gereksiz yerine getirme operasyonlarından kaçınmalısınız. Birden fazla manipülasyon yapmanız gerekiyorsa, değişiklikleri bir dizi içinde toplayıp ardından bir seferde yapabilirsiniz.
• 3. Döküman Dışında Yapılan İşlemleri Azaltın: DOM manipülasyonunu döküman dışında yapmak, performansı olumsuz etkileyebilir. Manipülasyonları mümkün olduğunca dökümanın içinde gerçekleştirmelisiniz.

Performans İpuçları	Açıklama
Seçicileri Doğru Kullanın	Elementleri seçerken optimize edilmiş seçiciler kullanın.
Yerine getirme Operasyonlarını Azaltın	Gereksiz yerine getirme operasyonlarından kaçının ve değişiklikleri bir seferde yapın.
Döküman Dışında Yapılan İşlemleri Azaltın	Manipülasyonları dökümanın içinde gerçekleştirin.

Sık Sorulan Sorular

DOM nedir?

DOM (Belge Nesne Modeli), bir web sayfasını oluşturan HTML, CSS ve JavaScript gibi unsurların bir araya gelerek tarayıcı tarafından oluşturulan bir programlama arayüzüdür.

JS ile elementleri seçmek için hangi yöntemleri kullanabiliriz?

JS ile elementleri seçmek için getElementById, getElementsByClassName, getElementsByTagName ve querySelector gibi yöntemleri kullanabiliriz.

Eleman özelliklerini nasıl değiştirebiliriz?

Eleman özelliklerini değiştirmek için JavaScript ile elementin özelliklerine erişip istediğimiz değeri atayabiliriz. Örneğin, elementin renk özelliğini değiştirebiliriz.

Element ekleme ve silme işlemleri nasıl yapılır?

Element eklemek için createElement ve appendChild gibi yöntemleri kullanabiliriz. Element silmek için ise removeChild veya remove metodunu kullanabiliriz.

CSS stillerini nasıl değiştirebiliriz?

CSS stillerini değiştirmek için elementin style özelliğine erişip istediğimiz stil özelliklerini değiştirebiliriz.

Belge olaylarını nasıl dinleyebiliriz?

Belge olaylarını dinlemek için addEventListener yöntemini kullanabiliriz. Böylece belirli bir olay gerçekleştiğinde belirlediğimiz bir işlemi yapabiliriz.

DOM manipülasyonunda performans ipuçları nelerdir?

DOM manipülasyonunda performansı artırmak için, mümkün olduğunca az sayıda DOM erişimi yapmak, document fragmentleri kullanmak, innerHTML yerine createElement ve appendChild yöntemlerini tercih etmek gibi ipuçları kullanabiliriz.