Odatda, ishlab chiquvchilar DOM bilan biror narsa qilish kerak bo'lganda jQuery-dan foydalanadilar. Biroq, deyarli har qanday DOM manipulyatsiyasi DOM API yordamida sof JavaScript-da amalga oshirilishi mumkin.

Keling, ushbu APIni batafsil ko'rib chiqaylik:

Oxir-oqibat, siz har qanday loyihada ishlatilishi mumkin bo'lgan o'zingizning oddiy DOM kutubxonangizni yozasiz.

DOM so'rovlari

DOM so'rovlari argument sifatida ixtiyoriy CSS selektorini oladigan .querySelector() usuli yordamida amalga oshiriladi.

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

U birinchi mos keladigan elementni qaytaradi. Buning teskarisini qilishingiz mumkin - element selektorga mos kelishini tekshiring:

MyElement.matches("div.bar") === rost

Agar siz selektorga mos keladigan barcha elementlarni olishni istasangiz, quyidagi konstruksiyadan foydalaning:

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

Qaysi asosiy elementga murojaat qilmoqchi ekanligingizni bilsangiz, butun kodni qidirish o'rniga uning bolalari orqali qidirishingiz mumkin:

Const myChildElemet = myElement.querySelector("input") // o'rniga: // document.querySelector("#foo > div.bar kiritish")

Savol tug'iladi: nima uchun .getElementsByTagName() kabi boshqa, kamroq qulay usullardan foydalanish kerak? Kichkina muammo bor - .querySelector() ning chiqishi yangilanmagan va biz yangi element qo'shganda (qarang ), u o'zgarmaydi.

Const elements1 = document.querySelectorAll("div") const elements2 = document.getElementsByTagName("div") const newElement = document.createElement("div") document.body.appendChild(newElement) elements1.length === elements2.length // yolg'on

Bundan tashqari querySelectorAll() hamma narsani bitta ro'yxatga to'playdi, bu esa uni unchalik samarali emas.

Ro'yxatlar bilan qanday ishlash kerak?

Buning ustiga, .querySelectorAll() ikkita kichik ogohlantirishga ega. Natijalar bo'yicha usullarni chaqirib, ularning har biriga qo'llanilishini kuta olmaysiz (masalan, jQuery bilan ishlashga odatlangan bo'lishingiz mumkin). Har qanday holatda, siz tsikldagi barcha elementlarni takrorlashingiz kerak bo'ladi. Ikkinchidan, qaytarilgan ob'ekt massiv emas, balki elementlar ro'yxatidir. Shuning uchun massiv usullari ishlamaydi. Albatta, ro'yxatlar uchun .forEach() kabi usullar mavjud, ammo, afsuski, ular hamma holatlar uchun mos emas. Shunday qilib, ro'yxatni massivga aylantirish yaxshiroqdir:

// Array.from() Array.from(myElements).forEach(doSomethingWithEachElement) dan foydalanish // Yoki massiv prototipi (ES6-dan oldingi) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // Oddiyroq: .forEach.call myElements, doSomethingWithEachElement)

Har bir element "oila" ga tegishli bo'lgan ba'zi xususiyatlarga ega.

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

Element interfeysi Node interfeysidan meros bo'lib qolganligi sababli, quyidagi xususiyatlar ham mavjud:

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

Birinchi xususiyatlar elementga tegishli, oxirgilari (.parentElementdan tashqari) har qanday turdagi elementlar ro'yxati bo'lishi mumkin. Shunga ko'ra, siz element turini tekshirishingiz mumkin:

MyElement.firstChild.nodeType === 3 // bu element matnli tugun bo'ladi

Sinflar va atributlarni qo'shish

Qo'shish yangi sinf juda oddiy:

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

Elementga xususiyat qo'shish har qanday ob'ekt bilan bir xil:

// Atribut qiymatini oling const value = myElement.value // Atributni element xususiyati sifatida o'rnating myElement.value = "foo" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

Siz .getAttibute() , .setAttribute() va .removeAttribute() usullaridan foydalanishingiz mumkin. Ular darhol elementning HTML atributlarini o'zgartiradilar (DOM xususiyatlaridan farqli o'laroq), bu brauzerning qayta ko'rsatilishiga olib keladi (barcha o'zgarishlarni brauzerning ishlab chiquvchi vositalaridan foydalangan holda elementni tekshirish orqali ko'rishingiz mumkin). Bunday qayta chizmalar nafaqat DOM xususiyatlarini o'rnatishdan ko'ra ko'proq resurslarni talab qiladi, balki kutilmagan xatolarga ham olib kelishi mumkin.

