JavaScript’te DOM Metotları Nelerdir?

JavaScript’te bulunan DOM (Document Object Model) metotları sayesinde web sayfalarının içeriğini, yapısını ve stillerini kolayca değiştirebiliriz. Bu yazımızda, yaygın kullanılan DOM metotlarını derledik.

JavaScript’te DOM Metotları

JavaScript’te DOM ile ilgili birtakım metotlar bulunmaktadır. Aşağıda bu metotların tablo halinde bir listesini bulabilirsiniz:

MetotAçıklama
getElementById(id)Belirli bir id’ye sahip olan HTML elemanını getirir.
getElementsByClassName(name)Belirli bir sınıfa ait tüm HTML elemanlarını bir dizi olarak getirir.
getElementsByTagName(name)Belirli bir tag adına ait tüm HTML elemanlarını bir dizi olarak getirir.
querySelector(selector)CSS seçici ile eşleşen ilk HTML elemanını getirir.
querySelectorAll(selector)CSS seçici ile eşleşen tüm HTML elemanlarını bir dizi olarak getirir.
createElement(tag)Belirli bir tag ile yeni bir HTML elemanı oluşturur.
appendChild(element)Bir HTML elemanını başka bir HTML elemanının son çocuğu olarak ekler.
removeChild(element)Bir HTML elemanını siler.
setAttribute(name, value)Bir HTML elemanına bir özellik ekler.
getAttribute(name)Bir HTML elemanının bir özelliğini alır.
JavaScript’te DOM Metotları

1. getElementById(id): Belirli bir id’ye sahip olan (haliyle tek bir) HTML elemanını getirir. Bu metot, sayfada belirli bir elemana erişmek gerektiğinde kullanılır. Id özniteliği her zaman bir öğe için benzersiz olmalıdır, bu yüzden bu metotla seçilen öğe de benzersiz olur.

//getElementById("idName")
var div = document.getElementById("myDiv");

2. getElementsByClassName(name): Belirli bir sınıfa ait tüm HTML elemanlarını bir dizi olarak getirir. Belirli bir CSS sınıfına sahip tüm elemanları seçmek istediğinizde bu metodu kullanabilirsiniz. Örneğin, belirli bir sınıfa ait tüm elemanların stillerini değiştirebilirsiniz.

//getElementsByClassName("className")
var items = document.getElementsByClassName("myClass");

3. getElementsByTagName(name): Bu metot, belirli bir tag adına ait tüm HTML elemanlarını bir dizi olarak getirir. Belirli bir HTML etiketine (tag) sahip tüm elemanları seçmek istediğinizde bu metodu kullanabilirsiniz. Örneğin, tüm paragraf elementlerinin metnini değiştirmek için bunu kullanabilirsiniz.

//getElementsByTagName("tagName")
var divs = document.getElementsByTagName("div");

4. querySelector(selector): CSS seçiciyle eşleşen ilk elemanı almak istediğinizde kullanılır. Bu metot, daha kompleks seçicileri kullanarak sayfanın çeşitli yerlerindeki elemanlara erişim sağlar.

//querySelector("")
var firstItem = document.querySelector(".myClass");

5. querySelectorAll(selector): Bu metot, CSS seçici ile eşleşen tüm HTML elemanlarını bir dizi olarak getirir. querySelector gibi, bu da daha karmaşık seçicilerle sayfada eşleşen tüm elemanları seçmenizi sağlar.

//querySelectorAll("")
var items = document.querySelectorAll(".myClass");

6. createElement(tag): Bir HTML elemanı oluşturmak istediğinizde bu metodu kullanabilirsiniz. Bu genellikle dinamik içerik oluşturma durumlarında kullanılır.

//createElement("")
var newDiv = document.createElement("div");

7. appendChild(element): Bu metot, bir HTML elemanını başka bir HTML elemanının son çocuğu olarak ekler.

//appendChild()
var newDiv = document.createElement("div");
document.body.appendChild(newDiv);

8. removeChild(element): Bu metot, tahmin edebileceğiniz üzere bir HTML elemanını siler. Genellikle kullanıcının bir öğeyi silme eylemini gerçekleştirdiği durumlarda kullanılır.

//removeChild()
var firstItem = document.querySelector(".myClass");
firstItem.parentNode.removeChild(firstItem);

9. setAttribute(name, value): Bir HTML elemanının özelliğini ayarlamak veya değiştirmek istediğinizde bu metot kullanılır. Örneğin, bir öğenin “class” veya “id” özniteliklerini dinamik olarak ayarlamak için kullanılır.

//setAttribute(name, value)
var firstItem = document.querySelector(".myClass");
firstItem.setAttribute("id", "newId");

10. getAttribute(name): Bir HTML elemanının özelliğini almak istediğinizde bu metot kullanılır. Bu genellikle bir öğenin belirli bir özelliğine göre bir eylem gerçekleştirmek için kullanılır.

//getAttribute()
var firstItem = document.querySelector(".myClass");
var id = firstItem.getAttribute("id");

Aşağıdaki proje, hem HTML DOM manipülasyonunu hem de JavaScript’i günlük hayatta nasıl kullanabileceklerini anlamalarına yardımcı olacaktır.

//HTML Kodu

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yapılacaklar Listesi</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Yapılacaklar Listesi</h1>
        <div class="input-container">
            <input type="text" id="taskInput" placeholder="Görev ekle">
            <button id="addTaskButton">Ekle</button>
        </div>
        <ul id="taskList"></ul>
    </div>
    <script src="app.js"></script>
</body>
</html>

// JavaScript Kodu

// HTML elemanlarını seçelim
const taskInput = document.getElementById('taskInput'); // Kullanıcıdan görev alır
const addTaskButton = document.getElementById('addTaskButton'); // Görev ekleme butonu
const taskList = document.getElementById('taskList'); // Görevlerin listeleneceği alan

// "Ekle" butonuna tıklanınca çalışacak
addTaskButton.addEventListener('click', function () {
    const taskText = taskInput.value; // Kullanıcının girdiği metni al
    if (taskText === '') {
        alert('Görev boş olamaz!');
        return;
    }

    // Yeni bir liste elemanı oluştur
    const newTask = document.createElement('li');
    newTask.textContent = taskText;

    // Silme butonu ekleyelim
    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'Sil';
    deleteButton.setAttribute('class', 'delete-button'); // Sınıf ekle
    deleteButton.addEventListener('click', function () {
        taskList.removeChild(newTask); // Liste elemanını sil
    });

    // Silme butonunu yeni göreve ekle
    newTask.appendChild(deleteButton);

    // Yeni görevi listeye ekle
    taskList.appendChild(newTask);

    // Input alanını temizle
    taskInput.value = '';
});

 

Projede Kullanılan Metotlar

  1. getElementById: taskInput, addTaskButton ve taskList elemanlarını seçmek için kullanıldı.
  2. createElement: Yeni bir <li> ve <button> elemanı oluşturmak için kullanıldı.
  3. appendChild: Yeni görev ve silme butonunu listeye eklemek için kullanıldı.
  4. removeChild: Bir görevi listeden kaldırmak için kullanıldı.
  5. setAttribute: Silme butonuna sınıf eklemek için kullanıldı.

İlgili Makaleler

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu