JavaScript ile DOM Düğümleri Oluşturma, Ekleme, Değiştirme ve Silme

Giriş

DOM serisini anlama bölümünün önceki iki taksitinde, DOM'da Elemanlara Nasıl Erişilir ve DOM'u Nasıl Geçirdiklerini öğrendik. Bu bilgiyi kullanarak, bir geliştirici DOM'da herhangi bir düğüm bulmak için sınıfları, etiketleri, kimlikleri ve seçicileri kullanabilir ve göreceli düğümleri bulmak için üst, alt ve kardeş özelliklerini kullanabilir.

DOM'la tam olarak yetkinleşmenin bir sonraki adımı, düğümleri ekleme, değiştirme, değiştirme ve kaldırmayı öğrenmektir. Yapılacaklar listesi uygulaması, DOM'da öğeler oluşturabilmeniz, değiştirmeniz ve kaldırmanız gereken bir JavaScript programının pratik bir örneğidir.

Bu yazıda, yeni düğümlerin nasıl oluşturulacağı ve DOM'a nasıl ekleneceği, mevcut düğümlerin yerini alacağı ve düğümlerin nasıl kaldırılacağı üzerinde duracağız.

Yeni Düğümler Oluşturma

Statik bir web sitesinde, HTML'ye bir .html dosyasına doğrudan yazarak öğeler sayfaya eklenir. Dinamik bir web uygulamasında, öğeler ve metinler genellikle JavaScript ile eklenir. createElement() ve createTextNode() yöntemleri createTextNode() yeni düğümler oluşturmak için kullanılır.

Property/Method
Description
createElement()Create a new element node
createTextNode()Create a new text node
node.textContentGet or set the text content of an element node
node.innerHTMLGet or set the HTML content of an element

Başlamak için bir index.html dosyası oluşturup yeni bir proje dizinine kaydettirelim.

index.html<!DOCTYPE html>
<html lang="en">

<head>
<title>Learning the DOM</title>
</head>

<body>
<h1>Document Object Model</h1>
</body>

</html>

Tamam o zaman, Geliştirici Araçları açmak Konsolu gezinmek için sayfanın herhangi tıklayın ve "kontrol" i seçin.

Yeni bir p öğesi oluşturmak için createElement() document nesnesinde kullanacağız.

  • const paragraf = belge.createElement ('p');

Konsolda test edebileceğimiz yeni bir p öğesi oluşturduk.

  • console.log (paragraf)

Output<p></p>

paragraph değişkeni, boş bir p elemanı çıktılar; bu, herhangi bir metin olmadan çok kullanışlı değildir. textContent metin eklemek için, textContent özelliğini ayarlarız.

  • paragraph.textContent = "Ben yepyeni bir paragrafım.";
  • console.log (paragraf)

Output<p>I'm a brand new paragraph.</p>

textContent createElement() ve textContent bileşimi, eksiksiz bir öğe düğümü oluşturur.

Eleman içeriğini ayarlamak için alternatif bir yöntem, bir öğeye HTML yanı sıra metin eklemenize izin veren innerHTML özelliği ile yapılır.

  • paragraph.innerHTML = "Ben <strong> kalın </ strong> metinli bir paragrafım.";

Not:
Bu işe yarasa ve bir öğeye içerik eklemek için yaygın bir yöntem olsa da, satır içi JavaScript'i bir öğeye ekleyebileceğinden, innerHTML yöntemini kullanma ile ilişkili olası bir çapraz site komut dosyası (XSS) riski vardır. Bu nedenle, bunun yerine, HTML etiketlerini çıkaracak textContent kullanılması önerilir.

createTextNode() yöntemi ile bir metin düğümü oluşturmak da mümkündür.

  • const text = document.createTextNode ("Yeni bir metin düğümüyüm.");
  • console.log (metin)

Output"I'm a new text node."

Bu yöntemlerle yeni öğeler ve metin düğümleri oluşturduk ancak belgeye eklenene kadar bir web sitesinin ön ucunda görünmezler.

Düğümleri DOM'a Ekleme

Ön uçta oluşturduğumuz yeni metin düğümleri ve öğeleri görmek için bunları document eklememiz gerekecek. appendChild() ve insertBefore() yöntemleri, üst öğenin başına, ortasına veya sonuna öğe eklemek için kullanılır ve replaceChild() , eski bir düğümün yeni bir düğümle değiştirilmesi için kullanılır.

Property/Method
Description
node.appendChild()Add a node as the last child of a parent element
node.insertBefore()Insert a node into the parent element before a specified sibling node
node.replaceChild()Replace an existing node with a new node

Bu yöntemleri uygulamak için HTML'de bir yapılacaklar listesi oluşturalım:

todo.html<ul>
<li>Buy groceries</li>
<li>Feed the cat</li>
<li>Do laundry</li>
</ul>

Sayfanızı tarayıcıya yüklediğinizde, şunun gibi görünecektir:

Yapılacaklar listesinin sonuna yeni bir madde eklemek için, yukarıdaki "Yeni Bağlantıların Oluşturulması" bölümünde yaptığımız gibi öğeyi yaratmalı ve ilk önce metin eklemeliyiz.

  • // Yapılacaklar listesi ul element
  • const todoList = belge.querySelector ('ul');
  • // Yeni yapılacaklar oluştur
  • const newTodo = document.createElement ('li');
  • newTodo.textContent = 'Ev ödevi yapın';

Artık yapılacak yeni işimiz için eksiksiz bir appendChild() olduğu için appendChild() ile listenin sonuna ekleyebilirsiniz.

  • // Listenin sonuna yeni yapılacaklar ekleyin
  • todoList.appendChild (newTodo);

Yeni görebilirsiniz li eleman sonuna eklenen edilmiştir ul .

