logo

Jak provést změny v DOM

Tento článek byl původně napsán pro DigitalOcean .

V předchozích dvou dílech série Understanding the DOM jsme se naučili, jak získat přístup k prvkům v DOM a Jak procházet DOM. S využitím těchto znalostí může vývojář použít třídy, značky, id a selektory k nalezení libovolného uzlu v DOM a použít rodičovské, podřízené a sourozenecké vlastnosti k nalezení relativních uzlů.

Dalším krokem k pochopení DOM je naučit se přidávat, měnit, nahrazovat a odstraňovat uzly. Aplikace seznamu úkolů je jedním z praktických příkladů programu JavaScript, ve kterém byste museli být schopni vytvářet, upravovat a odstraňovat prvky v DOM.

V tomto článku se naučíme, jak vytvářet nové uzly a vkládat je do DOM, nahrazovat stávající uzly a odstraňovat uzly.

Vytváření nových uzlů

Na statickém webu se prvky přidávají na stránku přímým zápisem HTML do .html soubor. V dynamické webové aplikaci se prvky a text často přidávají pomocí JavaScriptu. createElement() a createTextNode() metody se používají k vytváření nových uzlů v DOM.

Vlastnost/metoda Popis
createElement() Vytvořte nový uzel prvku
createTextNode() Vytvořte nový textový uzel
node.textContent Získejte nebo nastavte textový obsah uzlu prvku
node.innerHTML Získejte nebo nastavte obsah HTML prvku

Otevřete nový základní index.html soubor, se kterým chcete pracovat.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>
</html>

Použijeme createElement() na document objekt k vytvoření nového p prvek.

const paragraph = document.createElement('p')

Vytvořili jsme nový p prvek, který můžeme otestovat v Konzoli .

console.log(paragraph);
Konzole
<p></p>

paragraph výstup proměnné p prvek, který bez textu není příliš užitečný. Abychom do prvku přidali text, nastavíme textContent vlastnost.

paragraph.textContent = "I'm a brand new paragraph."
console.log(paragraph);
Konzole
<p>I'm a brand new paragraph.</p>

Kombinace createElement() a textContent vytvoří úplný uzel prvku.

Alternativní metodou nastavení obsahu prvku je innerHTML vlastnost, která vám umožňuje přidat k prvku HTML i text.

paragraph.innerHTML = "I'm a paragraph with <strong>bold</strong> text."

I když to bude fungovat a jde o běžnou metodu přidávání obsahu do prvku, existuje možné riziko skriptování mezi weby (XSS) spojené s použitím innerHTML metodu, protože k prvku lze přidat inline JavaScript. Proto se doporučuje používat textContent místo toho odstraní značky HTML.

Je také možné vytvořit textový uzel s createTextNode() metoda.

const text = document.createTextNode("I'm a new text node.")
console.log(text);
Konzole
"I'm a new text node."

Pomocí těchto metod jsme vytvořili nové prvky a textové uzly, které však nejsou viditelné na přední straně webu, dokud nejsou vloženy do dokumentu.

Vkládání uzlů do modelu DOM

Abychom viděli nové textové uzly a prvky, které vytvoříme na frontendu, budeme je muset vložit do document . appendChild() a insertBefore() se používají k přidání položek na začátek, střed nebo konec nadřazeného prvku a replaceChild() se používá k nahrazení starého uzlu novým uzlem.

Vlastnost/metoda Popis
node.appendChild() Přidat uzel jako posledního potomka nadřazeného prvku
node.insertBefore() Vložte uzel do nadřazeného prvku před určený sourozenecký uzel
node.replaceChild() Nahradit existující uzel novým uzlem

Vytvořme jednoduchý seznam úkolů pomocí HTML.

<ul>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
</ul>

Když načtete svou stránku do prohlížeče, bude vypadat takto:

Abychom mohli přidat novou položku na konec seznamu úkolů, musíme nejprve vytvořit prvek a přidat k němu text, jak jsme se naučili v "Vytváření nových uzlů".

// To-do list ul element
const todoList = document.querySelector('ul')

