Table of Contents

DOM manipuláció JavaScript segítségével

A Document Object Model (DOM) a weboldalak szerkezetét írja le egy hierarchikus fa formájában, amelyen keresztül a JavaScript hozzáférhet és módosíthatja az oldal tartalmát és szerkezetét. A DOM manipuláció az egyik legfontosabb eszköz a dinamikus weboldalak fejlesztésében, mivel lehetővé teszi az elemek hozzáadását, eltávolítását, módosítását, valamint az eseménykezelést.

Document Object Model

A DOM (Document Object Model) egy platformfüggetlen, objektumalapú reprezentációja egy HTML- vagy XML-dokumentumnak. A DOM egy fa struktúrában írja le az oldal elemeit, ahol minden HTML-címke egy csomópontként (node) jelenik meg, és hierarchikus kapcsolatban áll a többi elemmel. A DOM-on keresztül JavaScript segítségével elérhetjük és módosíthatjuk az oldal tartalmát és szerkezetét.

A DOM egy objektummodell, amelyben minden HTML-elem egy objektumként létezik. Például egy egyszerű HTML-oldal:

<sxh html> <html> 

<head>
  <title>My title</title>
</head>
<body>
  <h1>A heading</h1>
  <a href="#">Link text</a>
</body>

</html> </sxh>

A DOM ezt az oldalt a következő fastruktúraként kezeli:

A document objektum a teljes HTML-dokumentumot képviseli, és az egyik legfontosabb kiindulópont a DOM manipuláció során. Segítségével elérhetjük az oldal elemeit, új elemeket hozhatunk létre, módosíthatjuk a tartalmat, és kezelhetjük az eseményeket. A DOM többféle csomópontot tartalmaz, de a legfontosabbak a következők:

A DOM lehetővé teszi, hogy JavaScript segítségével:

DOM manipulációs technikák

A DOM elérésére a globális document objektumon keresztül van lehetőség, melynek dokumentációja itt található meg: https://developer.mozilla.org/en-US/docs/Web/API/Document

A következő bekezdések a teljesség igénye nélkül mutatnak be néhány gyakran használt metódust.

Elemek kiválasztása

A DOM-ban található csomópontok elérését a következő függvények biztosítják:

<sxh html> <!DOCTYPE html> <html lang=“hu”> <head> 

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM - Elem kiválasztás</title>

</head> <body> 

  <h1 id="title">Főcím</h1>
  <p class="text">Ez egy bekezdés.</p>
  <p class="text">Ez egy másik bekezdés.</p>
  <div>
      <span>Span 1</span>
      <span>Span 2</span>
  </div>
  <script>
      // Egy adott ID-val rendelkező elem kiválasztása
      let titleElement = document.getElementById("title");
      console.log(titleElement.textContent); // Főcím
      // Osztály alapján több elem kiválasztása
      let textElements = document.getElementsByClassName("text");
      console.log(textElements[0].textContent); // Ez egy bekezdés.
      // Összes adott típusú elem kiválasztása
      let spans = document.getElementsByTagName("span");
      console.log(spans.length); // 2
      // Az első találat kiválasztása CSS-szelektorral
      let firstParagraph = document.querySelector(".text");
      console.log(firstParagraph.textContent); // Ez egy bekezdés.
      // Az összes találat kiválasztása CSS-szelektorral
      let allParagraphs = document.querySelectorAll(".text");
      allParagraphs.forEach(p => console.log(p.textContent));
      // Ez egy bekezdés.
      // Ez egy másik bekezdés.
  </script>

</body> </html> </sxh>

Tartalom módosítása

A DOM-ban található csomópontok tartalmát a következő tulajdonságok segítségével lehet elérni, illetve módosítani:

<sxh html> <!DOCTYPE html> <html lang=“hu”> <head> 

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM tartalom módosítása</title>
  <style>
      .hidden {
          display: none;
      }
  </style>

</head> <body> 

  <h1 id="title">Eredeti <span class="hidden">cím</span></h1>
  <p id="paragraph">Ez egy <strong>bekezdés</strong> HTML formázással.</p>
  <p id="hiddenText" class="hidden">Ez egy rejtett szöveg.</p>
  <script>
      // innerText: figyelembe veszi a szöveg egyes részeinek láthatóságát
      let title = document.getElementById("title");
      console.log(title.innerText); // Eredeti
      title.innerText = "Új cím";
      
      // textContent: nem veszi figyelembe a CSS láthatóságot
      let hiddenText = document.getElementById("hiddenText");
      console.log(hiddenText.textContent); // Ez egy rejtett szöveg
      // innerHTML: a HTML tartalmat is kezeli
      let paragraph = document.getElementById("paragraph");
      console.log(paragraph.innerHTML); // Ez egy <strong>bekezdés</strong> HTML formázással.
      paragraph.innerHTML = "Ez egy <strong>új bekezdés</strong> módosított HTML tartalommal.";
  </script>

</body> </html> </sxh>

Eseménykezelés

A DOM-ban található csomópontok eseményeinek (pl. kattintás, dupla kattintás, szövegmező fókuszba kerülése, drag&drop műveletek stb.) kezeléséhez a következő függvényt használhatjuk:

<sxh html> <!DOCTYPE html> <html lang=“hu”> <head> 

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Eseménykezelés példa</title>

</head> <body> 

  <input type="text" id="name-input" placeholder="Írd be a neved ...">
  <button id="submit-btn">Küldés</button>
  <script>
      // Szövegmező fókusz eseménykezelője
      document.getElementById("name-input").addEventListener("focus", function() {
          this.style.borderColor = "blue";
      });
      // Gombra kattintás eseménykezelője
      document.getElementById("submit-btn").addEventListener("click", function() {
          let inputValue = document.getElementById("name-input").value;
          alert("Hello, " + inputValue);
      });
  </script>

</body> </html> </sxh>

Attribútumok és stílus módosítása

A DOM csomópontjainak attribútumait és stílusát a következő függvényekkel lehet elérni és módosítani:

<sxh html> <!DOCTYPE html> <html lang=“hu”> <head> 

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Attribútumok és stílus módosítása</title>
  <style>
      .highlight {
          background-color: yellow;
          font-weight: bold;
      }
  </style>

</head> <body> 

  <button id="my-button">Szövegkiemelés</button>
  <p id="my-paragraph" class="text">Ez egy bekezdés.</p>
  <script>
      let button = document.getElementById("my-button");
      let paragraph = document.getElementById("my-paragraph");
      // setAttribute és getAttribute használata
      button.setAttribute("title", "Ez a gomb kiemeli a bekezdést vagy eltávolítja a kiemelést."); // Tooltip szöveg beállítása
      console.log(button.getAttribute("title")); // Ez a gomb kiemeli a bekezdést vagy eltávolítja a kiemelést.
      // classList használata
      
      paragraph.classList.add("highlight"); // Kiemeli a bekezdést a highlight osztály hozzáadásával
      setTimeout(() => {
          paragraph.classList.remove("highlight"); // 2 másodperc elteltével eltávolítja a kiemelést
      }, 2000);
      button.addEventListener("click", () => {
          paragraph.classList.toggle("highlight"); // Ha rajta van a highlight osztály, eltávolítja; ha nincs, hozzáadja
      });
      // style attribútum használata
      paragraph.style.color = "blue"; // Szöveg színének megváltoztatása
      paragraph.style.fontSize = "20px"; // Betűméret növelése
  </script>

</body> </html> </sxh>

Új elemek létrehozása és hozzáadása

A következő metódusokkal új csomópontokat hozhatunk létre, és adhatunk hozzá a DOM-hoz:

<sxh html> <!DOCTYPE html> <html lang=“hu”> <head> 

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Új elemek létrehozása és hozzáadása</title>

</head> <body> 

  <div id="container">
      <p>Ez az eredeti bekezdés.</p>
  </div>
  <button id="add-btn">Új elem hozzáadása</button>
  <script>
      let container = document.getElementById("container");
      let button = document.getElementById("add-btn");
      button.addEventListener("click", () => {
          // createElement használata
          let newParagraph = document.createElement("p");
          newParagraph.textContent = "Ez egy új bekezdés.";
          // appendChild használata (hozzáadja a végére)
          container.appendChild(newParagraph);
          // prepend használata (hozzáadja az elejére)
          let firstParagraph = document.createElement("p");
          firstParagraph.textContent = "Ez egy bekezdés az elején.";
          container.prepend(firstParagraph);
          // insertBefore használata (új elem beszúrása egy másik elé)
          let middleParagraph = document.createElement("p");
          middleParagraph.textContent = "Ez egy köztes bekezdés.";
          let referenceNode = container.children[1]; // Az első bekezdés után helyezzük el
          container.insertBefore(middleParagraph, referenceNode);
      });
  </script>

</body> </html> </sxh>

Feladat

A feladat egy egyszerű, dinamikus teendő lista készítése.

Az elkészült megoldást töltsd fel a GitHub repository-dba!