todo.html<ul>
<li>Buy groceries</li>
<li>Feed the cat</li>
<li>Do laundry</li>
<li>Do homework</li>
</ul>

Belki de daha yüksek önceliğimiz olan bir görevimiz vardır ve onu listenin başlangıcına eklemek istiyoruz. createElement() yalnızca bir öğe yaratır ve tekrar kullanılamaz olduğundan, başka bir öğe oluşturmanız gerekir.

  • // Yeni yapılacaklar oluştur
  • const anotherTodo = document.createElement ('li');
  • anotherTodo.textContent = 'Ödemeleri ödeyin';

insertBefore() kullanarak listenin başına ekleyebilirsiniz. Bu yöntem, iki bağımsız değişkeni alır; ilki, eklenecek yeni alt düğümdür ve ikincisi, yeni düğümü hemen izleyecek olan kardeş düğümdür. Bir başka deyişle, yeni düğümü bir sonraki kardeş düğümünden önce yerleştiriyorsunuz. Bu, aşağıdaki sahte koda benzer görünecek:

parentNode.insertBefore(newNode, nextSibling);

Yapılacaklar listesi örneğimiz için, yeni anotherTodo öğesini, şu anda Buy groceries listesi öğesi olan listenin ilk öğe çocuğundan önce ekleyeceğiz.

  • // Listenin başına yeni yapılacaklar ekleyin
  • todoList.insertBefore (anotherTodo, todoList.firstElementChild);

todo.html<ul>
<li>Pay bills</li>
<li>Buy groceries</li>
<li>Feed the cat</li>
<li>Do laundry</li>
<li>Do homework</li>
</ul>

Yeni düğüm, listenin başında başarıyla eklendi. Şimdi bir üst öğeye bir düğüm ekleme biliyoruz. Yapmamız gereken sonraki şey varolan bir düğümün yeni bir düğümle değiştirilmesidir.

Bir düğümün nasıl değiştirileceğini göstermek için mevcut bir yapılacakları değiştiririz. Yeni bir öğe yaratmanın ilk adımı aynı kalır.

  • const modifiedTodo = document.createElement ('li');
  • modifiedTodo.textContent = 'Köpeğe besleme';

insertBefore() , replaceChild() iki argümanı alır – yeni düğüm ve değiştirilecek düğüm, aşağıda sözde kodda gösterildiği gibi.

parentNode.replaceChild(newNode, oldNode);

Listenin üçüncü unsurundaki çocuğunu değiştirilmiş yapılacak ile değiştiririz.

  • // Varolan yapılacakları değiştirilmiş yapılacaklarla değiştir
  • todoList.replaceChild (modifiedTodo, todoList.children [2]);

todo.html<ul>
<li>Pay bills</li>
<li>Buy groceries</li>
<li>Feed the dog</li>
<li>Do laundry</li>
<li>Do homework</li>
</ul>

appendChild() , insertBefore() ve replaceChild() öğelerinin birleşimiyle appendChild() herhangi bir yere düğümler ve öğeler ekleyebilirsiniz.

Düğümleri DOM'dan Kaldırma

Artık elemanları nasıl oluşturacağımızı, onları DOM'ya ekleyeceğimizi ve mevcut öğeleri nasıl değiştireceğimizi biliyoruz. Son adım, mevcut düğümleri DOM'dan kaldırmayı öğrenmektir. Child düğümleri removeChild() ile bir üst öğeden kaldırılabilir ve bir düğümün kendisi remove() ile remove() .

Method
Description
node.removeChild()Remove child node
node.remove()Remove node

Yukarıdaki yapılacaklar örneğini kullanarak, tamamlandıktan sonra öğeleri silmeyi isteyeceğiz. Ödevinizi tamamladıysanız, removeChild() ile listenin son çocuğu olan Ev Do homework öğesini kaldırabilirsiniz.

  • todoList.removeChild (todoList.lastElementChild);

todo.html<ul>
<li>Pay bills</li>
<li>Buy groceries</li>
<li>Feed the dog</li>
<li>Do laundry</li>
</ul>

Başka bir yöntem, doğrudan düğümde remove() yöntemini kullanarak düğümün kendisini kaldırmak olabilir.

  • // İkinci öğe çocuğunu todoList'ten kaldır
  • todoList.children [1] .Gergi ();

todo.html<ul>
<li>Pay bills</li>
<li>Feed the dog</li>
<li>Do laundry</li>
</ul>

removeChild() ve remove() arasında herhangi bir düğümü DOM'dan kaldırabilirsiniz. DOM'dan alt öğeleri kaldırmak için görebileceğiniz diğer bir yöntem, üst öğenin innerHTML özelliğini boş bir dizeye ( "" ) ayarlamaktır. Daha az açık olduğu için bu tercih edilen yöntem değildir, ancak mevcut kodda görebilirsiniz.

Sonuç

Bu yazıda, yeni düğümler ve öğeler oluşturmak için JavaScript'i nasıl kullanacağınızı öğrendik ve bunları DOM'a ekledik ve mevcut düğümleri ve öğeleri değiştirip kaldırdık.

Bu noktada, DOM dizilimini anlama dizisinde, DOM'daki herhangi bir öğeye nasıl erişeceğinizi, DOM'daki herhangi bir düğümde gezinmeyi ve DOM'nın kendisini nasıl değiştirileceğini bilirsiniz. Artık JavaScript ile temel ön uç web uygulamaları oluşturma konusunda kendinizi rahat hissedebilirsiniz.

Bir önceki yazımız olan Git Deponuzun DigitalOcean Uzaylarına Nasıl Yedeklenir başlıklı makalemizi de okumanızı öneririz.

About This Author

Comments are closed

%d blogcu bunu beğendi: