JAVASCRIPT’TE DOCUMENT OBJESİ #13


JAVASCRIPT’TE DOCUMENT OBJESİ


Bu dersimizde geçen derste bahsettiğim document object model de işimize yarayacak en büyük obje olan document objesini inceleyeceğiz. Document objesi window objesinin içinde bulunur. O dersimize de buradan gidebilirsiniz. Önceden window objesini görmüştük. Ve bu window objesinin web sayfalarında ki , javascript’te ki en temel obje olduğunu öğrenmiştik. Şimdi bu window objesini console’a yazdırıp document objesini içinde bulalım.

Window objesini yazdırdığımız zaman alfabetik sıraya göre “D” kısmına gelirsek orada document kısmını ve document’in de kendi içinde bir obje olduğunu görürüz. Ve oradaki forms kısmına baktığımızda aslında javascript dosyasını bağladığımız html dosyasının içindeki  form elementleri görürüz ya da links kısmına baktığımızda “a” etiketlerini görebiliriz. Ve biz bu elementleri document objesi içinden seçeceğiz.

TODO LİST PROJESİNDE KULLANILACAK SAYFA


Arkadaşlar DOM Manipülasyonu ve eventlerinden sonra yapacağımız todo list projesinin html sayfası üzerinden bu konuları anlatacağım. Derslerimiz bu sayfa üzerinden devam edeceği için sizinle paylaşmak istiyorum. Ben tasarımda css kütüphanesi olan bootstrap’ten faydalandım. Bilmemeniz normal ama kafanıza takmanıza gerek yok çünkü burada bizim konumuz javascript. Bootstrap kütüphanesine buradan ulaşabilirsiniz.

DOCUMENT OBJESİNİN ÖZELLİKLERİ


Şimdi özellikleri incelemeye geçelim.

Eğer this yani window objesinin içindeki document’i console’a yazdırırsak console’da javascript dosyasının bağlı olduğu html sayfasını görürüz. Artık özelliklerine geçelim.

Şimdi önemli bir konudan bahsedip dersi tamamlayacağım.

Eğer biz bu document.all üzerinde yani bu kod sonucunda bize gelen HTMLCollection üzerinde for döngüsü kullanır isek içerisinde bulunan tüm elementler console’a yazdırılacaktır fakat biz forEach döngüsü ile bunu yapmayı denersek karşımıza bir hata gelecektir. Hemen kodlarla görelim.

Aslında bu hatanın anlamı forEach’i bu HTMLCollection üzerinde kullanamazsınız demektir. Eğer kullanmak isterseniz HTMLCollection’ı array’e çevirerek kullanabilirsiniz.

BİTİRİŞ


Evet arkadaşlar bu dersimizde DOM manipülasyonu ve eventlerinde işimize çok yarayacak document objesini inceledik bir sonraki derslerimizde yine document objesi üzerinde bulunan özellikler ile yapabileceğimiz özellikleri ve kullanımlarını göreceğiz. Buradan sonra işler biraz daha karmaşık hale gelecektir fakat az alıştırma ile her şeyi rahatça öğrenebilirsiniz. Görüşmek üzere.

Javascript’te Document Object Model (DOM)

[Toplam:1    Ortalama:5/5]

Sizin Tepkiniz Nedir?

süper süper
1
süper
bilgilendirici bilgilendirici
3
bilgilendirici
beğenmedim beğenmedim
0
beğenmedim
beğendim beğendim
0
beğendim
Düşündürücü Düşündürücü
0
Düşündürücü
Berkay

Yazılım ve Javascript adına kendini geliştirmekte olan ve bilgilerini paylaşmayı seven biri.

0 Yorum

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bir format seçin
Kişisel Test
Kişiliğe dair bir şey ortaya çıkarmayı amaçlayan sorular dizisi
Basit Test
Bilgiyi kontrol etmek isteyen doğru ve yanlış cevaplı sorular dizisi
Anket
Karar vermek veya görüş belirlemek için oylama yapmak
Serbest Yazı
Yazılarınıza Görseller Bağlantılar Ekleyebilirsiniz
Liste
Klasik İnternet Listeleri
Geri Sayım Listesi
Klasik İnternet Geri Sayım Listeleri
Açık Liste
Kendi öğenizi gönderin ve en iyi sunum için oy verin
Oylanabilir Liste
En iyi liste öğesine karar vermek için yukarı veya aşağı basın
Fotoyla Anlatım
Kendi resimlerinizi yükleyin ve birşeyler anlatın
Video
Youtube, Vimeo veya Vine Kodları
Ses
Soundcloud veya Mixcloud İçerikleri
Görsel
Fotoğraf veya GIF
GIF
GIF Formatı