Vývojári zvyčajne používajú jQuery, keď potrebujú niečo urobiť s DOM. Takmer akúkoľvek manipuláciu s DOM je však možné vykonať v čistom JavaScripte pomocou jeho DOM API.

Pozrime sa na toto API podrobnejšie:

Nakoniec si napíšete vlastnú jednoduchú knižnicu DOM, ktorú môžete použiť v akomkoľvek projekte.

Dotazy DOM

Dotazy DOM sa vykonávajú pomocou metódy .querySelector(), ktorá berie ako argument ľubovoľný selektor CSS.

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

Vráti prvý zodpovedajúci prvok. Môžete to urobiť naopak - skontrolujte, či sa prvok zhoduje s výberom:

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

Ak chcete získať všetky prvky, ktoré zodpovedajú selektoru, použite nasledujúcu konštrukciu:

Const myElements = document.querySelectorAll(.bar")

Ak viete, na ktorý nadradený prvok chcete odkazovať, môžete namiesto prehľadávania celého kódu jednoducho prehľadávať jeho potomkov:

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

Vynára sa otázka: prečo potom používať iné, menej pohodlné metódy ako .getElementsByTagName() ? Je tu malý problém – výstup .querySelector() nie je aktualizovaný a keď pridáme nový prvok (pozri ), nezmení sa.

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

Tiež querySelectorAll() zhromažďuje všetko do jedného zoznamu, čo ho robí málo efektívnym.

Ako pracovať so zoznamami?

Okrem toho má .querySelectorAll() dve malé upozornenia. Nemôžete len volať metódy na výsledky a očakávať, že sa použijú na každý z nich (ako ste možno zvyknutí robiť s jQuery). V každom prípade budete musieť iterovať všetky prvky v slučke. Po druhé, vrátený objekt je zoznam prvkov, nie pole. Preto metódy poľa nebudú fungovať. Samozrejme, existujú metódy pre zoznamy, niečo ako .forEach() , ale, bohužiaľ, nie sú vhodné pre všetky prípady. Preto je lepšie previesť zoznam na pole:

// Použitie Array.from() Array.from(myElements).forEach(doSomethingWithEachElement) // Alebo prototyp poľa (pred ES6) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // Jednoduchšie: .forEach.call( myElements , doSomethingWithEachElement)

Každý prvok má nejaké vlastnosti, ktoré odkazujú na „rodinu“.

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

Keďže rozhranie prvku je zdedené z rozhrania uzla, sú prítomné aj nasledujúce vlastnosti:

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

Prvé vlastnosti sa vzťahujú na prvok a posledné (s výnimkou .parentElement) môžu byť zoznamy prvkov ľubovoľného typu. Podľa toho môžete skontrolovať typ prvku:

MyElement.firstChild.nodeType === 3 // tento prvok bude textový uzol

Pridávanie tried a atribútov

Pridať nová trieda veľmi jednoduché:

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

Pridanie vlastnosti k prvku je rovnaké ako pri akomkoľvek objekte:

// Získanie hodnoty atribútu const value = myElement.value // Nastavenie atribútu ako vlastnosti prvku myElement.value = "foo" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

Môžete použiť metódy .getAttibute() , .setAttribute() a .removeAttribute(). Okamžite zmenia atribúty HTML prvku (na rozdiel od vlastností DOM), čo spôsobí opätovné vykreslenie prehliadača (všetky zmeny môžete vidieť preskúmaním prvku pomocou vývojárskych nástrojov prehliadača). Takéto prekreslenia si vyžadujú nielen viac zdrojov ako nastavenie vlastností DOM, ale môžu viesť aj k neočakávaným chybám.

Zvyčajne sa používajú pre prvky, ktoré nemajú zodpovedajúce vlastnosti DOM, ako napríklad colspan . Alebo ak je ich použitie naozaj nevyhnutné, napríklad pre HTML vlastnosti pri dedení (pozri).

Pridanie štýlov CSS

Pridávajú sa rovnakým spôsobom ako ostatné vlastnosti:

MyElement.style.marginLeft = "2em"

Niektoré špecifické vlastnosti je možné nastaviť pomocou .style , ale ak chcete získať hodnoty po niekoľkých výpočtoch, potom je lepšie použiť window.getComputedStyle() . Táto metóda prijme prvok a vráti CSSStyleDeclaration, ktorá obsahuje štýly samotného prvku aj jeho rodiča:

Window.getComputedStyle(myElement).getPropertyValue("margin-left")

Zmena DOM

Prvky môžete presúvať:

// Pripojiť element1 ako posledného potomka elementu2 element1.appendChild(element2) // Vložiť element2 ako potomka elementu1 pred element3 element1.insertBefore(element2, element3)

Ak ho nechcete presunúť, ale potrebujete vložiť kópiu, použite:

// Vytvorenie klonu const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

Metóda .cloneNode() berie ako argument boolovskú hodnotu a ak je true, klonujú sa aj podradené prvky.

Samozrejme môžete vytvárať nové prvky:

Const myNewElement = document.createElement("div") const myNewTextNode = document.createTextNode("nejaký text")

A potom ich vložte podľa obrázka vyššie. Prvok nemôžete odstrániť priamo, ale môžete to urobiť prostredníctvom nadradeného prvku:

MyParentElement.removeChild(myElement)

Môžete tiež nepriamo kontaktovať:

MyElement.parentNode.removeChild(myElement)

Metódy pre prvky

Každý prvok má vlastnosti ako .innerHTML a .textContent , obsahuje HTML kód a teda aj samotný text. Nasledujúci príklad zmení obsah prvku:

// Zmena HTML myElement.innerHTML = ` Nový obsah ( el.addEventListener("zmena", funkcia (udalosť) ( console.log(event.target.value) )) ))

Zabránenie predvoleným akciám

Na tento účel použite metódu .preventDefault(), ktorá blokuje štandardné akcie. Napríklad zablokuje odoslanie formulára, ak autorizácia na strane klienta nebola úspešná:

MyForm.addEventListener("submit", funkcia (udalosť) ( const name = this.querySelector("#name") if (name.value === "Káčer Donald") { alert("You gotta be kidding!") event.preventDefault() } }) !}

Metóda .stopPropagation() vám pomôže, ak máte špecifickú obsluhu udalosti priradenú podriadenému prvku a druhú obsluhu udalosti priradenú rodičovi pre rovnakú udalosť.

Ako už bolo uvedené, metóda .addEventListener() má voliteľný tretí argument vo forme konfiguračného objektu. Tento objekt musí obsahovať ktorúkoľvek z nasledujúcich boolovských vlastností (všetky sú predvolene nastavené na hodnotu false):

• zachytiť: udalosť bude pripojená k tomuto prvku pred akýmkoľvek iným prvkom nižšie v DOM;
• raz: udalosť možno priradiť iba raz;
• pasívne: event.preventDefault() sa bude ignorovať (výnimka pri chybe).

Najbežnejšou vlastnosťou je .capture a je taká bežná, že pre ňu existuje skratka: namiesto jej odovzdania v konfiguračnom objekte jednoducho odovzdajte jej hodnotu sem:

MyElement.addEventListener(typ, poslucháč, pravda)

Obslužné rutiny sa odstraňujú pomocou metódy .removeEventListener(), ktorá má dva argumenty: typ udalosti a odkaz na obslužný program, ktorý sa má odstrániť. Napríklad vlastnosť Once možno implementovať takto:

MyElement.addEventListener("zmena", poslucháč funkcie (udalosť) ( console.log(udalosť.type + " sa spustilo " + toto) this.removeEventListener("zmena", poslucháč) ))

Dedičnosť

Povedzme, že máte prvok a chcete pridať obsluhu udalosti pre všetky jeho deti. Potom by ste ich museli prechádzať pomocou metódy myForm.querySelectorAll("input"), ako je uvedené vyššie. Môžete však jednoducho pridať prvky do formulára a skontrolovať ich obsah pomocou event.target .

MyForm.addEventListener("zmena", funkcia (udalosť) ( const target = event.target if (target.matches("input")) ( console.log(target.value) ) ))

Ďalšou výhodou tejto metódy je, že handler bude automaticky pripojený k novým podradeným prvkom.

Animácia

Najjednoduchší spôsob, ako pridať animáciu, je použiť CSS s vlastnosťou prechodu. Ale pre väčšiu flexibilitu (napríklad pre hry) je vhodnejší JavaScript.

Volanie metódy window.setTimeout() až do konca animácie nie je dobrý nápad, pretože vaša aplikácia môže zamrznúť, najmä na mobilné zariadenia. Na uloženie všetkých zmien do ďalšieho prekreslenia je lepšie použiť window.requestAnimationFrame(). Berie funkciu ako argument, ktorý zase dostáva časovú pečiatku:

Const start = window.performance.now() const Duration = 2000 window.requestAnimationFrame(funkcia fadeIn (teraz)) ( const progress = now - start myElement.style.opacity = progress/trvanie if (pokrok< duration) { window.requestAnimationFrame(fadeIn) } }

Týmto spôsobom sa dosiahne veľmi hladká animácia. Mark Brown vo svojom článku rozoberá túto tému.

Písanie vlastnej knižnice

Skutočnosť, že v DOM musíte neustále opakovať prvky, aby ste mohli vykonávať akékoľvek operácie s prvkami, sa môže zdať dosť únavná v porovnaní so syntaxou $(".foo").css((color: "red") jQuery. Ale prečo nenapísať niekoľko vlastných metód, aby ste si túto úlohu uľahčili?

Const $ = funkcia $ (selektor, kontext = dokument) ( prvky const = Array.from(context.querySelectorAll(selektor)) return ( prvky, html (newHtml) ( this.elements.forEach(element => ( element.innerHTML = newHtml )) return this ), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss) )) return this ), on (event, handler, options) ( this.elements .forEach(element => ( element.addEventListener(event, handler, options) )) return this ) ) )

Pseudokód

$(".rightArrow").click(function() ( rightArrowParents = this.dom(); //.dom(); je pseudo funkcia ... mala by zobraziť celé upozornenie(rightArrowParents); ));

Alarmová správa bude:

body div.lol a.right Arrow

Ako to môžem získať pomocou javascript/jquery?

Použitie jQuery takto (nasledované riešením, ktoré nepoužíva jQuery okrem udalosti, oveľa menej volaní funkcií, ak je to dôležité):

Príklad v reálnom čase:

$(".rightArrow").click(function() ( var rightArrowParents = ; $(this).parents().addBack().not("html").each(function() ( var entry = this.tagName .toLowerCase(); if (this.className) (záznam += "." + this.className.replace(/ /g, "."); ) rightArrowParents.push(entry); )); alert(rightArrowParents.join (" ")); návrat false; )); Kliknite tu

(V živých príkladoch som aktualizoval atribút class na div tak, aby bol lol multi, aby som demonštroval prácu s viacerými triedami.)

Tu je riešenie pre presné párovanie prvkov.

Je dôležité pochopiť, že selektor (nie je skutočný), ktoré nástroje Chrome ukazujú, neidentifikujú prvok v DOM jednoznačne. ( napríklad nebude rozlišovať medzi zoznamom po sebe idúcich prvkov rozsahu. Žiadne informácie o umiestnení/indexovaní)

$.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(funkcia (c) ( return "." + c; )).join("") : "", meno = item.nodeName.toLowerCase(), index = self.siblings(name).length ? ":nth-child(" + (self.index() + 1) + ")" : ""; if (meno === "html" || meno === "telo") ( vrátiť názov; ) vrátiť meno + index + id + clss; )).join(" > ") návrat quickCss; );

A môžete ho použiť takto:

Console.log($("nejaký-selektor").fullSelector());

Posunula som si kúsok z T.J. Crowder až maličký plugin jQuery. Použil som verziu jQuery, aj keď má pravdu, že je to úplne zbytočná réžia, ale používam ju len na účely ladenia, takže mi je to jedno.

Použitie:

Vnorené rozpätie Jednoduché rozpätie Pre

// výsledok (pole): ["body", "div.sampleClass"] $("span").getDomPath(false) // výsledok (reťazec): body > div.sampleClass $("span").getDomPath( ) // výsledok (pole): ["body", "div#test"] $("pre").getDomPath(false) // výsledok (reťazec): body > div#test $("pre").getDomPath ()

Var obj = $("#zobraziť-tlačidlo-editora"), cesta = ""; while (typeof obj.prop("tagName") != "undefined")( if (obj.attr("class"))( cesta = "."+obj.attr("class").replace(/\s /g , ".") + cesta; ) if (obj.attr("id"))( cesta = "#"+obj.attr("id") + cesta; ) cesta = " " +obj.prop( "tagName").toLowerCase() + cesta; obj = obj.parent(); ) console.log(cesta);

ahoj, táto funkcia rieši chybu súvisiacu s tým, že sa aktuálny prvok nezobrazuje v ceste

Pozrite si to teraz

$j(".wrapper").click(function(event) ( 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, "."); )else 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 (udalosť .target.className) ( záznam += "." + event.target.className.replace(/ /g, "."); )else if(event.target.id)( záznam += "#" + udalosť. target.id; ) rightArrowParents.push(entry); // )

kde $j = premenná jQuery

tiež vyriešiť problém s .. v názve triedy

tu je funkcia nahradenia:

Funkcia escapeRegExp(str) ( return str.replace(/([.*+?^=!:$()()|\[\]\/\\])/g, "\\$1"); ) funkcia nahradiťVšetko(str, nájsť, nahradiť) ( return str.replace(new RegExp(escapeRegExp(find), "g"), nahradiť); )

Tu je natívna verzia JS, ktorá vracia cestu jQuery. Pridávam aj ID prvkov, ak existujú. To vám dá možnosť zvoliť si najkratšiu cestu, ak v poli vidíte ID.

Var cesta = getDomPath(prvok); console.log(path.join(" > "));

Body > section:eq(0) > div:eq(3) > section#content > section#firehose > div#firehoselist > article#firehose-46813651 > header > h2 > span#title-46813651

Tu je funkcia.

Funkcia 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 ; ) return stack.slice(1); // odstráni prvok html)

Zložité a náročné webové aplikácie sa v dnešnej dobe stali bežnými. Knižnice naprieč prehliadačmi a ľahko použiteľné knižnice, ako je jQuery, s ich bohatou funkčnosťou môžu výrazne pomôcť pri manipulácii s DOM za behu. Preto nie je prekvapujúce, že mnohí vývojári používajú takéto knižnice častejšie ako prácu s natívnym DOM API, s ktorým boli mnohé problémy. Zatiaľ čo rozdiely v prehliadačoch sú stále problémom, DOM je teraz v lepšom stave ako pred 5-6 rokmi, keď jQuery získaval na popularite.

V tomto článku predvediem možnosti manipulácie s HTML DOM so zameraním na vzťahy medzi rodičmi, deťmi a susedmi. Na záver uvediem informácie o podpore prehliadača pre tieto funkcie, ale majte na pamäti, že knižnica ako jQuery je stále dobrou voľbou z dôvodu prítomnosti chýb a nezrovnalostí v implementácii natívnej funkčnosti.

Počítanie detských uzlov

Na ukážku použijem nasledovné HTML značky, v celom článku to niekoľkokrát zmeníme:

• Príklad jedna
• Príklad dva
• Príklad tri
• Príklad štyri
• Príklad päť
• Príklad šiesty

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

Ako vidíte, výsledky sú rovnaké, aj keď použité techniky sú odlišné. V prvom prípade používam vlastnosť detí. Toto je vlastnosť len na čítanie, vracia kolekciu HTML prvky, ktorý sa nachádza vo vnútri požadovaného prvku; Na spočítanie ich počtu používam vlastnosť length tejto kolekcie.

V druhom príklade používam metódu childElementCount, o ktorej si myslím, že je úhľadnejší a potenciálne udržiavateľnejší (viac o tom neskôr, nemyslím si, že budete mať problém pochopiť, čo robí).

Mohol by som skúsiť použiť childNodes.length (namiesto children.length), ale pozrite sa na výsledok:

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

Vráti 13, pretože childNodes je kolekcia všetkých uzlov vrátane medzier – majte to na pamäti, ak vám záleží na rozdieloch medzi podriadenými uzlami a uzlami podriadených prvkov.

Kontrola existencie podradených uzlov

Ak chcete skontrolovať, či prvok má podradené uzly, môžem použiť metódu hasChildNodes(). Metóda vracia boolovskú hodnotu označujúcu ich prítomnosť alebo neprítomnosť:

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

Viem, že môj zoznam má podradené uzly, ale môžem zmeniť HTML tak, aby tam žiadne neboli; Označenie teraz vyzerá takto:

A tu je výsledok opätovného spustenia hasChildNodes():

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

Metóda stále vracia hodnotu true. Hoci zoznam neobsahuje žiadne prvky, obsahuje medzeru, čo je platný typ uzla. Táto metóda berie do úvahy všetky uzly, nielen uzly prvkov. Aby funkcia hasChildNodes() vrátila hodnotu false, musíme znova zmeniť označenie:

A teraz sa v konzole zobrazí očakávaný výsledok:

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

Samozrejme, ak viem, že by som sa mohol stretnúť s medzerami, najprv skontrolujem existenciu podradených uzlov a potom pomocou vlastnosti nodeType určím, či medzi nimi existujú nejaké uzly prvkov.

Pridávanie a odstraňovanie detských prvkov

Existujú techniky, ktoré môžete použiť na pridávanie a odstraňovanie prvkov z DOM. Najznámejšia z nich je založená na kombinácii metód createElement() a appendChild().

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

V tomto prípade vytvorím pomocou metódy createElement() a potom ju pridám do tela . Je to veľmi jednoduché a určite ste už túto techniku ​​používali.

Ale namiesto vkladania konkrétne vytvorený prvok, môžem použiť aj appendChild() a len presunúť existujúci prvok. Povedzme, že máme nasledujúce označenie:

• Príklad jedna
• Príklad dva
• Príklad tri
• Príklad štyri
• Príklad päť
• Príklad šiesty

Príklad textu

Môžem zmeniť umiestnenie zoznamu pomocou nasledujúceho kódu:

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

Finálny DOM bude vyzerať takto:

Príklad textu

• Príklad jedna
• Príklad dva
• Príklad tri
• Príklad štyri
• Príklad päť
• Príklad šiesty

Všimnite si, že celý zoznam bol odstránený zo svojho miesta (nad odsekom) a potom za ním vložený pred záverečné telo . Zatiaľ čo metóda appendChild() sa zvyčajne používa na pridávanie prvkov vytvorených pomocou createElement() , možno ju použiť aj na presun existujúcich prvkov.

Môžem tiež úplne odstrániť podradený prvok z DOM pomocou removeChild() . Tu je postup, ako odstrániť náš zoznam z predchádzajúceho príkladu:

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

Prvok je teraz odstránený. Metóda removeChild() vráti odstránený prvok, aby som si ho mohol uložiť pre prípad, že by som ho neskôr potreboval.

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

Existuje aj metóda ChildNode.remove(), ktorá bola relatívne nedávno pridaná do špecifikácie:

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

Táto metóda nevracia vzdialený objekt a nefunguje v IE (iba Edge). A obe metódy odstraňujú textové uzly rovnakým spôsobom ako uzly prvkov.

Výmena podradených prvkov

Môžem nahradiť existujúci podradený prvok novým, či už tento nový prvok existuje alebo či som ho vytvoril od začiatku. Tu je označenie:

Príklad textu

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "príklad"; myDiv.appendChild(document.createTextNode("Text nového prvku")); document.body.replaceChild(myDiv, myPar);

Nový text prvku

Ako vidíte, metóda replaceChild() má dva argumenty: nový prvok a starý prvok, ktorý nahrádza.

Túto metódu môžem použiť aj na presun existujúceho prvku. Pozrite si nasledujúci kód HTML:

Príklad textu 1

Príklad textu 2

Príklad textu 3

Môžem nahradiť tretí odsek prvým odsekom pomocou nasledujúceho kódu:

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

Teraz vygenerovaný DOM vyzerá takto:

Príklad textu 2

Príklad textu 1

Výber konkrétnych detí

Je ich viacero rôzne cesty výberom konkrétneho prvku. Ako bolo uvedené vyššie, môžem začať použitím kolekcie detí alebo vlastnosti childNodes. Pozrime sa však na ďalšie možnosti:

Vlastnosti firstElementChild a lastElementChild robia presne to, čo ich názvy naznačujú, že robia: vyberajú prvý a posledný podradený prvok. Vráťme sa k nášmu značeniu:

• Príklad jedna
• Príklad dva
• Príklad tri
• Príklad štyri
• Príklad päť
• Príklad šiesty

Prvý a posledný prvok môžem vybrať pomocou týchto vlastností:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "Príklad jedna" console.log(myList.lastElementChild.innerHTML); // "Príklad šesť"

Môžem tiež použiť vlastnosti previousElementSibling a nextElementSibling, ak chcem vybrať podradené prvky iné ako prvý alebo posledný. To sa dosiahne kombináciou vlastností firstElementChild a lastElementChild:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Príklad dva" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Príklad päť"

Existujú aj podobné vlastnosti firstChild , lastChild , previousSibling a nextSibling , ale berú do úvahy všetky typy uzlov, nielen prvky. Vo všeobecnosti sú vlastnosti, ktoré berú do úvahy iba uzly prvkov, užitočnejšie ako tie, ktoré vyberajú všetky uzly.

Vkladanie obsahu do DOM

Už som sa pozrel na spôsoby vkladania prvkov do DOM. Prejdime k podobná téma a pozrite sa na nové možnosti vkladania obsahu.

Po prvé, existuje jednoduchá metóda insertBefore(), podobne ako replaceChild(), vyžaduje dva argumenty a pracuje s novými aj existujúcimi prvkami. Tu je označenie:

• Príklad jedna
• Príklad dva
• Príklad tri
• Príklad štyri
• Príklad päť
• Príklad šiesty

Príklad odseku

Všimnite si odsek, ktorý najskôr odstránim a potom ho vložím pred zoznam, všetko jedným ťahom:

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

Vo výslednom HTML sa odsek zobrazí pred zoznamom a toto je ďalší spôsob, ako zabaliť prvok.

Príklad odseku

• Príklad jedna
• Príklad dva
• Príklad tri
• Príklad štyri
• Príklad päť
• Príklad šiesty

Podobne ako replaceChild(), aj insertBefore() má dva argumenty: prvok, ktorý sa má pridať, a prvok, pred ktorý ho chceme vložiť.

Táto metóda je jednoduchá. Skúsme teraz výkonnejšiu metódu vkladania: metódu insertAdjacentHTML().