Arka Plan Rengini Değiştirme:
1 |
document.querySelector('body').style.backgroundColor = 'lightblue'; |
Body elementinin arka plan rengini ‘lightblue’ olarak değiştirir.
Metin Ekleme:
1 2 3 |
var yeniMetin = document.createElement('p'); yeniMetin.textContent = 'Merhaba, Dünya!'; document.querySelector('body').appendChild(yeniMetin); |
Body içine yeni bir paragraf ekler ve içine “Merhaba, Dünya!” metnini ekler.
CSS Sınıfı Ekleyip Çıkarma:
1 2 |
document.querySelector('body').classList.add('acik-tema'); document.querySelector('body').classList.remove('koyu-tema'); |
Body elementine ‘acik-tema’ sınıfını ekler ve ‘koyu-tema’ sınıfını kaldırır.
Stil Özelliklerini Değiştirme:
1 2 |
document.querySelector('body').style.fontSize = '18px'; document.querySelector('body').style.color = 'green'; |
Body elementinin yazı boyutunu 18 piksel olarak değiştirir ve metin rengini yeşil yapar.
Alt Element Eklemek:
1 2 3 |
var yeniDiv = document.createElement('div'); yeniDiv.textContent = 'Yeni bir div!'; document.querySelector('body').appendChild(yeniDiv); |
Body içine yeni bir <div>
ekler ve içine “Yeni bir div!” metnini ekler.
İçerik Silme:
1 |
document.querySelector('body').innerHTML = ''; |
Body elementinin içeriğini tamamen siler.
Attribute Ekleme ve Değiştirme:
1 2 |
document.querySelector('body').setAttribute('data-theme', 'light'); document.querySelector('body').setAttribute('id', 'sayfa'); |
Body elementine ‘data-theme’ ve ‘id’ attribute’larını ekler veya değiştirir.
Click Olayına Olay Dinleyici Ekleme:
1 2 3 |
document.querySelector('body').addEventListener('click', function() { alert('Body elementine tıklandı!'); }); |
Body elementine tıklandığında bir uyarı gösteren bir click olay dinleyicisi ekler.
Gizleme ve Gösterme:
1 2 3 |
document.querySelector('body').style.display = 'none'; // veya document.querySelector('body').style.display = 'block'; |
Body elementini gizler veya tekrar gösterir.
Scroll İşlemleri:
1 |
document.querySelector('body').scrollTop = 0; |
Body elementinin scroll pozisyonunu en üstüne ayarlar.
Input Değerini Almak ve Konsola Yazdırmak:
1 2 |
var inputDegeri = document.querySelector('input[type="text"]').value; console.log('Input Değeri:', inputDegeri); |
Aynı Sınıfa Sahip Tüm Elemanlara Stil Uygulama:
1 2 3 4 |
var elements = document.querySelectorAll('.ayni-sinif'); elements.forEach(function(element) { element.style.border = '1px solid red'; }); |
Çocuk Ekleme:
1 2 3 |
var yeniDiv = document.createElement('div'); yeniDiv.textContent = 'Yeni bir çocuk!'; document.querySelector('body').firstElementChild.appendChild(yeniDiv); |
Checkbox Durumunu Kontrol Etme:
1 2 |
var checkboxDurumu = document.querySelector('input[type="checkbox"]').checked; console.log('Checkbox Durumu:', checkboxDurumu); |
Form Gönderme:
1 |
document.querySelector('form').submit(); |
Mouse Over Olayına Olay Dinleyici Ekleme:
1 2 3 |
document.querySelector('body').addEventListener('mouseover', function() { console.log('Mouse üzerine gelindi!'); }); |
Bağlantıya Yeni Bir Tab’da Link Açma:
1 2 |
var linkElementi = document.querySelector('a'); linkElementi.target = '_blank'; |
HTML Elementi Kaldırma:
1 2 |
var elementToRemove = document.querySelector('.kaldirilacak-eleman'); elementToRemove.parentNode.removeChild(elementToRemove); |
Sayfa Yüksekliğini Alma:
1 2 |
var sayfaYuksekligi = document.body.scrollHeight; console.log('Sayfa Yüksekliği:', sayfaYuksekligi); |
CSS Animasyonunu Tetikleme:
1 |
document.querySelector('.animasyon-elemani').classList.add('animasyon-klasi'); |
Giriş Doğrulama İşlemi:
1 2 3 4 5 6 7 8 9 10 11 12 |
var kullaniciAdiInput = document.querySelector('#kullaniciAdi'); var sifreInput = document.querySelector('#sifre'); function dogrula() { var kullaniciAdi = kullaniciAdiInput.value; var sifre = sifreInput.value; // Kullanıcı adı ve şifre doğrulama işlemleri // ... } document.querySelector('#girisButton').addEventListener('click', dogrula); |
Drag and Drop İşlemleri:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var surukleBirakElementi = document.querySelector('.surukle-birak'); surukleBirakElementi.addEventListener('dragstart', function(e) { e.dataTransfer.setData('text/plain', 'Bu bir sürükle ve bırak öğesidir.'); }); surukleBirakElementi.addEventListener('dragover', function(e) { e.preventDefault(); }); surukleBirakElementi.addEventListener('drop', function(e) { e.preventDefault(); var veri = e.dataTransfer.getData('text/plain'); console.log('Düşürülen Veri:', veri); }); |
İlk Yorumu Siz Yapın