Vývojáři obvykle používají jQuery, když potřebují něco udělat s DOM. Téměř jakoukoli manipulaci s DOM však lze provést v čistém JavaScriptu pomocí jeho DOM API.

Podívejme se na toto API podrobněji:

Nakonec si napíšete vlastní jednoduchou DOM knihovnu, kterou lze použít v jakémkoli projektu.

Dotazy DOM

Dotazy DOM se provádějí pomocí metody .querySelector(), která jako argument používá libovolný selektor CSS.

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

Vrátí první odpovídající prvek. Můžete to udělat naopak - zkontrolujte, zda prvek odpovídá selektoru:

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

Pokud chcete získat všechny prvky, které odpovídají selektoru, použijte následující konstrukci:

Const myElements = document.querySelectorAll(.bar")

Pokud víte, na který nadřazený prvek chcete odkazovat, můžete místo prohledávání celého kódu jednoduše prohledávat jeho potomky:

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

Nabízí se otázka: proč potom používat jiné, méně pohodlné metody jako .getElementsByTagName() ? Je tu malý problém - výstup .querySelector() není aktualizován a když přidáme nový prvek (viz ), nezmění se.

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

Také querySelectorAll() shromažďuje vše do jednoho seznamu, takže není příliš efektivní.

Jak pracovat se seznamy?

Kromě toho má .querySelectorAll() dvě malá upozornění. Nemůžete jen volat metody na výsledky a očekávat, že budou aplikovány na každý z nich (jako jste možná zvyklí dělat s jQuery). V každém případě budete muset iterovat všechny prvky ve smyčce. Za druhé, vrácený objekt je seznam prvků, nikoli pole. Metody pole proto nebudou fungovat. Samozřejmě existují metody pro seznamy, něco jako .forEach() , ale bohužel nejsou vhodné pro všechny případy. Takže je lepší převést seznam na pole:

// Použití Array.from() Array.from(myElements).forEach(doSomethingWithEachElement) // Nebo prototyp pole (před ES6) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // Jednodušší: .forEach.call( myElements , doSomethingWithEachElement)

Každý prvek má nějaké vlastnosti, které odkazují na "rodinu".

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

Vzhledem k tomu, že rozhraní prvku je zděděno z rozhraní Node, jsou k dispozici také následující vlastnosti:

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

První vlastnosti odkazují na prvek a poslední (s výjimkou .parentElement) mohou být seznamy prvků libovolného typu. Podle toho můžete zkontrolovat typ prvku:

MyElement.firstChild.nodeType === 3 // tento prvek bude textový uzel

Přidání tříd a atributů

Přidat nová třída velmi jednoduché:

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

Přidání vlastnosti k prvku je stejné jako u jakéhokoli objektu:

// Získání hodnoty atributu const value = myElement.value // Nastavení atributu jako vlastnosti prvku myElement.value = "foo" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

Můžete použít metody .getAttibute() , .setAttribute() a .removeAttribute(). Okamžitě změní atributy HTML prvku (na rozdíl od vlastností DOM), což způsobí opětovné vykreslení prohlížeče (všechny změny můžete vidět prozkoumáním prvku pomocí vývojářských nástrojů prohlížeče). Taková překreslování nejenže vyžadují více prostředků než nastavení vlastností DOM, ale mohou také vést k neočekávaným chybám.

Obvykle se používají pro prvky, které nemají odpovídající vlastnosti DOM, jako je colspan . Nebo jestli je jejich použití opravdu nutné, například pro HTML vlastnosti při dědění (viz).

Přidání stylů CSS

Přidávají se stejným způsobem jako ostatní vlastnosti:

MyElement.style.marginLeft = "2em"

Některé specifické vlastnosti lze nastavit pomocí .style , ale pokud chcete získat hodnoty po některých výpočtech, pak je lepší použít window.getComputedStyle() . Tato metoda přijme prvek a vrátí CSSStyleDeclaration obsahující styly samotného prvku i jeho rodiče:

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

Změna DOM

Prvky můžete přesouvat:

// Připojit element1 jako posledního potomka elementu2 element1.appendChild(element2) // Vložit element2 jako potomka elementu1 před element3 element1.insertBefore(element2, element3)

Pokud jej nechcete přesunout, ale potřebujete vložit kopii, použijte:

// Vytvořte klon const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

Metoda .cloneNode() přebírá jako argument booleovskou hodnotu, a pokud je true, podřízené prvky jsou také klonovány.

Samozřejmě můžete vytvářet nové prvky:

Const myNewElement = document.createElement("div") const myNewTextNode = document.createTextNode("nějaký text")

A poté je vložte, jak je znázorněno výše. Prvek nelze odstranit přímo, ale můžete to udělat prostřednictvím nadřazeného prvku:

MyParentElement.removeChild(myElement)

Můžete také nepřímo kontaktovat:

MyElement.parentNode.removeChild(myElement)

Metody pro prvky

Každý prvek má vlastnosti jako .innerHTML a .textContent , obsahuje HTML kód a tedy i samotný text. Následující příklad změní obsah prvku:

// Změňte HTML myElement.innerHTML = ` Nový obsah ( el.addEventListener("change", function (event) ( console.log(event.target.value) )) ))

Zabránění výchozím akcím

K tomu použijte metodu .preventDefault(), která blokuje standardní akce. Například zablokuje odeslání formuláře, pokud autorizace na straně klienta nebyla úspěšná:

MyForm.addEventListener("submit", funkce (událost) ( const name = this.querySelector("#name") if (name.value === "Kačer Donald") { alert("You gotta be kidding!") event.preventDefault() } }) !}

Metoda .stopPropagation() vám pomůže, pokud máte konkrétní obslužnou rutinu události přiřazenou k podřízenému prvku a druhou obslužnou rutinu události přiřazenou k nadřazené události pro stejnou událost.

Jak bylo uvedeno dříve, metoda .addEventListener() přebírá volitelný třetí argument ve formě konfiguračního objektu. Tento objekt musí obsahovat kteroukoli z následujících booleovských vlastností (všechny jsou ve výchozím nastavení nastaveny na false):

• zachytit: událost bude připojena k tomuto prvku před jakýmkoli jiným prvkem níže v DOM;
• jednou: událost lze přiřadit pouze jednou;
• pasivní: event.preventDefault() bude ignorována (výjimka při chybě).

Nejběžnější vlastností je .capture a je tak běžná, že pro ni existuje zkratka: místo předávání v konfiguračním objektu stačí předat její hodnotu zde:

MyElement.addEventListener(typ, posluchač, pravda)

Obslužné rutiny se odstraňují pomocí metody .removeEventListener(), která přebírá dva argumenty: typ události a odkaz na obslužnou rutinu, která se má odstranit. Vlastnost Once lze například implementovat takto:

MyElement.addEventListener("změna", posluchač funkce (událost) ( console.log(event.type + " se spustilo na " + toto) this.removeEventListener("change", listener) ))

Dědictví

Řekněme, že máte prvek a chcete přidat obsluhu události pro všechny jeho potomky. Pak byste je museli procházet pomocí metody myForm.querySelectorAll("input"), jak je uvedeno výše. Můžete však jednoduše přidat prvky do formuláře a zkontrolovat jejich obsah pomocí event.target .

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

A další výhodou této metody je, že handler bude automaticky připojen k novým podřízeným prvkům.

Animace

Nejjednodušší způsob, jak přidat animaci, je pomocí CSS s vlastností transition. Ale pro větší flexibilitu (například pro hry) se lépe hodí JavaScript.

Volání metody window.setTimeout(), dokud animace neskončí, není dobrý nápad, protože vaše aplikace může zamrznout, zejména na mobilní zařízení. Pro uložení všech změn do dalšího překreslení je lepší použít window.requestAnimationFrame(). Bere funkci jako argument, který zase obdrží časové razítko:

Const start = window.performance.now() const Duration = 2000 window.requestAnimationFrame(funkce fadeIn (nyní)) ( const progress = now - start myElement.style.opacity = progress / trvání if (progress< duration) { window.requestAnimationFrame(fadeIn) } }