Odatda, ular mos keladigan DOM xususiyatlariga ega bo'lmagan elementlar uchun ishlatiladi, masalan, colspan . Yoki ulardan foydalanish haqiqatan ham zarur bo'lsa, masalan, meros olishda HTML xususiyatlari uchun (qarang).

CSS uslublarini qo'shish

Ular boshqa xususiyatlar bilan bir xil tarzda qo'shiladi:

MyElement.style.marginLeft = "2em"

Ba'zi o'ziga xos xususiyatlar .style yordamida o'rnatilishi mumkin, ammo agar siz ba'zi hisob-kitoblardan so'ng qiymatlarni olishni istasangiz, window.getComputedStyle() dan foydalangan ma'qul. Ushbu usul elementni oladi va elementning o'zi va uning ota-onasining uslublarini o'z ichiga olgan CSSStyleDeclaration ni qaytaradi:

Window.getComputedStyle(myElement).getPropertyValue("chekka-chap")

DOMni o'zgartirish

Elementlarni ko'chirishingiz mumkin:

// Element1ni element2 elementining oxirgi bolasi sifatida qo'shing.appendChild(element2) // element3 element1.insertBefore(element2, element3) oldiga element2ni element1ning bolasi sifatida qo'shing.

Agar siz uni ko'chirmoqchi bo'lmasangiz, lekin nusxasini kiritishingiz kerak bo'lsa, foydalaning:

// Klon yaratish const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

.cloneNode() usuli argument sifatida mantiqiy qiymatni oladi va agar rost bo'lsa, pastki elementlar ham klonlanadi.

Albatta, siz yangi elementlarni yaratishingiz mumkin:

Const myNewElement = document.createElement("div") const myNewTextNode = document.createTextNode("ba'zi matn")

Va keyin ularni yuqorida ko'rsatilganidek joylashtiring. Siz to'g'ridan-to'g'ri elementni o'chira olmaysiz, lekin uni asosiy element orqali qilishingiz mumkin:

MyParentElement.removeChild(myElement)

Siz bilvosita murojaat qilishingiz mumkin:

MyElement.parentNode.removeChild(myElement)

Elementlar uchun usullar

Har bir element .innerHTML va .textContent kabi xususiyatlarga ega, ular HTML kodini va shunga mos ravishda matnning o'zini o'z ichiga oladi. Quyidagi misol elementning mazmunini o'zgartiradi:

// HTMLni o'zgartirish myElement.innerHTML = ` Yangi tarkib ( el.addEventListener("o'zgartirish", funktsiya (voqea) ( console.log(event.target.value) )) ))

Standart harakatlarni oldini olish

Buning uchun standart amallarni bloklaydigan .preventDefault() usulidan foydalaning. Misol uchun, agar mijoz tomonidan avtorizatsiya muvaffaqiyatli bo'lmasa, u ariza topshirishni bloklaydi:

MyForm.addEventListener("submit", funktsiya (voqea) ( const name = this.querySelector("#name") agar (name.value === "Donald Duck)") { alert("You gotta be kidding!") event.preventDefault() } }) !}

.stopPropagation() usuli, agar sizda kichik elementga tayinlangan maxsus hodisa ishlovchisi va xuddi shu hodisa uchun ota-onaga tayinlangan ikkinchi hodisa ishlovchisi bo'lsa, yordam beradi.

