Genellikle geliştiriciler, DOM ile bir şeyler yapmaları gerektiğinde jQuery kullanır. Ancak, hemen hemen her DOM manipülasyonu üzerinde yapılabilir. saf JavaScript DOM API'sini kullanarak.

Bu API'ye daha ayrıntılı olarak bakalım:

Sonunda, herhangi bir projede kullanılabilecek kendi basit DOM kitaplığınızı yazacaksınız.

DOM sorguları

DOM sorguları, bağımsız değişken olarak rastgele bir CSS seçicisi alan .querySelector() yöntemi kullanılarak yapılır.

Const myElement = document.querySelector("#foo > div.bar")

İlk eşleşen öğeyi döndürür. Bunun tersini yapabilirsiniz - bir öğenin bir seçiciyle eşleşip eşleşmediğini kontrol edin:

MyElement.matches("div.bar") === doğru

Bir seçiciyle eşleşen tüm öğeleri almak istiyorsanız, aşağıdaki yapıyı kullanın:

Const myElements = document.querySelectorAll(".bar")

Hangi ana öğeye atıfta bulunacağınızı biliyorsanız, kodun tamamını aramak yerine, alt öğeleri arasında arama yapabilirsiniz:

Const myChildElemet = myElement.querySelector("input") // Yerine: // document.querySelector("#foo > div.bar input")

Soru ortaya çıkıyor: o zaman neden.getElementsByTagName() gibi daha az kullanışlı yöntemler kullanıyorsunuz? Küçük bir sorun var - output.querySelector()'un sonucu güncellenmiyor ve eklediğimizde yeni eleman(bkz.), değişmeyecek.

const element1 = document.querySelectorAll("div") const element2 = document.getElementsByTagName("div") const yeniElement = document.createElement("div") document.body.appendChild(newElement) element1.length === element2.length // yanlış

Ayrıca querySelectorAll() her şeyi tek bir listede toplar, bu da onu çok verimli yapmaz.

Listelerle nasıl çalışılır?

Bunun da ötesinde, .querySelectorAll() iki küçük tuhaflığa sahiptir. Sonuçlara ilişkin yöntemleri çağırıp bunların her birine uygulanmasını bekleyemezsiniz (jQuery ile yapmaya alışık olabileceğiniz gibi). Her durumda, döngüdeki tüm öğeler üzerinde yineleme yapmanız gerekecektir. İkincisi, döndürülen nesne bir dizi değil, bir öğe listesidir. Bu nedenle, dizi yöntemleri çalışmayacaktır. Tabii ki, listeler için .forEach() gibi yöntemler var, ancak ne yazık ki, her durum için uygun değiller. Bu nedenle listeyi bir diziye dönüştürmek daha iyidir:

// Array.from() Array.from(myElements).forEach(doSomethingWithEachElement) kullanma // Veya bir dizi prototipi (ES6 öncesi) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // Daha kolay: .forEach.call (myElements , doSomethingWithEachElement)

Her öğenin bir "aile"ye atıfta bulunan bazı özellikleri vardır.

MyElement.children myElement.firstElementChild myElement.lastElementChild myElement.previousElementSibling myElement.nextElementSibling

Öğe arabirimi Düğüm arabiriminden devralındığı için aşağıdaki özellikler de mevcuttur:

MyElement.childNodes myElement.firstChild myElement.lastChild myElement.previousSibling myElement.nextSibling myElement.parentNode myElement.parentElement

İlk özellikler öğeye atıfta bulunurken, ikincisi (.parentElement dışında) herhangi bir türdeki öğelerin listeleri olabilir. Buna göre, elemanın türünü kontrol edebilirsiniz:

MyElement.firstChild.nodeType === 3 // bu öğe bir metin düğümü olacak

Sınıflar ve Nitelikler Ekleme

Yeni bir sınıf eklemek çok kolaydır:

myElement.classList.add("foo") myElement.classList.remove("bar") myElement.classList.toggle("baz")

Bir öğeye özellik eklemek, herhangi bir nesneye özellik eklemekle tamamen aynıdır:

// const değeri = myElement.value özniteliğinin değerini alın // Özniteliği, myElement.value öğesinin bir özelliği olarak ayarlayın = "(!LANG:foo)" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