Tímto způsobem je dosaženo velmi hladké animace. Mark Brown ve svém článku pojednává o tomto tématu.

Psaní vlastní knihovny

Skutečnost, že v DOM musíte prvky neustále iterovat, abyste mohli provádět jakékoli operace s prvky, se může zdát docela zdlouhavá ve srovnání se syntaxí $(".foo").css((color: "red") jQuery. Ale proč nenapsat pár vlastních metod, které si tento úkol usnadní?

Const $ = funkce $ (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 ) ) )

Pseudo kód

$(".rightArrow").click(function() ( rightArrowParents = this.dom(); //.dom(); je pseudo funkce ... měla by zobrazit celé upozornění(rightArrowParents); ));

Alarmová zpráva bude:

body div.lol a.rightArrow

Jak to mohu získat pomocí javascript/jquery?

Použití jQuery jako je toto (následované řešením, které nepoužívá jQuery kromě události, mnohem méně volání funkcí, pokud je to důležité):

Příklad v reálném čase:

$(".rightArrow").click(function() ( var rightArrowParents = ; $(this).parents().addBack().not("html").each(function() ( var entry = this.tagName .toLowerCase(); if (this.className) (položka += "." + this.className.replace(/ /g, "."); ) rightArrowParents.push(entry); )); alert(rightArrowParents.join (" ")); návrat false; )); Klikněte zde

(V živých příkladech jsem aktualizoval atribut class na div tak, aby byl lol multi, abych demonstroval manipulaci s více třídami.)

Zde je řešení pro přesné spárování prvků.

Je důležité pochopit, že selektor (není skutečný), které nástroje Chrome ukazují, neidentifikují prvek v DOM jednoznačně. ( například nebude rozlišovat mezi seznamem po sobě jdoucích prvků rozpětí. Žádné informace o umístění/indexování)

$.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(funkce (c) ( return "." + c; )).join("") : "", jméno = item.nodeName.toLowerCase(), index = self.siblings(name).length ? ":nth-child(" + (self.index() + 1) + ")" : ""; if (jméno === "html" || jméno === "tělo") ( návratový název; ) návratový název + index + id + clss; )).join(" > ") návrat quickCss;);

A můžete to použít takto:

Console.log($("nějaký-selektor").fullSelector());

Přesunul jsem kousek od T.J. Crowder až maličký plugin jQuery. Použil jsem verzi jQuery, i když má pravdu, že je to úplně zbytečná režie, ale používám ji pouze pro účely ladění, takže je mi to jedno.

Používání:

Vnořené rozpětí Jednoduché rozpětí Před

// výsledek (pole): ["body", "div.sampleClass"] $("span").getDomPath(false) // výsledek (řetězec): body > div.sampleClass $("span").getDomPath( ) // výsledek (pole): ["body", "div#test"] $("pre").getDomPath(false) // výsledek (řetězec): body > div#test $("pre").getDomPath ()

Var obj = $("#zobrazit-tlačítko-editoru"), 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, tato funkce řeší chybu související s tím, že aktuální prvek není zobrazen v cestě

Podívejte se na to hned

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

Kde $j = proměnná jQuery

také vyřešit problém s .. v názvu třídy

zde je funkce výměny:

Funkce escapeRegExp(str) ( return str.replace(/([.*+?^=!:$()()|\[\]\/\\])/g, "\\$1"); ) funkce nahraditVše(str, najít, nahradit) ( return str.replace(new RegExp(escapeRegExp(najít), "g"), nahradit); )

Zde je nativní verze JS, která vrací cestu jQuery. Přidám také ID prvků, pokud existují. To vám dá možnost zvolit si nejkratší cestu, pokud v poli vidíte id.

Var cesta = getDomPath(element); 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

Tady je funkce.

Funkce 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); // odstraní prvek html)