Yuqorida aytib o'tilganidek, .addEventListener() usuli konfiguratsiya ob'ekti ko'rinishidagi ixtiyoriy uchinchi argumentni oladi. Ushbu ob'ekt quyidagi mantiqiy xususiyatlardan birini o'z ichiga olishi kerak (barchasi sukut bo'yicha "false" ga o'rnatilgan):

• qo'lga olish: hodisa ushbu elementga DOM-dagi har qanday boshqa elementdan oldin biriktiriladi;
• bir marta: voqea faqat bir marta tayinlanishi mumkin;
• passiv: event.preventDefault() e'tiborga olinmaydi (xato paytida istisno).

Eng keng tarqalgan xususiyat bu .capture va u shunchalik keng tarqalganki, uning uchun yorliq mavjud: uni konfiguratsiya ob'ektiga o'tkazish o'rniga, uning qiymatini bu yerga o'tkazing:

MyElement.addEventListener(turi, tinglovchi, rost)

Ishlovchilar .removeEventListener() usuli yordamida olib tashlanadi, bu ikki argumentni oladi: hodisa turi va olib tashlash uchun ishlov beruvchiga havola. Masalan, bir marta xossa quyidagi tarzda amalga oshirilishi mumkin:

MyElement.addEventListener("o'zgartirish", funktsiya tinglovchisi (voqea) ( console.log(event.type + " ishga tushirildi " + bu) this.removeEventListener("o'zgartirish", tinglovchi) ))

Meros olish

Aytaylik, sizda element bor va siz uning barcha bolalari uchun hodisa ishlov beruvchisini qo'shmoqchisiz. Keyin yuqorida ko'rsatilganidek, myForm.querySelectorAll("input") usuli yordamida ular orqali aylanishingiz kerak bo'ladi. Biroq, siz shunchaki formaga elementlar qo'shishingiz va ularning mazmunini event.target yordamida tekshirishingiz mumkin.

MyForm.addEventListener("o'zgartirish", funktsiya (voqea) ( const target = event.target if (target.matches("input")) ( console.log(target.value) ) ))

Va bu usulning yana bir afzalligi shundaki, ishlov beruvchi avtomatik ravishda yangi bolalar elementlariga biriktiriladi.

Animatsiya

Animatsiya qo'shishning eng oson yo'li o'tish xususiyatiga ega CSS-dan foydalanishdir. Ammo ko'proq moslashuvchanlik uchun (masalan, o'yinlar uchun) JavaScript ko'proq mos keladi.

Animatsiya tugaguncha window.setTimeout() usulini chaqirish yaxshi fikr emas, chunki ilovangiz muzlashi mumkin, ayniqsa mobil qurilmalar. Barcha o'zgarishlarni keyingi qayta chizishgacha saqlash uchun window.requestAnimationFrame() dan foydalangan ma'qul. Argument sifatida funktsiyani oladi, bu esa o'z navbatida vaqt tamg'asini oladi:

Const start = window.performance.now() doimiy davomiylik = 2000 window.requestAnimationFrame(funksiya fadeIn (hozir)) ( const progress = hozir - start myElement.style.opacity = progress / davomiyligi, agar (progress)< duration) { window.requestAnimationFrame(fadeIn) } }

Shunday qilib, juda silliq animatsiyaga erishiladi. Mark Braun o'z maqolasida ushbu mavzuni muhokama qiladi.

O'z kutubxonamizni yozish

DOMda elementlar ustida har qanday amallarni bajarish uchun doimo elementlarni takrorlash kerakligi jQuery $(".foo").css((rang: "qizil")) sintaksisi bilan solishtirganda ancha zerikarli tuyulishi mumkin. Lekin nima uchun bu vazifani osonlashtirish uchun o'zingizning bir nechta usullaringizni yozmaysiz?

Const $ = funktsiya $ (selektor, kontekst = hujjat) ( const elementlar = Array.from(context.querySelectorAll(selektor)) qaytish ( elementlar, html (newHtml) ( this.elements.forEach(element => ( element.innerHTML =) newHtml )) buni qaytaring), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss))) buni qaytaring), on (voqea, ishlov beruvchi, variantlar) ( this.elements .forEach(element => ( element.addEventListener(voqea, ishlov beruvchi, variantlar) )) buni qaytaring ) ) )

Psevdokod

$(".rightArrow").click(function() (rightArrowParents = this.dom(); //.dom(); psevdo funksiyasi ... u butun ogohlantirishni ko'rsatishi kerak(rightArrowParents); ));

Signal xabari quyidagicha bo'ladi:

tana div.lol a.rightArrow

Buni javascript/jquery yordamida qanday qilib olishim mumkin?

Bu kabi jQuery-dan foydalanish (keyin voqeadan tashqari jQuery-dan foydalanmaydigan yechim, agar bu muhim bo'lsa, kamroq funktsiya chaqiriladi):

Haqiqiy vaqt misoli:

$(".rightArrow").click(function() ( var rightArrowParents = ; $(this).parents().addBack().not("html").each(function() ( var entry = this.tagName) .toLowerCase(); agar (this.className) (entry += "." + this.className.replace(/ /g, "."); ) rightArrowParents.push(entry); )); alert(rightArrowParents.join) ("")); noto'g'ri qaytaring; )); bu yerni bosing

(Jonli misollarda men bir nechta sinflarni boshqarishni namoyish qilish uchun div-dagi class atributini lol multi bo'lishi uchun yangiladim.)

Bu erda aniq elementlarni moslashtirish uchun yechim.

Selektor ekanligini tushunish muhimdir (haqiqiy emas) xrom asboblari ko'rsatadigan DOM elementini yagona aniqlamaydi. ( masalan, u ketma-ket oraliq elementlar ro'yxatini farqlamaydi. Joylashuv/indekslash ma'lumotlari yo'q)

$.fn.fullSelector = funktsiya () ( var path = this.parents().addBack(); var quickCss = path.get().map(funksiya (element)) ( var self = $(element), id = element .id ? "#" + item.id: "", clss = item.classList.length ? item.classList.toString().split(" ").map(funksiya (c) (qaytish "." + c; )).join("") : "", name = item.nodeName.toLowerCase(), indeks = self.siblings(name).length ? ":nth-child(" + (self.index() + 1) + ")" : ""; agar (ism === "html" || nomi === "tana") ( qaytish nomi; ) qaytish nomi + indeks + id + clss; )).join(" > ") ; quickCssni qaytarish; );

Va siz uni quyidagicha ishlatishingiz mumkin:

Console.log($("ba'zi-selektor").fullSelector());

Men T.J.dan bir parcha ko'chirdim. Kichkinagacha olomon jQuery plagini. Men jQuery versiyasidan foydalandim, garchi u to'g'ri bo'lsa ham, bu mutlaqo keraksiz yuk, lekin men undan faqat disk raskadrovka maqsadlarida foydalanaman, shuning uchun menga ahamiyat bermayman.

Foydalanish:

Ichki oraliq Simple span Pre

// natija (massiv): ["tana", "div.sampleClass"] $("span").getDomPath(false) // natija (string): tana > div.sampleClass $("span").getDomPath( ) // natija (massiv): ["body", "div#test"] $("pre").getDomPath(false) // natija (string): body > div#test $("pre").getDomPath ()

Var obj = $("#show-Editor-tugmasi"), path = ""; while (typeof obj.prop("tagName") != "undefined")( if (obj.attr("class"))( path = "."+obj.attr("class").replace(/\s) /g , ".") + path; ) if (obj.attr("id"))( path = "#"+obj.attr("id") + path; ) path = " " +obj.prop( "tagName").toLowerCase() + yo'l; obj = obj.parent(); ) console.log(yo'l);

salom, bu funksiya yo'lda ko'rsatilmagan joriy element bilan bog'liq xatoni hal qiladi

Hozir tekshiring

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

Bu erda $j = jQuery o'zgaruvchisi

sinf nomidagi .. bilan ham muammoni hal qiling

bu erda almashtirish funktsiyasi:

Function escapeRegExp(str) ( str.replace(/([.*+?^=!:$()()|\[\]\/\\])/g, "\\$1"); ) funktsiyasini qaytaring replaceAll(str, topish, almashtirish) ( str.replace(yangi RegExp(escapeRegExp(top), "g"), almashtirish); )

Bu erda jQuery yo'lini qaytaradigan mahalliy JS versiyasi. Agar ular mavjud bo'lsa, elementlar uchun identifikatorlarni ham qo'shaman. Agar massivda identifikatorni ko'rsangiz, bu sizga eng qisqa yo'lni tanlash imkoniyatini beradi.

Var yo'li = getDomPath(element); console.log(path.join(" > "));

Asosiy > bo‘lim:eq(0) > div:eq(3) > bo‘lim#tarkib > bo‘lim#firehose > div#firehoselist > maqola#firehose-46813651 > sarlavha > h2 > span#title-46813651

Mana funksiya.

getDomPath(el) funksiyasi ( 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 ; ) qaytish stack.slice(1); // html elementini olib tashlaydi)

Bugungi kunda murakkab va og'ir veb-ilovalar keng tarqalgan. O'zaro brauzer va foydalanish uchun qulay kutubxonalar jQuery kabi boy funksionalligi bilan DOMni tezda boshqarishda katta yordam beradi. Shuning uchun, ko'plab ishlab chiquvchilar ko'plab muammolarga duch kelgan mahalliy DOM API bilan ishlashdan ko'ra bunday kutubxonalardan tez-tez foydalanishlari ajablanarli emas. Brauzerlardagi farqlar hali ham muammo bo'lib qolsa-da, DOM jQuery mashhurlikka erishgan 5-6 yil oldingiga qaraganda hozir yaxshi holatda.

Ushbu maqolada men ota-ona, bola va qo'shni munosabatlariga e'tibor qaratgan holda DOMning HTML manipulyatsiyasi imkoniyatlarini namoyish etaman. Xulosa qilib aytganda, men ushbu xususiyatlar uchun brauzerni qo'llab-quvvatlash haqida ma'lumot beraman, lekin shuni yodda tutingki, jQuery kabi kutubxona mahalliy funksionallikni amalga oshirishda xatolar va nomuvofiqliklar mavjudligi sababli hali ham yaxshi variant.

Bola tugunlarini hisoblash

Namoyish uchun men quyidagilarni ishlataman HTML belgilash, biz uni maqola davomida bir necha marta o'zgartiramiz:

• Bir misol
• Ikkinchi misol
• Uchinchi misol
• To'rtinchi misol
• Beshinchi misol
• Oltinchi misol

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

Ko'rib turganingizdek, natijalar bir xil, ammo qo'llaniladigan texnikalar boshqacha. Birinchi holda men bolalar mulkidan foydalanaman. Bu faqat o'qish uchun mo'ljallangan xususiyat bo'lib, u to'plamni qaytaradi HTML elementlari, so'ralgan element ichida joylashgan; Ularning sonini hisoblash uchun men ushbu to'plamning uzunlik xususiyatidan foydalanaman.

Ikkinchi misolda men childElementCount usulidan foydalanmoqdaman, bu mening fikrimcha, yanada aniqroq va potentsialroq davom ettirilishi mumkin bo'lgan usul (buni keyinroq muhokama qiling, nima qilishini tushunishda muammoga duch kelmaysiz deb o'ylamayman).

