JS DOM Selections i proste funkcje
Poniższe przykłady dotyczą funkcji i operacji DOM, takich jak zaznaczanie i manipulowanie elementami. Rozumienie i wykorzystywanie selekcji oraz manipulacji DOM w JavaScript jest kluczowe, ponieważ umożliwia pełną kontrolę nad interaktywnymi elementami strony internetowej. Oto kilka powodów, dla których warto opanować te techniki w JavaScript:
Dynamika stron – interaktywność i lepsze UX dzięki JavaScript
Manipulowanie DOM w JavaScript pozwala na:
- Dynamiczne zmienianie treści (np. aktualizacja liczby produktów w koszyku za pomocą JavaScript),
- Tworzenie efektów interaktywnych (takich jak animacje czy podświetlanie elementów z użyciem JavaScript),
- Ukrywanie i pokazywanie elementów (np. rozwijane menu na stronie dzięki JavaScript).
- Jest także mechanizmem pozwalającym na dostęp do Tabel i Obiektów.
Opanowanie tych umiejętności w JavaScript sprawia, że strony stają się bardziej responsywne i przyjazne dla użytkownika, co znacząco poprawia doświadczenie (UX). Jeśli potrzebujesz przykładów kodu w JavaScript do manipulacji DOM
JavaScrip, funkcję i operacje na DOM to skrót od Document Object Model Szczególnie chcę powtórzyć zaznaczanie Select All Select Query by ID i wszystkie inne Selekcje
1. Selekcja elementów
JavaScript oferuje kilka sposobów na wybieranie elementów z DOM:
1.1. getElementById (Selekcja po ID)
// Wybieranie elementu po jego ID
const element = document.getElementById('myElement');
console.log(element);
1.2. getElementsByClassName (Selekcja po klasie)
// Wybieranie wszystkich elementów z daną klasą (zwraca kolekcję)
const elements = document.getElementsByClassName('myClass');
console.log(elements);
1.3. getElementsByTagName (Selekcja po tagu)
// Wybieranie wszystkich elementów o danym tagu (np. wszystkie <p>)
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs);
1.4. querySelector (Pierwszy element pasujący do selektora CSS)
// Wybieranie pierwszego elementu, który pasuje do selektora CSS
const firstParagraph = document.querySelector('p');
console.log(firstParagraph);
Można używać bardziej złożonych selektorów
const elementById = document.querySelector('#myElement');
const elementByClass = document.querySelector('.myClass');
console.log(elementById, elementByClass);
1.5. querySelectorAll (Wszystkie elementy pasujące do selektora CSS)
// Wybieranie wszystkich elementów pasujących do selektora CSS
const allParagraphs = document.querySelectorAll('p');
console.log(allParagraphs);
// Selekcja bardziej złożona
const allDivsInContainer = document.querySelectorAll('#container div');
console.log(allDivsInContainer);
2. Manipulacja DOM w JavaScript – Tworzenie Dynamicznych Stron
JavaScript to język, który daje życie stronom internetowym! Dzięki niemu możemy nie tylko wyświetlać statyczne treści, ale także dynamicznie je zmieniać, reagować na interakcje użytkownika i budować nowoczesne aplikacje webowe.
Aby to osiągnąć, musimy zrozumieć DOM (Document Object Model) – czyli sposób, w jaki przeglądarka widzi strukturę HTML strony. DOM zamienia kod HTML w drzewo obiektów, dzięki czemu JavaScript może je modyfikować, usuwać lub dodawać nowe elementy w czasie rzeczywistym.
Przykłady zastosowania manipulacji DOM w JavaScript:
Aktualizacja treści w czasie rzeczywistym (np. liczba lajków na przycisku)
Tworzenie efektów wizualnych i animacji
Obsługa dynamicznych formularzy i interakcji użytkownika
Tworzenie gier i aplikacji webowych
Teraz zobaczmy, jak możemy manipulować DOM w JavaScript i jakie ciekawe rzeczy możemy zrobić!
Co to jest DOM i jak JavaScript go wykorzystuje?
Wyobraź sobie, że HTML to szkielety budynku, a CSS to jego kolor i styl. JavaScript to robot, który może zmieniać wygląd budynku, dodawać okna, drzwi, a nawet przesuwać ściany.
Każdy element na stronie – nagłówek, paragraf, obrazek czy przycisk – jest w DOM reprezentowany jako obiekt, który możemy modyfikować przy pomocy JavaScriptu.
DOM wygląda jak drzewo, gdzie głównym elementem jest <html>, a jego gałęziami są <head> i <body>. Każdy kolejny element, jak <p>, <h1>, <div>, to kolejne węzły drzewa.
🎯 Przykład wizualizacji drzewa DOM:
php-templateKopiujEdytuj<html>
├── <head>
│ ├── <title> Moja Strona </title>
├── <body>
│ ├── <h1> Nagłówek </h1>
│ ├── <p> Jakiś tekst </p>
│ ├── <button> Kliknij mnie </button>
Dzięki JavaScript możemy manipulować tym drzewem – dodawać nowe elementy, zmieniać treści, a nawet usuwać elementy!
Zmiana treści i atrybutów elementów
Najprostsza manipulacja DOM to zmiana tekstu lub atrybutów elementów.
Przykład – zmiana nagłówka i linku:
document.getElementById("myTitle").textContent = "Nowy, dynamiczny nagłówek!";
document.getElementById("myLink").href = "https://developer.mozilla.org";
document.getElementById("myImage").src = "new-image.jpg";
HTML do testowania:
<h2 id="myTitle">Stary tytuł</h2>
<a id="myLink" href="#">Kliknij tutaj</a>
<img id="myImage" src="old-image.jpg" alt="Obrazek">
JavaScript sprawia, że strona zmienia się bez potrzeby przeładowania!
Tworzenie nowych elementów w DOM
Chcesz dodać nowy paragraf lub przycisk w locie? JavaScript to umożliwia!
Przykład – dynamiczne dodawanie elementu:
let newParagraph = document.createElement("p");
newParagraph.textContent = "To jest dynamicznie dodany paragraf!";
document.body.appendChild(newParagraph);
Dzięki temu możemy budować dynamiczne listy, generować karty produktów czy dodawać nowe wiadomości w czacie użytkownika.
Zmiana stylów i klas CSS
Możemy nie tylko zmieniać treści, ale też wygląd elementów poprzez style CSS.
Przykład – zmiana koloru i rozmiaru tekstu:
let newParagraph = document.createElement("p");
newParagraph.textContent = "To jest dynamicznie dodany paragraf!";
document.body.appendChild(newParagraph);
Lepszy sposób – dodawanie klas CSS:
document.getElementById("box").classList.add("highlight");
CSS:
cssKopiujEdytuj.highlight {
background-color: yellow;
border: 2px solid red;
}
Zamiast manipulować stylami w JavaScript, lepiej dodawać/usunąć klasy – to bardziej wydajne i czytelne!
Obsługa zdarzeń użytkownika – interaktywne przyciski!
JavaScript pozwala reagować na działania użytkownika, np. kliknięcia myszką, najechanie kursorem czy naciśnięcie klawisza.
Przykład – reakcja na kliknięcie przycisku:
document.getElementById("myButton").addEventListener("click", function() {
alert("Kliknięto przycisk!");
});
HTML do testowania:
<button id="myButton">Kliknij mnie!</button>
Możemy dzięki temu tworzyć menu, interaktywne formularze czy nawet gry w JavaScript!
Usuwanie elementów z DOM
Czasem chcemy ukryć lub całkowicie usunąć element ze strony.
Przykład – usunięcie elementu:
document.getElementById("myParagraph").remove();
HTML do testowania:
<p id="myParagraph">To zostanie usunięte!</p>
Można to wykorzystać np. do usuwania zadań na liście „to-do” lub zamykania okienek pop-up.
Podsumowanie – Co dzięki temu zyskujemy?
Tworzymy dynamiczne i interaktywne strony internetowe
Reagujemy na akcje użytkownika
Zmieniamy treść i wygląd strony bez przeładowania
Tworzymy nowoczesne aplikacje webowe
JavaScript i manipulacja DOM to klucz do nowoczesnego front-endu!
Jeśli chcesz budować interaktywne strony i aplikacje, to musisz opanować manipulację DOM – a teraz masz solidne podstawy, by to robić!