// Create new to-do
const newTodo = document.createElement('li')
newTodo.textContent = 'Do homework'

Nyní, když máme kompletní prvek pro náš nový úkol, můžeme jej přidat na konec seznamu pomocí appendChild() .

// Add new todo to the end of the list
todoList.appendChild(newTodo)

Můžete vidět nový li prvek byl připojen na konec ul .

<ul>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

Možná máme úkol s vyšší prioritou a chceme ho přidat na začátek seznamu. Budeme muset vytvořit další prvek, jako createElement() vytváří pouze jeden prvek a nelze jej znovu použít.

// Create new to-do
const anotherTodo = document.createElement('li')
anotherTodo.textContent = 'Pay bills'

Můžeme jej přidat na začátek seznamu pomocí insertBefore() . Tato metoda vyžaduje dva argumenty - první je nový podřízený uzel, který má být přidán, a druhý je sourozenecký uzel, který bude okamžitě následovat nový uzel. Jinými slovy, vkládáte nový uzel před další sourozenecký uzel.

parentNode.insertBefore(newNode, nextSibling)

Pro náš příklad seznamu úkolů přidáme nový anotherTodo prvek před prvním potomkem prvku seznamu, kterým je aktuálně Buy groceries položka seznamu.

// Add new to-do to the beginning of the list
todoList.insertBefore(anotherTodo, todoList.firstElementChild)
<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

Nový uzel byl úspěšně přidán na začátek seznamu. Nyní víme, jak přidat uzel k rodičovskému prvku. Další věc, kterou bychom mohli chtít udělat, je nahradit existující uzel novým uzlem.

Upravíme existující úkol, abychom ukázali, jak nahradit uzel. První krok vytvoření nového prvku zůstává stejný.

const modifiedTodo = document.createElement('li')
modifiedTodo.textContent = 'Feed the dog'

Jako insertBefore() , replaceChild() bere dva argumenty – nový uzel a uzel, který má být nahrazen.

parentNode.replaceChild(newNode, oldNode)

Třetí podřízený prvek seznamu nahradíme upraveným úkolem.

// Replace existing to-do with modified to-do
todoList.replaceChild(modifiedTodo, todoList.children[2])
<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

S kombinací appendChild() , insertBefore() a replaceChild() , můžete vkládat uzly a prvky kamkoli do DOM.

Odebrání uzlů z modelu DOM

Nyní víme, jak vytvářet prvky, přidávat je do DOM a upravovat existující prvky. Posledním krokem je naučit se odstranit existující uzly z DOM. Podřízené uzly lze odebrat nadřazenému pomocí removeChild() a samotný uzel lze odstranit pomocí remove() .

Metoda Popis
node.removeChild() Odebrat podřízený uzel
node.remove() Odebrat uzel

Pomocí výše uvedeného příkladu úkolů budeme chtít položky po jejich dokončení smazat. Pokud jste dokončili svůj domácí úkol, můžete odstranit Do homework položka, která je shodou okolností posledním potomkem seznamu, s removeChild() .

todoList.removeChild(todoList.lastElementChild)
<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
</ul>

Jednodušší metodou by mohlo být odstranění samotného uzlu pomocí remove() přímo na uzlu.

// Remove second element child from todoList
todoList.children[1].remove()
<ul>
  <li>Pay bills</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
</ul>

Mezi removeChild() a remove() , můžete odebrat jakýkoli uzel z DOM. Další metodou, kterou můžete vidět pro odstranění podřízených prvků z DOM, je nastavení innerHTML vlastnost nadřazeného prvku na prázdný řetězec ("" ). Toto není preferovaná metoda, ale možná ji uvidíte.

Závěr

V tomto tutoriálu jsme se naučili používat JavaScript k vytváření nových uzlů a prvků a jejich vkládání do modelu DOM a nahrazování a odstraňování stávajících uzlů a prvků.

V tomto bodě série Porozumění DOM víte, jak přistupovat k jakémukoli prvku v DOM, procházet libovolným uzlem v DOM a upravovat samotný DOM. Nyní si můžete být jisti, že vytváříte základní front-endové webové aplikace pomocí JavaScriptu.