JavaScriptYazılım

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.

console.log(this); // İkiside window objesini verir.
console.log(window);

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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Todo List</title>
</head>
<body>
    <div class="container" style ="margin-top:20px;">
                                     
        <div class="card row">
            <div class="card-header">Todo List</div>
                <div class="card-body">
                    <form id = "todo-form" name="form">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <input class="form-control" type="text" name="todo" id = "todo" placeholder="Bir Todo Girin">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-danger">Todo Ekleyin</button>
                    </form>
                
                </div>
         
             <div class="card-body">
                    <hr>
                    <h5 class="card-title" id = "tasks-title">Todolar</h5>
                    <div class="form-row">
                            <div class="form-group col-md-6">
                                <input class="form-control" type="text" name="filter" id = "filter" placeholder="Bir Todo Arayın">
                            </div>
                    </div>

                    <hr>
                    <ul class="list-group">
                        <li class="list-group-item d-flex justify-content-between">
                            Todo 1
                            <a href = "#" class ="delete-item">
                                <i class = "fa fa-remove"></i>
                            </a>

                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            Todo 2
                            <a href = "#" class ="delete-item">
                                <i class = "fa fa-remove"></i>
                            </a>
    
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            Todo 3
                            <a href = "#" class ="delete-item">
                                <i class = "fa fa-remove"></i>
                            </a>
    
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            Todo 4
                            <a href = "#" class ="delete-item">
                                <i class = "fa fa-remove"></i>
                            </a>
        
                        </li>
                    </ul>
                    <hr>  
                    <a id = "clear-todos" class="btn btn-dark" href="#">Tüm Taskları Temizleyin</a>               
                </div>
              </div>
        
    </div>


    
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="app.js"></script>
</body>
</html>

DOCUMENT OBJESİNİN ÖZELLİKLERİ


Şimdi özellikleri incelemeye geçelim.

let value; 
value = this.document; 
console.log(value);

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.

let value;

value = document; // Document objesini verir
value = document.all; // Tüm elementler htmlCollection şeklinde gelir.
value = document.all.length; // HTML sayfamızda kaç element var onu görürüz;
value = document.all[0]; // HTML sayfasındaki ilk element
value = document.all[document.all.length -1]; // HTML sayfasındaki son element

console.log(value);

Ş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.

const elements = document.all;

for(let i = 0; i < elements.length; i++){
   console.log(elements[i]);
}

elements.forEach((element) => {
   console.log(element);
});

// foreach ile kullanırsak şu hatayı alırız : 
// Uncaught TypeError : 
// elements.forEach is not a function
//   at "kodlarınızın bulunduğu satır"

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)

Oylamak için tıklayınız :
[Toplam: 0 Puan: 0]
Etiketler

İlgili Makaleler

Bir cevap yazın

Başa dön tuşu
Kapalı

Reklam Engelleyici Algılandı !

Reklam engelleyiciyi kapatarak bize destek olabilirsiniz..