javascript Dom Fonksiyonlar

JavaScript DOM (Document Object Model) fonksiyonları, web sayfasındaki HTML, CSS ve JavaScript içeriğini programatik olarak manipüle etmek için kullanılan bir dizi işlevdir. DOM, web sayfasının ağaç benzeri bir yapıda temsil edildiği ve her öğenin bir nesne olarak temsil edildiği bir API'dir.

JavaScript ile birlikte kullanabileceğiniz bazı DOM fonksiyonları aşağıda listelenmiştir:

getElementById(): ID'si belirtilen bir HTML elementini seçmek için kullanılır.

 
var element = document.getElementById("myElementId");

getElementsByTagName(): Belirli bir HTML tag'ı ile etiketlenmiş tüm elementleri seçmek için kullanılır.

  
var elements = document.getElementsByTagName("p");

getElementsByClassName(): Belirli bir class ismiyle etiketlenmiş tüm elementleri seçmek için kullanılır.

  
var elements = document.getElementsByClassName("myClass");

createElement(): Belirtilen etiketle yeni bir HTML elementi oluşturmak için kullanılır.

  
var newElement = document.createElement("div");

removeChild(): Belirtilen bir elementi başka bir elementin altından kaldırmak için kullanılır.

  
var parentElement = document.getElementById("parent");
var childElement = document.getElementById("child");
parentElement.removeChild(childElement);

innerHTML: Belirtilen bir elementin içeriğini değiştirmek için kullanılır.

  
var element = document.getElementById("myElementId");
element.innerHTML = "Yeni içerik";

addEventListener(): Belirtilen bir olayı (event) dinlemek ve uygun bir fonksiyon çalıştırmak için kullanılır.

  
var element = document.getElementById("myElementId");
element.addEventListener("click", function() {
  alert("Tıklama olayı gerçekleşti!");
});

setAttribute(): Belirtilen bir HTML elementine bir özellik (attribute) atamak veya var olan bir özelliği değiştirmek için kullanılır.

  
var element = document.getElementById("myElementId");
element.setAttribute("class", "myClass");

getAttribute(): Belirtilen bir HTML elementinin belirli bir özelliğinin değerini almak için kullanılır.

  
var element = document.getElementById("myElementId");
var value = element.getAttribute("class");

style: Belirtilen bir elementin stil özelliklerine erişmek veya stil özelliklerini değiştirmek için kullanılır.

  
var element = document.getElementById("myElementId");
element.style.color = "red";
element.style.backgroundColor = "yellow";

querySelector(): Belirtilen bir CSS seçicisine göre bir elementi seçmek için kullanılır.

  
var element = document.querySelector("#myElementId");

querySelectorAll(): Belirtilen bir CSS seçicisine göre tüm elementleri seçmek için kullanılır.

  
var elements = document.querySelectorAll(".myClass");

parentNode: Belirtilen bir HTML elementinin üst elementine (parent) erişmek için kullanılır.

  
var element = document.getElementById("myElementId");
var parentElement = element.parentNode;

childNodes: Belirtilen bir HTML elementinin alt elementlerine (children) erişmek için kullanılır.

  
var parentElement = document.getElementById("parent");
var children = parentElement.childNodes;

firstChild: Belirtilen bir HTML elementinin ilk alt elementine erişmek için kullanılır.

  
var parentElement = document.getElementById("parent");
var firstChild = parentElement.firstChild;

lastChild: Belirtilen bir HTML elementinin son alt elementine erişmek için kullanılır.

  
var parentElement = document.getElementById("parent");
var lastChild = parentElement.lastChild;

nextSibling: Belirtilen bir HTML elementinin bir sonraki alt elementine erişmek için kullanılır.

  
var element = document.getElementById("myElementId");
var nextSibling = element.nextSibling;

previousSibling: Belirtilen bir HTML elementinin bir önceki alt elementine erişmek için kullanılır.

  
var element = document.getElementById("myElementId");
var previousSibling = element.previousSibling;

remove(): Belirtilen bir HTML elementini DOM'dan kaldırmak için kullanılır.

  
var element = document.getElementById("myElementId");
element.remove();

createTextNode(): Belirtilen bir metin düğümü (text node) oluşturmak için kullanılır.

  
var textNode = document.createTextNode("Hello World!");

appendChild(): Belirtilen bir HTML elementini başka bir elemente eklemek için kullanılır.

var parentElement = document.getElementById("parent");
var newElement = document.createElement("div");
parentElement.appendChild(newElement);

insertBefore(): Belirtilen bir HTML elementini belirtilen başka bir elementin önüne eklemek için kullanılır.

  
var parentElement = document.getElementById("parent");
var newElement = document.createElement("div");
var referenceElement = document.getElementById("reference");
parentElement.insertBefore(newElement, referenceElement);

replaceChild(): Belirtilen bir HTML elementini başka bir HTML elementi ile değiştirmek için kullanılır.

  
var parentElement = document.getElementById("parent");
var newElement = document.createElement("div");
var oldElement = document.getElementById("old");
parentElement.replaceChild(newElement, oldElement);

cloneNode(): Belirtilen bir HTML elementinin kopyasını oluşturmak için kullanılır.

  
var element = document.getElementById("myElementId");
var clonedElement = element.cloneNode(true);

innerHTML: Belirtilen bir HTML elementinin içeriğini HTML biçiminde ayarlamak veya almak için kullanılır.

  
var element = document.getElementById("myElementId");
element.innerHTML = "<h1>Hello World!</h1>";
var html = element.innerHTML;

removeEventListener(): Belirtilen bir HTML elementinden olay dinleyicisini kaldırmak için kullanılır.

  
var button = document.getElementById("myButton");
var clickHandler = function() {
  alert("Button clicked!");
};
button.addEventListener("click", clickHandler);
button.removeEventListener("click", clickHandler);

preventDefault(): Bir olayın varsayılan davranışını engellemek için kullanılır.

  
var link = document.getElementById("myLink");
link.addEventListener("click", function(event) {
  event.preventDefault();
  alert("Link clicked!");
});

stopPropagation(): Bir olayın diğer elementlere yayılmasını engellemek için kullanılır.

  
var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.addEventListener("click", function() {
  alert("Parent clicked!");
});
child.addEventListener("click", function(event) {
  event.stopPropagation();
  alert("Child clicked!");
});

getComputedStyle(): Belirtilen bir HTML elementinin hesaplanmış stil özelliklerini almak için kullanılır.

  
var element = document.getElementById("myElementId");
var computedStyle = getComputedStyle(element);
var backgroundColor = computedStyle.backgroundColor;

offsetWidth: Belirtilen bir HTML elementinin genişliğini (width), kenarlıkları ve dolgu dahil olarak almak için kullanılır.

  
var element = document.getElementById("myElementId");
var width = element.offsetWidth;

offsetHeight: Belirtilen bir HTML elementinin yüksekliğini (height), kenarlıkları ve dolgu dahil olarak almak için kullanılır.

  
var element = document.getElementById("myElementId");
var height = element.offsetHeight;

scrollHeight: Belirtilen bir HTML elementinin kaydırıldığında görüntülenen içeriğinin yüksekliğini almak için kullanılır.

  
var element = document.getElementById("myElementId");
var scrollHeight = element.scrollHeight;

scrollIntoView(): Belirtilen bir HTML elementinin görüntülenebilir alanın içine kaydırılmasını sağlamak için kullanılır.

  
var element = document.getElementById("myElementId");
element.scrollIntoView();

classList.add(): Belirtilen bir HTML elementine bir veya daha fazla CSS sınıfını eklemek için kullanılır.

  
var element = document.getElementById("myElementId");
element.classList.add("myClass");

classList.remove(): Belirtilen bir HTML elementinden bir veya daha fazla CSS sınıfını kaldırmak için kullanılır.

  
var element = document.getElementById("myElementId");
element.classList.remove("myClass");

classList.toggle(): Belirtilen bir HTML elementine belirtilen bir CSS sınıfını eklemek veya kaldırmak için kullanılır.

  
var element = document.getElementById("myElementId");
element.classList.toggle("myClass");

classList.contains(): Belirtilen bir HTML elementinin belirtilen bir CSS sınıfını içerip içermediğini kontrol etmek için kullanılır.

  
var element = document.getElementById("myElementId");
if (element.classList.contains("myClass")) {
  // do something
}

setAttribute(): Belirtilen bir HTML elementinin belirtilen bir özniteliğinin değerini ayarlamak için kullanılır.

  
var element = document.getElementById("myElementId");
element.setAttribute("href", "http://www.example.com");

removeAttribute(): Belirtilen bir HTML elementinin belirtilen bir özniteliğini kaldırmak için kullanılır.

  
var element = document.getElementById("myElementId");
element.removeAttribute("href");

outerHTML: Belirtilen bir HTML elementinin kendisi ve içeriğini almak veya ayarlamak için kullanılır.

  
var element = document.getElementById("myElementId");
var html = element.outerHTML;
element.outerHTML = "
new html
";

getComputedStyle(): Belirtilen bir HTML elementinin hesaplanmış stil özelliklerini almak için kullanılır.

  
var element = document.getElementById("myElementId");
var style = getComputedStyle(element);
var color = style.getPropertyValue("color");