Men childNodes.length (boldlar.length o'rniga) dan foydalanishga harakat qila olaman, lekin natijaga qarang:

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

U 13 ni qaytaradi, chunki childNodes barcha tugunlar, jumladan, boʻshliqlar toʻplamidir – agar siz bola tugunlari va pastki element tugunlari oʻrtasidagi farq haqida qaygʻursangiz, buni yodda tuting.

Bola tugunlarining mavjudligini tekshirish

Elementning tugunlari mavjudligini tekshirish uchun hasChildNodes() usulidan foydalanishim mumkin. Usul ularning mavjudligi yoki yo'qligini ko'rsatadigan mantiqiy qiymatni qaytaradi:

Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // rost

Men ro'yxatimda bolalar tugunlari borligini bilaman, lekin HTMLni hech qanday bo'lmasligi uchun o'zgartirishim mumkin; Endi belgilash quyidagicha ko'rinadi:

Va yana hasChildNodes() ni ishga tushirish natijasi:

Console.log(myList.hasChildNodes()); // rost

Usul hali ham haqiqatni qaytaradi. Ro'yxatda hech qanday element bo'lmasa-da, unda bo'sh joy mavjud bo'lib, u tugun turiga mos keladi. Bu usul element tugunlarini emas, balki barcha tugunlarni hisobga oladi. hasChildNodes() noto'g'ri qiymatini qaytarishi uchun biz belgilashni yana o'zgartirishimiz kerak:

Va endi kutilgan natija konsolda ko'rsatiladi:

Console.log(myList.hasChildNodes()); // yolg'on

Albatta, agar men bo'shliqqa duch kelishim mumkinligini bilsam, avval tugunlar mavjudligini tekshiraman, so'ngra ular orasida element tugunlari mavjudligini aniqlash uchun nodeType xususiyatidan foydalanaman.

Bolalar elementlarini qo'shish va olib tashlash

DOM-ga elementlarni qo'shish va olib tashlash uchun foydalanishingiz mumkin bo'lgan usullar mavjud. Ulardan eng mashhuri createElement() va appendChild() usullari kombinatsiyasiga asoslangan.

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

Bunday holda, men createElement() usuli yordamida yarataman va keyin uni body ga qo'shaman. Bu juda oddiy va ehtimol siz bu texnikani ilgari qo'llagansiz.

Lekin maxsus kiritish o'rniga element yaratilmoqda, men appendChild() dan ham foydalanishim mumkin va faqat mavjud elementni ko'chirishim mumkin. Aytaylik, bizda quyidagi belgilar mavjud:

• Bir misol
• Ikkinchi misol
• Uchinchi misol
• To'rtinchi misol
• Beshinchi misol
• Oltinchi misol

Misol matn

Ro'yxatning joylashuvini quyidagi kod bilan o'zgartirishim mumkin:

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

Yakuniy DOM quyidagicha ko'rinadi:

Misol matn

• Bir misol
• Ikkinchi misol
• Uchinchi misol
• To'rtinchi misol
• Beshinchi misol
• Oltinchi misol

E'tibor bering, butun ro'yxat o'z joyidan olib tashlangan (paragraf tepasida) va undan keyin yopilish qismidan oldin kiritilgan. appendChild() usuli odatda createElement() yordamida yaratilgan elementlarni qo'shish uchun ishlatilsa-da, u mavjud elementlarni ko'chirish uchun ham ishlatilishi mumkin.

Shuningdek, removeChild() dan foydalanib, DOM dan bola elementni butunlay olib tashlashim mumkin. Bizning ro'yxatimizni oldingi misoldan qanday o'chirish mumkin:

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

Element endi olib tashlandi. RemoveChild() usuli olib tashlangan elementni qaytaradi, shuning uchun uni keyinroq kerak bo'lsa saqlashim mumkin.

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

Spetsifikatsiyaga nisbatan yaqinda qo'shilgan ChildNode.remove() usuli ham mavjud:

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

Bu usul uzoq ob'ektni qaytarmaydi va IE da ishlamaydi (faqat Edge). Va ikkala usul ham matn tugunlarini element tugunlari bilan bir xil tarzda olib tashlaydi.

Bola elementlarni almashtirish

Men mavjud bo'lgan elementni yangisi bilan almashtira olaman, u yangi element mavjudmi yoki uni noldan yaratdimmi. Mana belgilash:

Misol matn

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "misol"; myDiv.appendChild(document.createTextNode("Yangi element matni")); document.body.replaceChild(myDiv, myPar);

Yangi element matni

Ko'rib turganingizdek, replaceChild() usuli ikkita argumentni oladi: yangi element va u almashtiradigan eski element.

Men ushbu usuldan mavjud elementni ko'chirish uchun ham foydalanishim mumkin. Quyidagi HTMLni ko'rib chiqing:

Misol matn 1

Misol matn 2

Misol matn 3

Quyidagi kod yordamida uchinchi xatboshini birinchi xatboshiga almashtirishim mumkin:

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

Endi yaratilgan DOM quyidagicha ko'rinadi:

Misol matn 2

Misol matn 1

Muayyan bolalarni tanlash

Bir nechta bor turli yo'llar bilan muayyan elementni tanlash. Yuqorida ko'rsatilgandek, men bolalar to'plamidan yoki childNodes xususiyatidan foydalanishni boshlashim mumkin. Ammo boshqa variantlarni ko'rib chiqaylik:

firstElementChild va lastElementChild xossalari aynan ularning nomlari taklif qilgan narsani bajaradi: birinchi va oxirgi yordamchi elementlarni tanlang. Keling, belgilashimizga qaytaylik:

• Bir misol
• Ikkinchi misol
• Uchinchi misol
• To'rtinchi misol
• Beshinchi misol
• Oltinchi misol

Men ushbu xususiyatlardan foydalangan holda birinchi va oxirgi elementlarni tanlashim mumkin:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "Birinchi misol" console.log(myList.lastElementChild.innerHTML); // "Oltinchi misol"

Agar birinchi yoki oxirgi elementdan boshqa kichik elementlarni tanlamoqchi bo'lsam, oldingiElementSibling va nextElementSibling xususiyatlaridan ham foydalanishim mumkin. Bu firstElementChild va lastElementChild xususiyatlarini birlashtirish orqali amalga oshiriladi:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Ikkinchi misol" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Beshinchi misol"

Bundan tashqari, firstChild , lastChild , previousSibling va nextSibling shunga o'xshash xususiyatlar mavjud, ammo ular nafaqat elementlarni, balki barcha turdagi tugunlarni ham hisobga oladi. Umuman olganda, faqat element tugunlarini hisobga oladigan xususiyatlar barcha tugunlarni tanlaydiganlarga qaraganda foydaliroqdir.

DOMga kontent kiritish

Men allaqachon DOMga elementlarni kiritish usullarini ko'rib chiqdim. Keling, davom etaylik shunga o'xshash mavzu va tarkibni kiritishning yangi variantlarini ko'rib chiqing.

Birinchidan, replaceChild() ga o'xshab oddiy insertBefore() usuli mavjud bo'lib, u ikkita argument oladi va yangi elementlar va mavjudlari bilan ishlaydi. Mana belgilash:

• Bir misol
• Ikkinchi misol
• Uchinchi misol
• To'rtinchi misol
• Beshinchi misol
• Oltinchi misol

Misol paragraf

Men avval olib tashlamoqchi bo'lgan paragrafga e'tibor bering va keyin uni ro'yxat oldiga qo'ying, hammasi birdaniga:

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

Olingan HTMLda paragraf ro'yxat oldidan paydo bo'ladi va bu elementni o'rashning yana bir usuli.

Misol paragraf

• Bir misol
• Ikkinchi misol
• Uchinchi misol
• To'rtinchi misol
• Beshinchi misol
• Oltinchi misol

replaceChild() singari, insertBefore() ikkita argumentni oladi: qo'shiladigan element va biz uni kiritmoqchi bo'lgan element.

Bu usul oddiy. Keling, yanada kuchliroq kiritish usulini sinab ko'raylik: insertAdjacentHTML() usuli.