Složité a náročné webové aplikace se v dnešní době staly běžnými. Různé prohlížeče a snadno použitelné knihovny, jako je jQuery, se svými bohatými funkcemi mohou výrazně pomoci při manipulaci s DOM za běhu. Proto není divu, že mnoho vývojářů takové knihovny používá častěji než práci s nativním DOM API, se kterým byly mnohé problémy. Zatímco rozdíly v prohlížečích jsou stále problémem, DOM je nyní v lepším stavu, než byl před 5-6 lety, kdy jQuery získával na popularitě.

V tomto článku předvedu možnosti manipulace s HTML DOM se zaměřením na vztahy rodičů, dětí a sousedů. Na závěr uvedu informace o podpoře prohlížečů pro tyto funkce, ale mějte na paměti, že knihovna jako jQuery je stále dobrou volbou kvůli přítomnosti chyb a nesrovnalostí v implementaci nativní funkce.

Počítání podřízených uzlů

Pro demonstraci použiji následující HTML značení, v článku to několikrát změníme:

• Příklad jedna
• Příklad dva
• Příklad tři
• Příklad čtvrtý
• Příklad pět
• Příklad šest

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

Jak vidíte, výsledky jsou stejné, i když použité techniky se liší. V prvním případě používám vlastnost děti. Toto je vlastnost pouze pro čtení, vrací kolekci HTML prvky, umístěný uvnitř požadovaného prvku; K počítání jejich počtu používám vlastnost length této kolekce.

Ve druhém příkladu používám metodu childElementCount, což je podle mě úhlednější a potenciálně udržitelnější způsob (prodiskutujte to později, nemyslím si, že budete mít problém pochopit, co dělá).

Mohl bych zkusit použít childNodes.length (místo children.length), ale podívejte se na výsledek:

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

Vrátí 13, protože childNodes je kolekce všech uzlů včetně mezer – mějte to na paměti, pokud vám záleží na rozdílu mezi podřízenými uzly a uzly podřízených prvků.

Kontrola existence podřízených uzlů

Chcete-li zkontrolovat, zda má prvek podřízené uzly, mohu použít metodu hasChildNodes(). Metoda vrací booleovskou hodnotu označující jejich přítomnost nebo nepřítomnost:

Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // skutečný

Vím, že můj seznam má podřízené uzly, ale mohu změnit HTML tak, aby tam žádné nebyly; Označení nyní vypadá takto:

A zde je výsledek opětovného spuštění hasChildNodes():

Console.log(myList.hasChildNodes()); // skutečný

Metoda stále vrací true. Přestože seznam neobsahuje žádné prvky, obsahuje mezeru, což je platný typ uzlu. Tato metoda bere v úvahu všechny uzly, nejen uzly prvků. Aby funkce hasChildNodes() vrátila hodnotu false, musíme znovu změnit označení:

A nyní se v konzole zobrazí očekávaný výsledek:

Console.log(myList.hasChildNodes()); // Nepravdivé

Samozřejmě, pokud vím, že bych se mohl setkat s mezerami, nejprve zkontroluji existenci podřízených uzlů a poté pomocí vlastnosti nodeType určím, zda mezi nimi existují nějaké uzly prvků.

Přidávání a odebírání dětských prvků

Existují techniky, které můžete použít k přidání a odebrání prvků z DOM. Nejznámější z nich je založen na kombinaci metod createElement() a appendChild().

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

V tomto případě vytvořím pomocí metody createElement() a poté ji přidám do těla . Je to velmi jednoduché a pravděpodobně jste tuto techniku ​​již někdy použili.

Ale místo vkládání konkrétně vytvářený prvek, mohu také použít appendChild() a pouze přesunout existující prvek. Řekněme, že máme následující označení:

• Příklad jedna
• Příklad dva
• Příklad tři
• Příklad čtvrtý
• Příklad pět
• Příklad šest

Příklad textu

Umístění seznamu mohu změnit pomocí následujícího kódu:

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

Finální DOM bude vypadat takto:

Příklad textu

• Příklad jedna
• Příklad dva
• Příklad tři
• Příklad čtvrtý
• Příklad pět
• Příklad šest