getBoundingClientRect(): Belirtilen bir HTML elementinin boyut ve konumunu almak için kullanılır.

  
var element = document.getElementById("myElementId");
var rect = element.getBoundingClientRect();
var width = rect.width;
var height = rect.height;
var top = rect.top;
var left = rect.left;

removeEventListener(): Belirtilen bir HTML elementinden olay dinleyicisini kaldırmak için kullanılır.

  

var element = document.getElementById("myElementId");
function clickHandler() {
  alert("Clicked!");
}
element.addEventListener("click", clickHandler);
element.removeEventListener("click", clickHandler);
preventDefault(): Bir olayın varsayılan davranışını engellemek için kullanılır.
javascript
Copy code
var link = document.getElementById("myLink");
link.addEventListener("click", function(event) {
  event.preventDefault();
});

stopPropagation(): Olayın daha fazla yayılmasını engellemek için kullanılır.

  
var child = document.getElementById("childElementId");
var parent = document.getElementById("parentElementId");
child.addEventListener("click", function(event) {
  alert("Child clicked!");
  event.stopPropagation();
});
parent.addEventListener("click", function() {
  alert("Parent clicked!");
});

insertBefore(): Bir HTML elementine belirtilen bir alt elementi belirli bir konuma eklemek için kullanılır.

  
var parent = document.getElementById("myParentId");
var child1 = document.createElement("div");
var child2 = document.createElement("div");
parent.appendChild(child1);
parent.insertBefore(child2, child1);

removeChild(): Bir HTML elementinden belirtilen bir alt elementi kaldırmak için kullanılır.

  
var parent = document.getElementById("myParentId");
var child = document.getElementById("myChildId");
parent.removeChild(child);

document.createElementNS(): Belirtilen bir ad alanıyla birlikte belirtilen bir HTML elementini oluşturmak için kullanılır.

  
var svgNS = "http://www.w3.org/2000/svg";
var svgElement = document.createElementNS(svgNS, "rect");

document.createAttribute(): Belirtilen bir niteliği oluşturmak için kullanılır.

  
var attribute = document.createAttribute("disabled");

getAttribute(): Belirtilen bir HTML elementinin belirtilen niteliğinin değerini almak için kullanılır.

  
var element = document.getElementById("myElementId");
var value = element.getAttribute("disabled");

hasAttribute(): Belirtilen bir HTML elementinde belirtilen bir niteliğin var olup olmadığını kontrol etmek için kullanılır.

  
var element = document.getElementById("myElementId");
if (element.hasAttribute("disabled")) {
  // do something
}

style.setProperty(): Belirtilen bir HTML elementinin stil özelliğinin değerini ayarlamak için kullanılır.

  
var element = document.getElementById("myElementId");
element.style.setProperty("color", "red");

classList.add(): Belirtilen bir HTML elementinin sınıfına bir sınıf eklemek için kullanılır.

  
var element = document.getElementById("myElementId");
element.classList.add("newClass");

classList.remove(): Belirtilen bir HTML elementinden bir sınıfı kaldırmak için kullanılır.

var element = document.getElementById("myElementId");
element.classList.remove("oldClass");

classList.toggle(): Belirtilen bir HTML elementinin sınıfını eklemek veya kaldırmak için kullanılır.

  

var element = document.getElementById("myElementId");
element.classList.toggle("newClass");

classList.contains(): Belirtilen bir HTML elementinin belirtilen sınıfı içerip içermediğini kontrol etmek için kullanılır.

  
var element = document.getElementById("myElementId");
if (element.classList.contains("newClass")) {
  // do something
}

createTextNode(): Yeni bir metin düğümü oluşturmak için kullanılır.

  
var textNode = document.createTextNode("This is a text node");

removeChild(): Bir HTML elementinden bir alt element kaldırmak için kullanılır.

  
var parentElement = document.getElementById("parentElementId");
var childElement = document.getElementById("childElementId");
parentElement.removeChild(childElement);

Bu DOM fonksiyonları, web uygulamalarının olayları işlemesine, stil özelliklerini almasına ve elementleri seçmesine olanak tanır. Bu fonksiyonlar, web uygulamalarının zengin ve etkileşimli bir kullanıcı arayüzüne sahip olmasına yardımcı olur.

HTML elementlerinin özelliklerini (nitelikleri, stilleri, sınıfları) dinamik olarak değiştirmeyi sağlar. Bu, web sayfalarının görünümünü ve işlevselliğini değiştirmek için kullanışlı bir yoldur.

JavaScript ile yeni HTML elementleri oluşturmayı, mevcut elementlere alt elementler eklemeyi, elementlerden alt elementleri kaldırmayı veya değiştirmeyi sağlar. Bu, web sayfalarının dinamik olarak oluşturulmasını ve değiştirilmesini sağlar.

5778

Gönder