.getAttibute() , .setAttribute() ve .removeAttribute() yöntemlerini kullanabilirsiniz. Öğenin HTML özniteliklerini (DOM özelliklerinin aksine) hemen değiştirirler, bu da tarayıcının yeniden çizimini tetikler (tarayıcıdaki geliştirici araçlarını kullanarak öğeyi inceleyerek değişiklikleri görebilirsiniz). Bu tür yeniden çizimler yalnızca DOM özelliklerini ayarlamaktan daha fazla kaynak gerektirmekle kalmaz, aynı zamanda beklenmeyen hatalara da yol açabilir.

Genellikle colspan gibi karşılık gelen DOM özelliklerine sahip olmayan öğelerde kullanılırlar. Veya kullanımları gerçekten gerekliyse, örneğin devralma sırasında HTML özellikleri için (bkz.).

CSS Stilleri Ekleme

Diğer özelliklerle aynı şekilde eklenirler:

MyElement.style.marginLeft = "2em"

Bazı belirli özellikler.style kullanılarak ayarlanabilir, ancak bazı hesaplamalardan sonra değerleri almak istiyorsanız, window.getComputedStyle() kullanmak daha iyidir. Bu yöntem, öğeyi alır ve hem öğenin hem de üst öğesinin stillerini içeren bir CSSStyleDeclaration döndürür:

Window.getComputedStyle(myElement).getPropertyValue("sol kenar")

DOM'yi değiştirme

Öğeleri taşıyabilirsiniz:

// element1'i element2'nin son çocuğu olarak ekleme element1.appendChild(element2) // element2'yi element1'in alt öğesi olarak element3'ten önce ekleme element1.insertBefore(element2, element3)

Taşımak istemiyorsanız ancak bir kopya yapıştırmanız gerekiyorsa, şunu kullanın:

// Bir klon const oluştur myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

.cloneNode() yöntemi, argüman olarak bir boole değeri alır ve true ise, aynı zamanda klonlar ve alt öğeler.

Elbette yeni öğeler oluşturabilirsiniz:

const myNewElement = document.createElement("div") const myNewTextNode = document.createTextNode("bir metin")

Ve sonra bunları yukarıda gösterildiği gibi yerleştirin. Bir öğeyi doğrudan silemezsiniz, ancak bunu ana öğe aracılığıyla yapabilirsiniz:

MyParentElement.removeChild(myElement)

Dolaylı olarak da başvurabilirsiniz:

MyElement.parentNode.removeChild(myElement)

Öğeler üzerindeki yöntemler

Her öğenin .innerHTML ve .textContent gibi özellikleri vardır, bunlar HTML kodunu ve buna göre metnin kendisini içerir. Aşağıdaki örnek, bir öğenin içeriğini değiştirir:

// HTML'yi değiştirin myElement.innerHTML = `

yeni içerik

bip bip bip bip

` // Bu, myElement.innerHTML = null içeriğini kaldırır // HTML'ye ekle myElement.innerHTML += ` okumaya devam et...

Aslında, HTML'yi değiştirmek kötü bir fikirdir, çünkü daha önce yapılan tüm değişiklikleri kaybeder ve olay işleyicilerini aşırı yükler. Bu yöntemi yalnızca tüm HTML'yi tamamen atarak ve sunucudan bir kopyayla değiştirerek kullanmak daha iyidir. Bunun gibi:

const link = document.createElement("a") const metin = document.createTextNode("okumaya devam edin...") const hr = document.createElement("hr") link.href = "foo.html" link.appendChild( metin) myElement.appendChild(bağlantı) myElement.appendChild(saat)

Ancak bu, tarayıcının iki kez yeniden çizilmesine neden olurken, .innerHTML yalnızca bir yeniden çizime neden olur. Önce DocumentFragment öğesine her şeyi eklerseniz ve ardından ihtiyacınız olan parçayı eklerseniz bu sorunu çözebilirsiniz:

Const parça = document.createDocumentFragment() parça.appendChild(metin) parça.appendChild(saat) myElement.appendChild(parça)

Etkinlik sahipleri

En basit işleyicilerden biri:

MyElement.onclick = onclick işlevi (olay) ( console.log(event.type + "kovuldu") )

Ancak genel bir kural olarak bundan kaçınılmalıdır. Burada, .onclick öğenin bir özelliğidir ve teoride bunu değiştirebilirsiniz, ancak eskisine başvuran başka bir işlevi kullanarak başka işleyiciler ekleyemezsiniz.

