JavaScript Çorbası: Element Sınıfı

appendChild metodu
Şöyle yaparız.

var ul = document.getElementById("showingDeck");
var li = document.createElement("li");
li.innerHTML = ...;
li.className = 'card';
document.getElementById("showingDeck").appendChild(li);

classList Alanı
CSS ayarları için Element sınıfına class özelliği eklenir veya çıkarılır.

Örnek
Şöyle yaparız

document.getElementById('fos').addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("edit-icon")) {
    console.log(tgt.value);
  }
})

innerHTML Alanı
Ekranda gösderilen HTML'i belirtir.
Örnek
Elimizde şöyle bir kod olsun

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}

p tag'i ile belirtilen nesneyi değiştirmek için şöyle yaparız.

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>
<p id="demo"></p>

</body>
</html>

querySelector metodu
Açıklaması şöyle.

What querySelector does is it finds an element somewhere in the document that matches the CSS selector passed, and then checks that the found element is a descendant of the element you called querySelector on. It doesn't start at the element it was called on and search downwards - rather, it always starts at the document level, looks for elements that match the selector, and checks that the element is also a descendant of the calling context element. It's a bit unintuitive.

Örnek
Şöyle yaparız

const rootDiv = document.getElementById('test');
console.log(rootDiv.querySelector('div').innerHTML);

JavaScript Çorbası

8 Nisan 2019 Pazartesi

Element Sınıfı

Hiç yorum yok:

Yorum Gönder