Všimněte si, že celý seznam byl odstraněn ze svého místa (nad odstavcem) a poté vložen za něj před uzavírací tělo . Zatímco metoda appendChild() se obvykle používá k přidávání prvků vytvořených pomocí createElement() , lze ji také použít k přesunutí existujících prvků.

Také mohu zcela odstranit podřízený prvek z DOM pomocí removeChild() . Zde je návod, jak odstranit náš seznam z předchozího příkladu:

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

Prvek byl nyní odstraněn. Metoda removeChild() vrací odstraněný prvek, takže jej mohu uložit pro případ, že jej budu později potřebovat.

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

Existuje také metoda ChildNode.remove(), která byla relativně nedávno přidána do specifikace:

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

Tato metoda nevrací vzdálený objekt a nefunguje v IE (pouze Edge). A obě metody odstraňují textové uzly stejným způsobem jako uzly prvků.

Výměna podřízených prvků

Mohu nahradit existující podřízený prvek novým, ať už tento nový prvek existuje nebo zda jsem ho vytvořil od začátku. Zde je označení:

Příklad textu

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

Nový text prvku

Jak vidíte, metoda replaceChild() přijímá dva argumenty: nový prvek a starý prvek, který nahrazuje.

Tuto metodu mohu také použít k přesunutí existujícího prvku. Podívejte se na následující HTML:

Ukázkový text 1

Ukázkový text 2

Ukázkový text 3

Mohu nahradit třetí odstavec prvním odstavcem pomocí následujícího kódu:

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

Nyní vygenerovaný DOM vypadá takto:

Ukázkový text 2

Ukázkový text 1

Výběr konkrétních dětí

Je jich několik různé způsoby výběr konkrétního prvku. Jak bylo uvedeno výše, mohu začít pomocí kolekce dětí nebo vlastnosti childNodes. Ale podívejme se na další možnosti:

Vlastnosti firstElementChild a lastElementChild dělají přesně to, co jejich názvy naznačují, že dělají: vybírají první a poslední podřízený prvek. Vraťme se k našemu značení:

• Příklad jedna
• Příklad dva
• Příklad tři
• Příklad čtvrtý
• Příklad pět
• Příklad šest

Mohu vybrat první a poslední prvek pomocí těchto vlastností:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "Příklad jedna" console.log(myList.lastElementChild.innerHTML); // "Příklad šest"

Mohu také použít vlastnosti previousElementSibling a nextElementSibling, pokud chci vybrat podřízené prvky jiné než první nebo poslední. To se provádí kombinací vlastností firstElementChild a lastElementChild:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Příklad dva" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Příklad 5"

Existují také podobné vlastnosti firstChild , lastChild , previousSibling a nextSibling , ale berou v úvahu všechny typy uzlů, nejen prvky. Obecně platí, že vlastnosti, které berou v úvahu pouze uzly prvků, jsou užitečnější než ty, které vybírají všechny uzly.

Vkládání obsahu do DOM

Už jsem se podíval na způsoby vkládání prvků do DOM. Pojďme k podobné téma a podívejte se na nové možnosti vkládání obsahu.

Za prvé, existuje jednoduchá metoda insertBefore() , podobně jako replaceChild(), vyžaduje dva argumenty a pracuje s novými i stávajícími prvky. Zde je označení:

• Příklad jedna
• Příklad dva
• Příklad tři
• Příklad čtvrtý
• Příklad pět
• Příklad šest

Příklad odstavce

Všimněte si odstavce, který nejprve odstraním a poté jej vložím před seznam, vše jedním šmahem:

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

Ve výsledném HTML se odstavec objeví před seznamem a to je další způsob, jak zabalit prvek.

Příklad odstavce

• Příklad jedna
• Příklad dva
• Příklad tři
• Příklad čtvrtý
• Příklad pět
• Příklad šest

Stejně jako replaceChild() i insertBefore() přebírá dva argumenty: prvek, který má být přidán, a prvek, před který jej chceme vložit.

Tato metoda je jednoduchá. Zkusme nyní výkonnější metodu vkládání: metodu insertAdjacentHTML().