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:

⭐ 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");

⭐ 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");

⭐ 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 kullanılabilirainiz.

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

⭐ 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");

⭐ 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");

⭐ 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");

⭐ 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);

⭐ 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);

⭐ 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");

⭐ 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");