İşleyici eklemek için .addEventListener() kullanmak daha iyidir. Üç bağımsız değişken alır: bir olay türü, her tetiklendiğinde çağrılacak bir işlev ve bir yapılandırma nesnesi (buna daha sonra geleceğiz).

MyElement.addEventListener("tıklama", function (event) ( console.log(event.type + " kovuldu") )) myElement.addEventListener("click", function (event) ( console.log(event.type + " tekrar kovuldu") ))

event.target özelliği, olayın eklendiği öğeyi ifade eder.

Ve böylece tüm özelliklere erişebilirsiniz:

// `forms` özelliği, tüm formlara bağlantılar içeren bir dizidir const myForm = document.forms const myInputElements = myForm.querySelectorAll("input") Array.from(myInputElements).forEach(el => ( el.addEventListener(" change ", function (event) ( console.log(event.target.value) )) ))

Varsayılan Eylemleri Önleme

Bunun için standart eylemleri engelleyen .preventDefault() yöntemi kullanılır. Örneğin, istemci tarafı yetkilendirme başarılı olmazsa form gönderimini engeller:

MyForm.addEventListener("gönder", function (event) ( const name = this.querySelector("#name") if (name.value === "(!LANG:Donald Duck)") { alert("You gotta be kidding!") event.preventDefault() } }) !}

.stopPropagation() yöntemi, alt öğeye bağlı belirli bir olay işleyiciniz ve üst öğeye iliştirilmiş aynı olay için ikinci bir işleyiciniz varsa yardımcı olacaktır.

Daha önce belirtildiği gibi, .addEventListener() yöntemi, yapılandırma nesnesi olarak isteğe bağlı üçüncü bir bağımsız değişken alır. Bu nesne, aşağıdaki boole özelliklerinden herhangi birini içermelidir (tümü varsayılan olarak false olarak ayarlanmıştır):

  • yakalama: olay, DOM'da aşağıdaki diğer herhangi bir öğeden önce bu öğeye eklenecektir;
  • bir kez: Bir etkinlik yalnızca bir kez sabitlenebilir.
  • pasif: event.preventDefault() yok sayılır (hata sırasındaki istisna).

En yaygın özellik .capture'dır ve o kadar yaygındır ki, bunun için bir kısayol vardır: onu bir yapılandırma nesnesine iletmek yerine, değerini burada belirtmeniz yeterlidir:

MyElement.addEventListener(tür, dinleyici, doğru)

İşleyiciler, iki bağımsız değişken alan .removeEventListener() yöntemi kullanılarak kaldırılır: olay türü ve kaldırılacak işleyiciye başvuru. Örneğin, once özelliği şu şekilde uygulanabilir:

MyElement.addEventListener("change", function listener (event) ( console.log(event.type + " get tetiklendi " + this) this.removeEventListener("change", listener) )

Miras

Diyelim ki bir öğeniz var ve tüm alt öğeleri için bir olay işleyicisi eklemek istiyorsunuz. Ardından, yukarıda gösterildiği gibi myForm.querySelectorAll("input") yöntemini kullanarak bunlar arasında dolaşmanız gerekir. Ancak, forma öğeler ekleyebilir ve içeriklerini event.target ile kontrol edebilirsiniz.

MyForm.addEventListener("change", function (event) ( const target = event.target if (target.matches("input")) ( console.log(target.value) ) )

Ve bu yöntemin bir artısı daha, işleyicinin otomatik olarak yeni alt öğelere eklenecek olmasıdır.

Animasyon

Animasyon eklemenin en kolay yolu, geçiş özelliği ile CSS kullanmaktır. Ancak daha fazla esneklik için (örneğin bir oyun için), JavaScript daha uygundur.

Özellikle mobil cihazlarda uygulamanız donabileceğinden, animasyon bitene kadar window.setTimeout() yöntemini çağırmak iyi bir fikir değildir. Bir sonraki yeniden çizime kadar tüm değişiklikleri kaydetmek için window.requestAnimationFrame() kullanmak daha iyidir. Bir işlevi argüman olarak alır ve bu da bir zaman damgası alır:

const start = window.performance.now() const süre = 2000 window.requestAnimationFrame(function fadeIn (şimdi)) ( const ilerleme = şimdi - myElement.style.opacity'yi başlat = ilerleme / süre eğer (ilerleme)< duration) { window.requestAnimationFrame(fadeIn) } }

Bu sayede çok akıcı bir animasyon elde edilir. Mark Brown makalesinde bu konuyu tartışıyor.

Kendi kütüphanemizi yazmak

DOM'da, öğelerle bir şeyler yapmak için her zaman öğeler üzerinde yineleme yapmanız gerektiği gerçeği, jQuery'nin $(".foo").css(((color: "red")) sözdizimine kıyasla oldukça sıkıcı görünebilir. Ama neden bu görevi kolaylaştırmak için kendi yöntemlerinizden bazılarını yazmıyorsunuz?

Const $ = function $(selektör, bağlam = belge) ( const elementler = Array.from(context.querySelectorAll(selector)) return ( elementler, html (newHtml) ( this.elements.forEach(element => ( element.innerHTML = newHtml )) bunu döndür ), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss) )) bunu döndür), on (event, handler, options) ( this.elements .forEach(element => ( element.addEventListener(event, handler, options)) )) bunu döndür )) )

