Ерөнхийдөө хөгжүүлэгчид DOM-тэй ямар нэг зүйл хийх шаардлагатай үед jQuery ашигладаг. Гэсэн хэдий ч DOM API-г ашиглан бараг бүх DOM-ийн засварыг цэвэр JavaScript дээр хийж болно.

Энэ API-г илүү дэлгэрэнгүй авч үзье:

Эцэст нь та ямар ч төсөлд ашиглаж болох энгийн DOM номын сангаа бичих болно.

DOM асуулга

DOM асуулга нь .querySelector() аргыг ашиглан хийгддэг бөгөөд дурын CSS сонгогчийг аргумент болгон авдаг.

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

Энэ нь эхний тохирох элементийг буцаана. Та эсрэгээр нь хийж болно - элемент нь сонгогчтой таарч байгаа эсэхийг шалгана уу:

MyElement.matches("div.bar") === үнэн

Хэрэв та сонгогчтой тохирох бүх элементүүдийг авахыг хүсвэл дараах бүтцийг ашиглана уу.

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

Хэрэв та аль эх элементийг лавлахыг хүсч байгаагаа мэдэж байгаа бол кодыг бүхэлд нь хайхын оронд түүний хүүхдүүдийг хайж олох боломжтой.

Const myChildElemet = myElement.querySelector("оролт") // Оронд нь: // document.querySelector("#foo > div.bar оролт")

Асуулт гарч ирнэ: яагаад .getElementsByTagName() гэх мэт өөр, тохиромжгүй аргуудыг ашигладаг вэ? Жижиг асуудал байна - .querySelector()-ийн гаралт шинэчлэгдээгүй бөгөөд шинэ элемент нэмэхэд (харна уу) энэ нь өөрчлөгдөхгүй.

Const elements1 = document.querySelectorAll("div") const elements2 = document.getElementsByTagName("div") const newElement = document.createElement("div") document.body.appendChild(newElement) elements1.length === elements2.length // худал

Мөн querySelectorAll() нь бүгдийг нэг жагсаалтад цуглуулдаг бөгөөд энэ нь тийм ч үр дүнтэй биш юм.

Жагсаалттай хэрхэн ажиллах вэ?

Дээрээс нь .querySelectorAll() нь хоёр жижиг анхааруулгатай. Та үр дүнгийн талаар аргуудыг дуудаж, тэдгээрийг тус бүрд нь ашиглахыг хүлээх боломжгүй (хэрэв та jQuery-д дассан байж магадгүй). Ямар ч тохиолдолд та давталтын бүх элементүүдийг давтах шаардлагатай болно. Хоёрдугаарт, буцаж ирсэн объект нь массив биш харин элементүүдийн жагсаалт юм. Тиймээс массивын аргууд ажиллахгүй. Мэдээжийн хэрэг, .forEach() гэх мэт жагсаалтын аргууд байдаг, гэхдээ харамсалтай нь тэдгээр нь бүх тохиолдолд тохиромжгүй байдаг. Тиймээс жагсаалтыг массив болгон хөрвүүлэх нь дээр:

// Array.from() Array.from(myElements).forEach(doSomethingWithEachElement) ашиглах // Эсвэл массивын загвар (ES6-аас өмнөх) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // Илүү энгийн: .forEach.call myElements, doSomethingWithEachElement)

Элемент бүр нь "гэр бүл" гэсэн шинж чанартай байдаг.

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

Элементийн интерфейс нь Node интерфэйсээс өвлөгддөг тул дараах шинж чанарууд бас байдаг.

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

Эхний шинж чанарууд нь элементэд хамаарах ба сүүлчийнх нь (.parentElement-аас бусад) ямар ч төрлийн элементүүдийн жагсаалт байж болно. Үүний дагуу та элементийн төрлийг шалгаж болно:

MyElement.firstChild.nodeType === 3 // энэ элемент нь текстийн зангилаа байх болно

Ангиуд болон шинж чанаруудыг нэмж байна

Нэмэх шинэ ангимаш энгийн:

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

Элементэд өмч нэмэх нь аливаа объекттой адил байна:

// Аттрибутын утгыг авах const утга = myElement.value // Атрибутыг элементийн шинж чанар болгон тохируулах myElement.value = "foo" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

Та .getAttibute() , .setAttribute() болон .removeAttribute() аргуудыг ашиглаж болно. Тэд тухайн элементийн HTML шинж чанаруудыг (DOM шинж чанаруудаас ялгаатай) нэн даруй өөрчлөх бөгөөд энэ нь хөтчийг дахин үзүүлэхэд хүргэдэг (та хөтчийн хөгжүүлэгчийн хэрэгслийг ашиглан элементийг шалгаж бүх өөрчлөлтийг харах боломжтой). Ийм дахин зурах нь DOM шинж чанарыг тохируулахаас илүү их нөөц шаарддаг төдийгүй гэнэтийн алдаа гаргахад хүргэдэг.

Ихэвчлэн тэдгээрийг colspan гэх мэт тохирох DOM шинж чанаргүй элементүүдэд ашигладаг. Эсвэл тэдгээрийг ашиглах нь үнэхээр шаардлагатай бол, жишээ нь өв залгамжлах үед HTML шинж чанаруудын хувьд (харна уу).

CSS хэв маягийг нэмж байна

Тэдгээрийг бусад шинж чанаруудын нэгэн адил нэмдэг:

MyElement.style.marginLeft = "2эм"

Зарим тодорхой шинж чанаруудыг .style ашиглан тохируулж болно, гэхдээ хэрэв та зарим тооцооллын дараа утгыг авахыг хүсвэл window.getComputedStyle() ашиглах нь дээр. Энэ арга нь элементийг хүлээн авч, тухайн элемент болон түүний эцэг эхийн хэв маягийг агуулсан CSSStyleDeclaration-г буцаана:

Window.getComputedStyle(myElement).getPropertyValue("маржин-зүүн")

DOM-г өөрчлөх

Та элементүүдийг зөөж болно:

// Элемент1-ийг element2-ийн сүүлчийн хүүхэд болгон нэмэх element1.appendChild(element2) // element2-г element3-ийн өмнө element1-ийн хүүхэд болгон оруулах element1.insertBefore(element2, element3)

Хэрэв та үүнийг зөөхийг хүсэхгүй байгаа ч хуулбарыг оруулах шаардлагатай бол дараахыг ашиглана уу:

// Клон үүсгэх const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

.cloneNode() арга нь логикийн утгыг аргумент болгон авах ба хэрэв үнэн бол хүүхэд элементүүдийг мөн хувилна.

Мэдээжийн хэрэг та шинэ элементүүдийг үүсгэж болно:

Const myNewElement = document.createElement("div") const myNewTextNode = document.createTextNode("зарим текст")

Дараа нь дээр үзүүлсэн шиг тэдгээрийг оруулна. Та элементийг шууд устгах боломжгүй, гэхдээ та үүнийг үндсэн элементээр дамжуулан хийж болно:

MyParentElement.removeChild(myElement)

Та мөн шууд бусаар холбогдож болно:

MyElement.parentNode.removeChild(myElement)

Элементүүдэд зориулсан аргууд

Элемент бүр нь .innerHTML болон .textContent зэрэг шинж чанаруудтай бөгөөд тэдгээр нь HTML код, үүний дагуу текстийг агуулдаг. Дараах жишээ нь элементийн агуулгыг өөрчилдөг:

// HTML-г өөрчлөх myElement.innerHTML = ` Шинэ контент ( el.addEventListener("өөрчлөх", функц (үйл явдал) ( console.log(event.target.value) )) ))

Өгөгдмөл үйлдлээс урьдчилан сэргийлэх

Үүнийг хийхийн тулд стандарт үйлдлийг блоклодог .preventDefault() аргыг ашиглана уу. Жишээлбэл, хэрэв үйлчлүүлэгчийн зөвшөөрөл амжилтгүй болвол маягт илгээхийг хориглоно:

MyForm.addEventListener("илгээх", функц (үйл явдал) ( const name = this.querySelector("#name") хэрэв (name.value === "Donald Duck)") { alert("You gotta be kidding!") event.preventDefault() } }) !}

Хэрэв та хүүхдийн элементэд тодорхой үйл явдал зохицуулагч, мөн ижил үйл явдлын эцэг эхэд томилогдсон хоёр дахь үйл явдал зохицуулагчтай бол .stopPropagation() арга нь туслах болно.

Өмнө дурьдсанчлан, .addEventListener() арга нь тохиргооны объект хэлбэрээр гурав дахь нэмэлт аргументыг авдаг. Энэ объект нь дараах логик шинж чанаруудын аль нэгийг агуулсан байх ёстой (бүгдийг анхдагчаар худал гэж тохируулсан):

• авах: үйл явдал нь DOM доторх бусад элементийн өмнө энэ элементэд хавсаргах болно;
• нэг удаа: үйл явдлыг зөвхөн нэг удаа оноож болно;
• идэвхгүй: event.preventDefault()-г үл тоомсорлох болно (алдааны үед онцгой тохиолдол).

Хамгийн түгээмэл шинж чанар нь .capture бөгөөд энэ нь маш түгээмэл тул товчлол байдаг: үүнийг тохиргооны объект руу дамжуулахын оронд түүний утгыг энд оруулаарай:

MyElement.addEventListener(төрөл, сонсогч, үнэн)

Гаргагчдыг .removeEventListener() аргыг ашиглан устгадаг бөгөөд энэ нь хоёр аргумент авдаг: үйл явдлын төрөл болон устгах зохицуулагчийн лавлагаа. Жишээлбэл, нэг удаа өмчийг дараах байдлаар хэрэгжүүлж болно:

MyElement.addEventListener("өөрчлөх", функц сонсогч (үйл явдал) ( console.log(event.type + " дээр " + энэ) идэвхжсэн) this.removeEventListener("өөрчлөх", сонсогч) ))

Өв залгамжлал

Танд элемент байгаа бөгөөд та түүний бүх хүүхдэд үйл явдал зохицуулагч нэмэхийг хүсч байна гэж бодъё. Дараа нь та дээр үзүүлсэн шиг myForm.querySelectorAll("оролт") аргыг ашиглан тэдгээрийг давтах хэрэгтэй болно. Гэсэн хэдий ч, та зүгээр л event.target ашиглан маягтанд элементүүдийг нэмж, агуулгыг нь шалгаж болно.

MyForm.addEventListener("өөрчлөх", функц (үйл явдал) ( const target = event.target if (target.matches("input")) ( console.log(target.value) ) ))

Мөн энэ аргын өөр нэг давуу тал нь зохицуулагчийг шинэ хүүхдийн элементүүдэд автоматаар холбох болно.

Хөдөлгөөнт дүрс

Хөдөлгөөнт дүрс нэмэх хамгийн хялбар арга бол шилжилтийн шинж чанартай CSS ашиглах явдал юм. Гэхдээ илүү уян хатан байдлын хувьд (жишээлбэл, тоглоомын хувьд) JavaScript нь илүү тохиромжтой.

Хөдөлгөөн дуусах хүртэл window.setTimeout() аргыг дуудах нь тийм ч сайн санаа биш, учир нь таны аппликейшн зогсох магадлалтай. хөдөлгөөнт төхөөрөмжүүд. Дараагийн дахин зурах хүртэл бүх өөрчлөлтийг хадгалахын тулд window.requestAnimationFrame() ашиглах нь дээр. Энэ нь функцийг аргумент болгон авдаг бөгөөд энэ нь эргээд цагийн тэмдэг хүлээн авдаг:

Const start = window.performance.now() const үргэлжлэх хугацаа = 2000 window.requestAnimationFrame(функц fadeIn (одоо)) ( const progress = now - start myElement.style.opacity = ахиц дэвшил / үргэлжлэх хугацаа (явц)< duration) { window.requestAnimationFrame(fadeIn) } }

Ийм байдлаар маш жигд хөдөлгөөнт дүрс бий болно. Марк Браун нийтлэлдээ энэ сэдвийг хөндсөн.

Бид өөрсдийн номын санг бичдэг

DOM дээр элементүүд дээр ямар нэгэн үйлдэл хийхийн тулд элементүүдийг байнга давтах шаардлагатай байдаг нь jQuery-ийн $(".foo").css((өнгө: "улаан")) синтакстай харьцуулахад нэлээд уйтгартай мэт санагдаж магадгүй юм. Гэхдээ яагаад энэ ажлыг хөнгөвчлөхийн тулд өөрийнхөө хэдэн аргыг бичиж болохгүй гэж?

Const $ = функц $ (сонгогч, контекст = баримт бичиг) ( const элементүүд = Array.from(context.querySelectorAll(сонгогч)) буцах ( элементүүд, html (newHtml) ( this.elements.forEach(element => ( element.innerHTML =) newHtml )) үүнийг буцаана ), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss) )) үүнийг буцаана ), дээр (үйл явдал, зохицуулагч, сонголтууд) ( this.elements .forEach(element => ( element.addEventListener(үйл явдал, зохицуулагч, сонголтууд) )) үүнийг буцаана ) ) )

Псевдокод

$(".rightArrow").click(function() (rightArrowParents = this.dom(); //.dom(); нь псевдо функц юм ... энэ нь бүх дохиоллыг харуулах ёстой(rightArrowParents); ));

Сэрүүлгийн мессеж нь:

body div.lol a.rightArrow

Би үүнийг javascript/jquery ашиглан хэрхэн авах вэ?

jQuery-г ийм байдлаар ашиглах (дараа нь тухайн үйл явдлаас бусад тохиолдолд jQuery ашигладаггүй шийдэл, хэрэв энэ нь чухал бол функцийг дуудах нь хамаагүй бага):

Бодит цагийн жишээ:

$(".rightArrow").click(function() ( var rightArrowParents = ; $(this).parents().addBack().not("html").each(function() ( var entry = this.tagName) .toLowerCase(); хэрэв (this.className) (оруулга += "." + this.className.replace(/ /g, "."); ) rightArrowParents.push(entry); )); alert(rightArrowParents.join) (" ")); худал буцаана; )); Энд дар

(Шууд жишээн дээр би олон ангитай харьцаж байгааг харуулахын тулд div дээрх ангийн шинж чанарыг lol multi байхаар шинэчилсэн.)

Элементүүдийг яг тааруулах шийдэл энд байна.

Сонгогч гэдгийг ойлгох нь чухал юм (бодит биш) хромын хэрэгслүүд нь DOM доторх элементийг өвөрмөц байдлаар тодорхойлдоггүй. ( жишээлбэл, дараалсан span элементүүдийн жагсаалтыг хооронд нь ялгахгүй. Байршил/индексжүүлэх мэдээлэл байхгүй)

$.fn.fullSelector = функц () ( var path = this.parents().addBack(); var quickCss = path.get().map(функц (зүйл)) ( var self = $(зүйл), id = зүйл .id ? "#" + item.id: "", clss = item.classList.length ? item.classList.toString().split(" ").map(функц (c)) (буцах "." + c; )).join("") : "", нэр = item.nodeName.toLowerCase(), индекс = self.siblings(нэр).length ? ":nth-child(" + (self.index() + 1) + ")" : ""; хэрэв (нэр === "html" || нэр === "бие") ( буцах нэр; ) буцах нэр + индекс + id + clss; )) нэгдэх(" > ") ; QuickCss буцаана; );

Мөн та үүнийг дараах байдлаар ашиглаж болно.

Console.log($("зарим сонгогч").fullSelector());

Би T.J-ээс нэг хэсгийг нүүлгэсэн. Өчүүхэн хүртэл бөөгнөрөл jQuery залгаас. Би jQuery хувилбарыг ашигласан, тэр ч байтугай энэ нь огт шаардлагагүй нэмэлт зардал гэж тэр зөв байсан ч би үүнийг зөвхөн дибаг хийх зорилгоор ашиглаж байгаа тул надад хамаагүй.

Хэрэглээ:

Nested span Simple span Pre

// үр дүн (массив): ["body", "div.sampleClass"] $("span").getDomPath(худал) // үр дүн (мөр): body > div.sampleClass $("span").getDomPath( ) // үр дүн (массив): ["body", "div#test"] $("pre").getDomPath(худал) // үр дүн (мөр): body > div#test $("pre").getDomPath ()

Var obj = $("#show-editor-button"), path = ""; while (typeof obj.prop("tagName") != "undefined")( if (obj.attr("анги"))( зам = "."+obj.attr("анги").replace(/\s /g , ".") + зам; ) хэрэв (obj.attr("id"))( зам = "#"+obj.attr("id") + зам; ) зам = " " +obj.prop( "tagName").toLowerCase() + зам; obj = obj.parent(); ) console.log(зам);

Сайн байна уу энэ функц нь зам дээр харагдахгүй байгаа одоогийн элементтэй холбоотой алдааг шийддэг

Одоо шалгаад үзээрэй

$j(".wrapper").click(функц(үйл явдал))( 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, "."); )өөрөөр бол (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 (үйл явдал) .target.className) ( оролт += "." + event.target.className.replace(/ /g, "."); )өөрөөр if(event.target.id)( оруулга += "#" + үйл явдал. target.id; ) rightArrowParents.push(entry); // )

Энд $j = jQuery хувьсагч

мөн ангийн нэрээр .. гэсэн асуудлыг шийднэ

орлуулах функц энд байна:

Функц escapeRegExp(str) ( str.replace(/([.*+?^=!:$()()|\[\]\/\\])/g, "\\$1"); ) функцийг буцаана replaceAll(str, олох, солих) ( str.replace(шинэ RegExp(escapeRegExp(хайх), "g"), солих); )

Энд jQuery замыг буцаадаг JS хувилбар байна. Би мөн элементүүд байгаа бол ID-г нэмнэ. Энэ нь массив дахь id-г харвал хамгийн богино замыг сонгох боломжийг танд олгоно.

Var path = getDomPath(элемент); console.log (зам. нэгдэх(" > "));

Үндсэн хэсэг > хэсэг:eq(0) > div:eq(3) > хэсэг#контент > хэсэг#гал унтраах > div#галын жагсаалт > нийтлэл#галынхоор-46813651 > толгой > h2 > span# гарчиг-46813651

Энд функц байна.

Функц 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); // html элементийг устгана)

Нарийн төвөгтэй, хүнд вэб програмууд өнөө үед түгээмэл болсон. Хөтөч хоорондын, ашиглахад хялбар, баялаг функц бүхий jQuery номын сангууд нь DOM-г шууд удирдахад ихээхэн тусалж чадна. Тиймээс олон хөгжүүлэгчид олон асуудалтай байсан уугуул DOM API-тай ажиллахаас илүүтэйгээр ийм сангуудыг ашигладаг нь гайхах зүйл биш юм. Хөтөчүүдийн ялгаа асуудал байсаар байгаа ч jQuery алдаршиж байсан 5-6 жилийн өмнөхөөс DOM илүү сайн болсон.

Энэ нийтлэлд би эцэг эх, хүүхэд, хөршийн харилцаанд анхаарлаа хандуулж, DOM-ийн HTML-г удирдах чадварыг харуулах болно. Эцэст нь хэлэхэд, би эдгээр функцуудад зориулсан хөтөчийн дэмжлэгийн талаар мэдээлэл өгөх болно, гэхдээ jQuery гэх мэт номын сан нь үндсэн функцийг хэрэгжүүлэхэд алдаа, зөрчилтэй байдаг тул сайн сонголт хэвээр байгааг санаарай.

Хүүхдийн зангилааг тоолох

Үзүүлэхийн тулд би дараахь зүйлийг ашиглах болно HTML тэмдэглэгээ, бид үүнийг нийтлэлийн туршид хэд хэдэн удаа өөрчлөх болно:

• Жишээ нэг
• Хоёр дахь жишээ
• Жишээ гурав
• Жишээ дөрөв
• Жишээ тав
• Зургадугаар жишээ

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

Таны харж байгаагаар, ашигласан техник нь өөр боловч үр дүн нь ижил байна. Эхний тохиолдолд би хүүхдийн өмчийг ашигладаг. Энэ нь зөвхөн унших шинж чанартай бөгөөд цуглуулгыг буцаана HTML элементүүд, хүссэн элемент дотор байрлах; Тэдний тоог тоолохын тулд би энэ цуглуулгын урт шинж чанарыг ашигладаг.

Хоёрдахь жишээнд би childElementCount аргыг ашиглаж байгаа бөгөөд энэ нь миний бодлоор илүү цэгцтэй, илүү засвар үйлчилгээ хийх боломжтой арга юм (энэ талаар дараа дэлгэрэнгүй ярина уу, энэ нь юу болохыг ойлгоход танд асуудал гарахгүй гэж би бодож байна).

Би childNodes.length-г (хүүхэд.length-ийн оронд) ашиглахыг оролдож болох ч үр дүнг харна уу:

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

Энэ нь 13-ыг буцаана, учир нь childNodes нь хоосон зайг оруулаад бүх зангилааны цуглуулга бөгөөд хэрэв та хүүхэд зангилаа болон хүүхдийн элементийн зангилааны хоорондох ялгааг анхаарч үзвэл үүнийг санаарай.

Хүүхдийн зангилаа байгаа эсэхийг шалгах

Элементэд хүүхэд зангилаа байгаа эсэхийг шалгахын тулд би hasChildNodes() аргыг ашиглаж болно. Энэ арга нь тэдгээрийн байгаа эсвэл байхгүй байгааг илтгэх Boolean утгыг буцаана:

Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // үнэн

Миний жагсаалтад хүүхэд зангилаа байдгийг би мэдэж байгаа, гэхдээ HTML-г байхгүй болгож өөрчлөх боломжтой; Тэмдэглэгээ одоо дараах байдлаар харагдаж байна.

hasChildNodes()-г дахин ажиллуулсны үр дүн энд байна:

Console.log(myList.hasChildNodes()); // үнэн

Энэ арга нь үнэн хэвээр байна. Жагсаалт нь ямар ч элемент агуулаагүй ч гэсэн хоосон зай агуулж байгаа бөгөөд энэ нь хүчинтэй зангилааны төрөл юм. Энэ аргазөвхөн элементийн зангилаа биш бүх зангилааг харгалзан үздэг. hasChildNodes() нь худал буцаахын тулд бид тэмдэглэгээг дахин өөрчлөх шаардлагатай:

Одоо хүлээгдэж буй үр дүнг консол дээр харуулав:

Console.log(myList.hasChildNodes()); // худал

Мэдээжийн хэрэг, хэрэв би хоосон зайтай тулгарах болно гэдгийг мэдэж байвал эхлээд хүүхэд зангилаа байгаа эсэхийг шалгаад дараа нь nodeType шинж чанарыг ашиглан тэдгээрийн дотор элементийн зангилаа байгаа эсэхийг тодорхойлно.

Хүүхдийн элементүүдийг нэмэх, хасах

DOM-д элемент нэмэх, устгахад ашиглаж болох аргууд байдаг. Тэдгээрийн хамгийн алдартай нь createElement() болон appendChild() аргуудын хослол дээр суурилдаг.

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

Энэ тохиолдолд би createElement() аргыг ашиглан үүсгэж, дараа нь үүнийг body дээр нэмнэ. Энэ нь маш энгийн бөгөөд та энэ аргыг өмнө нь хэрэглэж байсан байх.

Харин тусгайлан оруулахын оронд элемент үүсгэж байна, би мөн appendChild()-г ашиглаж, одоо байгаа элементийг зөөж болно. Бидэнд дараах тэмдэглэгээ байна гэж бодъё.

• Жишээ нэг
• Хоёр дахь жишээ
• Жишээ гурав
• Жишээ дөрөв
• Жишээ тав
• Зургадугаар жишээ

Жишээ текст

Би жагсаалтын байршлыг дараах кодоор өөрчилж болно.

Var myList = document.getElementById("myList"), контейнер = document.getElementById("c"); container.appendChild(myList);

Эцсийн DOM дараах байдлаар харагдах болно.

Жишээ текст

• Жишээ нэг
• Хоёр дахь жишээ
• Жишээ гурав
• Жишээ дөрөв
• Жишээ тав
• Зургадугаар жишээ

Жагсаалтыг бүхэлд нь байрлалаас нь хасч (догол мөрний дээд талд) дараа нь хаалтын хэсгийн өмнө оруулсан болохыг анхаарна уу. appendChild() аргыг ихэвчлэн createElement() ашиглан үүсгэсэн элементүүдийг нэмэхэд ашигладаг бол одоо байгаа элементүүдийг зөөхөд ашиглаж болно.

Мөн би removeChild() ашиглан DOM-ээс хүүхэд элементийг бүрэн устгаж чадна. Өмнөх жишээнээс бидний жагсаалтыг хэрхэн устгах вэ:

Var myList = document.getElementById("myList"), контейнер = document.getElementById("c"); container.removeChild(myList);

Элемент одоо устгагдсан. RemoveChild() арга нь устгасан элементийг буцаадаг тул би үүнийг дараа хэрэгтэй тохиолдолд хадгалах боломжтой.

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

Тодорхойлолтод харьцангуй саяхан нэмэгдсэн ChildNode.remove() арга бас бий:

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

Энэ арга нь алсын объектыг буцааж өгөхгүй бөгөөд IE (зөвхөн Edge) дээр ажиллахгүй. Хоёр арга нь текстийн зангилааг элементийн зангилаатай адил устгадаг.

Хүүхдийн элементүүдийг солих

Би одоо байгаа хүүхэд элементийг шинэ элементээр сольж болно, тэр шинэ элемент байгаа эсэх, эсвэл би үүнийг эхнээс нь үүсгэсэн эсэх. Энд тэмдэглэгээ байна:

Жишээ Текст

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "жишээ"; myDiv.appendChild(document.createTextNode("Шинэ элементийн текст")); document.body.replaceChild(myDiv, myPar);

Шинэ элементийн текст

Таны харж байгаагаар replaceChild() арга нь шинэ элемент болон түүний орлуулсан хуучин элемент гэсэн хоёр аргумент авдаг.

Би одоо байгаа элементийг зөөхийн тулд энэ аргыг ашиглаж болно. Дараах HTML-г харна уу.

Жишээ текст 1

Жишээ текст 2

Жишээ текст 3

Би дараах кодыг ашиглан гурав дахь догол мөрийг эхний догол мөрөөр сольж болно.

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

Одоо үүсгэсэн DOM дараах байдалтай байна.

Жишээ текст 2

Жишээ текст 1

Тодорхой хүүхдүүдийг сонгох

Хэд хэдэн байдаг янз бүрийн арга замуудтодорхой элементийг сонгох. Өмнө үзүүлсэнчлэн, би хүүхдийн цуглуулга эсвэл childNodes өмчийг ашиглан эхэлж болно. Гэхдээ бусад сонголтуудыг авч үзье:

firstElementChild болон lastElementChild шинж чанарууд нь нэрсийнхээ санал болгож буй зүйлийг яг таг хийдэг: эхний болон сүүлчийн хүүхэд элементүүдийг сонгоно. Тэмдэглэгээ рүүгээ буцъя:

• Жишээ нэг
• Хоёр дахь жишээ
• Жишээ гурав
• Жишээ дөрөв
• Жишээ тав
• Зургадугаар жишээ

Би эдгээр шинж чанаруудыг ашиглан эхний болон сүүлчийн элементүүдийг сонгож болно:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "Жишээ нэг" console.log(myList.lastElementChild.innerHTML); // "Жишээ зургаа"

Хэрэв би эхний эсвэл сүүлчийнхээс өөр хүүхэд элементүүдийг сонгохыг хүсвэл өмнөхElementSibling болон nextElementSibling шинж чанаруудыг ашиглаж болно. Энэ нь firstElementChild болон lastElementChild шинж чанаруудыг нэгтгэснээр хийгддэг:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Жишээ хоёр" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Тав дахь жишээ"

FirstChild , lastChild , previousSibling болон nextSibling зэрэг ижил төстэй шинж чанарууд бас байдаг боловч тэдгээр нь зөвхөн элементүүд биш бүх төрлийн зангилаануудыг харгалзан үздэг. Ерөнхийдөө зөвхөн элементийн зангилаа гэж үздэг шинж чанарууд нь бүх зангилаануудыг сонгохоос илүү ашигтай байдаг.

DOM-д контент оруулж байна

Би аль хэдийн DOM-д элемент оруулах аргуудыг үзсэн. Дараа нь үргэлжлүүлье ижил төстэй сэдэвмөн контент оруулах шинэ сонголтуудыг харна уу.

Нэгдүгээрт, энгийн insertBefore() арга байдаг бөгөөд энэ нь replaceChild() шиг хоёр аргументыг авч, шинэ болон одоо байгаа элементүүдтэй ажилладаг. Энд тэмдэглэгээ байна:

• Жишээ нэг
• Хоёр дахь жишээ
• Жишээ гурав
• Жишээ дөрөв
• Жишээ тав
• Зургадугаар жишээ

Жишээ догол мөр

Эхлээд хасах гэж байгаа догол мөрийг анхаарч, дараа нь жагсаалтын өмнө оруулаарай.

Var myList = document.getElementById("myList"), контейнер = document.getElementBy("c"), myPar = document.getElementById("пар"); container.insertBefore(myPar, myList);

Үүссэн HTML дээр догол мөр жагсаалтын өмнө гарч ирэх бөгөөд энэ нь элементийг боох өөр нэг арга юм.

Жишээ догол мөр

• Жишээ нэг
• Хоёр дахь жишээ
• Жишээ гурав
• Жишээ дөрөв
• Жишээ тав
• Зургадугаар жишээ

replaceChild() шиг insertBefore() нь нэмэх гэж буй элемент болон бидний оруулахыг хүссэн элемент гэсэн хоёр аргумент авдаг.

Энэ арга нь энгийн. Одоо илүү хүчирхэг оруулах аргыг туршиж үзье: insertAdjacentHTML() аргыг.