sözde kod

$(".rightArrow").click(function() ( rightArrowParents = this.dom(); //.dom(); sözde işlevdir ... tüm uyarıyı göstermelidir(rightArrowParents); ));

Alarm mesajı şöyle olacaktır:

vücut div.lol a.rightArrow

Bunu javascript/jquery ile nasıl alabilirim?

JQuery'yi bu şekilde kullanmak (ardından olay dışında jQuery kullanmayan bir çözüm, önemliyse çok daha az işlev çağrısı):

Gerçek zamanlı örnek:

$(".rightArrow").click(function() ( var rightArrowParents = ; $(this).parents().addBack().not("html").each(function() ( var giriş = this.tagName .toLowerCase(); if (this.className) ( girdi += "." + this.className.replace(/ /g, "."); ) rightArrowParents.push(giriş); )); alert(rightArrowParents.join (" ")); false döndür; ));

buraya tıklayın

(Canlı örneklerde, birden çok sınıfın ele alındığını göstermek için div'deki class niteliğini lol multi olarak güncelledim.)

İşte tam eleman eşleştirme için bir çözüm.

seçici olduğunu anlamak önemlidir. (gerçek değil) chrome araçlarının gösterdiği, DOM'daki bir öğeyi benzersiz şekilde tanımlamaz. ( örneğin, ardışık yayılma öğelerinin bir listesi arasında ayrım yapmaz. Konumlandırma/indeksleme bilgisi yok)

$.fn.fullSelector = function() ( var path = this.parents().addBack(); var quickCss = path.get().map(function (item) ( var self = $(item), id = item) .id ? "#" + item.id: "", clss = item.classList.length ? item.classList.toString().split(" ").map(işlev (c) ( dönüş "." + c; )).join("") : "", isim = item.nodeName.toLowerCase(), index = self.siblings(name).length ? ":nth-child(" + (self.index() + 1) + ")" : ""; if (ad === "html" || ad === "gövde") ( dönüş adı; ) dönüş adı + dizin + id + clss; )).join(" > ") ; quickCss'i döndür; );

Ve bunu şu şekilde kullanabilirsiniz:

Console.log($("bazı seçici").fullSelector());

Snippet'i T.J.'den taşıdım. Küçük bir jQuery eklentisi için kalabalık. JQuery sürümünü kullandım, haklı olsa bile, tamamen gereksiz bir ek yük, ancak bunu yalnızca hata ayıklama amacıyla kullanıyorum, bu yüzden umurumda değil.

Kullanım:

iç içe yayılma
basit açıklık
ön

// sonuç (dizi): ["gövde", "div.sampleClass"] $("span").getDomPath(yanlış) // sonuç (dize): gövde > div.sampleClass $("span").getDomPath( ) // sonuç (dizi): ["gövde", "div#test"] $("pre").getDomPath(yanlış) // sonuç (dize): gövde > div#test $("pre").getDomPath ()

var obj = $("#show-editor-button"), path = ""; while (typeof obj.prop("tagName") != "tanımsız")( if (obj.attr("class"))( path = "."+obj.attr("class").replace(/\s /g , ".") + yol; ) if (obj.attr("id"))( yol = "#"+obj.attr("id") + yol; ) yol = " " +obj.prop( "tagName").toLowerCase() + yol; obj = obj.parent(); ) console.log(path);

merhaba bu işlev, yolda görünmeyen geçerli öğeyle ilgili bir hatayı çözer

Şimdi kontrol et

$j(".wrapper").click(function(event) ( selectedElement=$j(event.target); var rightArrowParents = ; $j(event.target).parents().not("html,body") .each(function() ( var input = this.tagName.toLowerCase(); if (this.className) ( girdi += "." + this.className.replace(/ /g, "."); )else if (this.id)(giriş += "#" + this.id; ) input=replaceAll(giriş,"..","."); rightArrowParents.push(giriş); )); rightArrowParents.reverse(); //if(event.target.nodeName.toLowerCase()=="a" || event.target.nodeName.toLowerCase()=="h1")( var input = event.target.nodeName.toLowerCase(); if (event.target.className) ( girdi += "." + event.target.className.replace(/ /g, "."); )else if(event.target.id)( girdi += "#" + event.target.id; ) rightArrowParents.push(giriş); // )

$j = jQuery Değişkeni nerede

ayrıca sorunu sınıf adında .. ile çözün

işte değiştirme işlevi:

function escapeRegExp(str) ( return str.replace(/([.*+?^=!:$()()|\[\]\/\\])/g, "\\$1"); ) function replaceAll(str, find, replace) ( return str.replace(new RegExp(escapeRegExp(find), "g"), replace); )

İşte jQuery yolunu döndüren yerel bir JS sürümü. Ayrıca, varsa öğeler için kimlikler de ekliyorum. Bu, dizide kimliği görürseniz size en kısa yolu seçme seçeneği sunar.

varpath = getDomPath(eleman); konsol.log(path.join(" > "));

Gövde > bölüm:eq(0) > div:eq(3) > bölüm#içerik > bölüm#firehose > div#firehoselist > makale#firehose-46813651 > başlık > h2 > span#title-46813651

İşte fonksiyon.

işlev getDomPath(el) ( var stack = ; while (el.parentNode != null) ( console.log(el.nodeName); var sibCount = 0; var sibIndex = 0; for (var i = 0; i< el.parentNode.childNodes.length; i++) { var sib = el.parentNode.childNodes[i]; if (sib.nodeName == el.nodeName) { if (sib === el) { sibIndex = sibCount; } sibCount++; } } if (el.hasAttribute("id") && el.id != "") { stack.unshift(el.nodeName.toLowerCase() + "#" + el.id); } else if (sibCount >1) ( stack.unshift(el.nodeName.toLowerCase() + ":eq(" + sibIndex + ")"); ) else ( stack.unshift(el.nodeName.toLowerCase()); ) el = el.parentNode ; ) stack.slice(1) döndür; // html öğesini kaldırır )

Karmaşık ve ağır web uygulamaları bu günlerde yaygınlaştı. Geniş işlevleriyle jQuery gibi tarayıcılar arası ve kullanımı kolay kitaplıklar, anında DOM manipülasyonuna büyük ölçüde yardımcı olabilir. Bu nedenle, birçok geliştiricinin bu tür kitaplıkları, birçok sorunu olan yerel DOM API ile çalışmaktan daha sık kullanması şaşırtıcı değildir. Tarayıcı farklılıkları hala bir sorun olsa da DOM, jQuery'nin popülerlik kazandığı 5-6 yıl öncesine göre şimdi daha iyi durumda.

Bu makalede, DOM'nin ebeveyn, çocuk ve komşu ilişkilerine odaklanarak HTML'yi manipüle etme yeteneğini göstereceğim. Bu özellikler için tarayıcı desteğinin bir dökümü ile bitireceğim, ancak yerel işlevlerin uygulanmasındaki hatalar ve tutarsızlıklar nedeniyle jQuery tür kitaplığının hala iyi bir seçenek olduğunu unutmayın.

Alt düğümleri sayma

Gösteri için aşağıdaki HTML işaretlemesini kullanacağım ve bunu makale boyunca birkaç kez değiştireceğiz:

  • Örnek bir
  • örnek iki
  • örnek üç
  • örnek dört
  • örnek beş
  • Örnek Altı

Var myList = document.getElementById("myList"); konsol.log(myList.children.length); // 6 console.log(myList.childElementCount); // 6

Gördüğünüz gibi, kullanılan teknikler farklı olsa da sonuçlar aynı. İlk durumda, child özelliğini kullanıyorum. Bu salt okunur bir özelliktir ve bir koleksiyon döndürür HTML öğeleri, istenen öğenin içinde bulunur; sayılarını saymak için bu koleksiyonun length özelliğini kullanıyorum.

İkinci örnekte, daha düzenli ve potansiyel olarak daha sürdürülebilir bir yol olduğunu düşündüğüm childElementCount yöntemini kullanıyorum (bununla ilgili daha sonra, ne yaptığını anlamakta zorlanacağınızı sanmıyorum).

ChildNodes.length'i (child.length yerine) kullanmayı deneyebilirim, ancak sonuca bakın:

Var myList = document.getElementById("myList"); konsol.log(myList.childNodes.length); // 13

13 döndürür çünkü childNodes boşluklar dahil tüm düğümlerin bir koleksiyonudur - alt düğümler ve alt öğe düğümleri arasındaki farkı önemsiyorsanız bunu aklınızda bulundurun.

Alt Düğümlerin Varlığını Kontrol Etme

Bir öğenin alt düğümleri olup olmadığını kontrol etmek için hasChildNodes() yöntemini kullanabilirim. Yöntem döndürür boole varlığını veya yokluğunu gösteren:

Var myList = document.getElementById("myList"); konsol.log(myList.hasChildNodes()); // doğru

Listemde alt düğümler olduğunu biliyorum, ancak HTML'yi hiçbiri olmayacak şekilde değiştirebilirim; şimdi işaretleme şöyle görünür:

Ve işte hasChildNodes() öğesini yeniden çalıştırmanın sonucu:

Console.log(myList.hasChildNodes()); // doğru

Yöntem hala true değerini döndürür. Liste herhangi bir öğe içermese de, geçerli bir düğüm türü olan bir boşluk içerir. Bu method sadece eleman düğümlerini değil, tüm düğümleri dikkate alır. hasChildNodes() işlevinin false döndürmesi için işaretlemeyi tekrar değiştirmemiz gerekir:

Ve şimdi beklenen sonuç konsolda görüntüleniyor:

Console.log(myList.hasChildNodes()); // yanlış

Tabii ki, bir boşlukla karşılaşabileceğimi biliyorsam, önce alt düğümlerin varlığını kontrol ederim, ardından aralarında eleman düğümleri olup olmadığını belirlemek için nodeType özelliğini kullanırım.

Alt Öğeler Ekleme ve Kaldırma

DOM'a eleman eklemek ve çıkarmak için kullanılabilecek teknikler vardır. Bunların en ünlüsü, createElement() ve appendChild() yöntemlerinin bir kombinasyonuna dayanır.

VarmyEl = document.createElement("div"); belge.body.appendChild(myEl);

Bu durumda ben yaratıyorum.

createElement() yöntemini kullanarak ve ardından onu gövdeye ekleyerek. Çok basit ve muhtemelen bu tekniği daha önce kullanmışsınızdır.

Ancak özel olarak hazırlanmış bir öğe eklemek yerine, appendChild() işlevini de kullanabilir ve yalnızca mevcut öğeyi taşıyabilirim. Aşağıdaki işaretlemeye sahip olduğumuzu varsayalım:

  • Örnek bir
  • örnek iki
  • örnek üç
  • örnek dört
  • örnek beş
  • Örnek Altı

örnek metin

Listenin konumunu aşağıdaki kodla değiştirebilirim:

Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.appendChild(myList);

Son DOM şöyle görünecek:

örnek metin

  • Örnek bir
  • örnek iki
  • örnek üç
  • örnek dört
  • örnek beş
  • Örnek Altı

Tüm listenin yerinden (paragrafın üstünde) kaldırıldığını ve ardından kapanış gövdesinden önce eklendiğini unutmayın. AppendChild() yöntemi genellikle createElement() ile oluşturulan öğeleri eklemek için kullanılsa da, mevcut öğeleri taşımak için de kullanılabilir.

Ayrıca removeChild() ile bir alt öğeyi DOM'dan tamamen kaldırabilirim. Listemizin önceki örnekten nasıl kaldırıldığı aşağıda açıklanmıştır:

Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.removeChild(myList);

Öğe şimdi kaldırıldı. removeChild() yöntemi, kaldırılan öğeyi döndürür ve daha sonra ihtiyacım olması durumunda saklayabilirim.

Var myOldChild = document.body.removeChild(myList); belge.body.appendChild(myOldChild);

Ayrıca, spesifikasyona nispeten yakın zamanda eklenen ChildNode.remove() yöntemi de vardır:

Var myList = document.getElementById("myList"); myList.remove();

Bu yöntem uzak bir nesne döndürmez ve IE'de (yalnızca Edge) çalışmaz. Ve her iki yöntem de metin düğümlerini öğe düğümleriyle aynı şekilde kaldırır.

Alt öğeleri değiştirme

Mevcut bir alt öğeyi, ister yeni öğe var olsun, ister onu sıfırdan oluşturmuş olsun, yenisiyle değiştirebilirim. İşte işaretleme:

örnek metin

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "örnek"; myDiv.appendChild(document.createTextNode("Yeni eleman metni")); document.body.replaceChild(myDiv, myPar);

Yeni öğe metni

Gördüğünüz gibi replaceChild() yöntemi iki argüman alır: yeni öğe ve değiştirdiği eski öğe.

Bu yöntemi mevcut bir öğeyi taşımak için de kullanabilirim. Aşağıdaki HTML'ye bir göz atın:

örnek metin 1

örnek metin 2

örnek metin 3

Üçüncü paragrafı ilk paragrafla aşağıdaki kodla değiştirebilirim:

Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);

Şimdi oluşturulan DOM şöyle görünür:

örnek metin 2

örnek metin 1

Belirli Alt Öğeleri Seçme

Bir kaç tane var Farklı yollar belirli bir elemanın seçilmesi. Daha önce gösterildiği gibi, children koleksiyonunu veya childNodes özelliğini kullanarak başlayabilirim. Ama diğer seçeneklere bakalım:

firstElementChild ve lastElementChild özellikleri tam olarak adlarından beklediğiniz şeyi yapar: ilk ve son alt öğeleri seçin. İşaretlememize geri dönelim:

  • Örnek bir
  • örnek iki
  • örnek üç
  • örnek dört
  • örnek beş
  • Örnek Altı

Bu özelliklere sahip ilk ve son öğeleri seçebilirim:

Var myList = document.getElementById("myList"); konsol.log(myList.firstElementChild.innerHTML); // "Örnek bir" console.log(myList.lastElementChild.innerHTML); // "Örnek altı"

İlk veya sondan farklı alt öğeleri seçmek istersem, öncekiElementSibling ve nextElementSibling özelliklerini de kullanabilirim. Bu, firstElementChild ve lastElementChild özelliklerini birleştirerek yapılır:

Var myList = document.getElementById("myList"); konsol.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Örnek iki" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Örnek beş"

firstChild , lastChild , beforeSibling ve nextSibling benzer özellikler de vardır, ancak bunlar yalnızca öğeleri değil tüm düğüm türlerini dikkate alır. Genel olarak, yalnızca eleman düğümlerini dikkate alan özellikler, tüm düğümleri seçenlerden daha kullanışlıdır.

DOM'a içerik ekleme

DOM'a öğe eklemenin yollarını zaten inceledim. Benzer bir konuya geçelim ve içerik eklemek için yeni özelliklere bir göz atalım.

İlk olarak, replaceChild() işlevine çok benzeyen, iki bağımsız değişken alan ve mevcut öğelerin yanı sıra yeni öğeler üzerinde çalışan basit bir insertBefore() yöntemi vardır. İşte işaretleme:

  • Örnek bir
  • örnek iki
  • örnek üç
  • örnek dört
  • örnek beş
  • Örnek Altı

Örnek Paragraf

Paragrafa dikkat edin, önce onu kaldıracağım ve sonra listenin önüne ekleyeceğim, hepsi bir çırpıda:

Var myList = document.getElementById("myList"), container = document.getElementBy("c"), myPar = document.getElementById("par"); container.insertBefore(myPar, myList);

Ortaya çıkan HTML'de paragraf listeden önce gelir ve bu, öğeyi sarmanın başka bir yoludur.

Örnek Paragraf

  • Örnek bir
  • örnek iki
  • örnek üç
  • örnek dört
  • örnek beş
  • Örnek Altı

replaceChild() gibi, insertBefore() iki bağımsız değişken alır: eklenecek öğe ve önüne eklemek istediğimiz öğe.

Bu yöntem basittir. Şimdi eklemenin daha güçlü bir yolunu deneyelim: insertAdjacentHTML() yöntemi.