{"id":1234,"date":"2025-04-09T19:51:43","date_gmt":"2025-04-09T17:51:43","guid":{"rendered":"https:\/\/piotrgabriel.pl\/wiki\/?p=1234"},"modified":"2025-09-07T19:53:26","modified_gmt":"2025-09-07T17:53:26","slug":"javascript-cz-7-podstawy-pracy-z-dom-w-javascript","status":"publish","type":"post","link":"https:\/\/piotrgabriel.pl\/wiki\/javascript-cz-7-podstawy-pracy-z-dom-w-javascript\/","title":{"rendered":"Javascript cz.7 – Podstawy pracy z DOM w JavaScript"},"content":{"rendered":"

Model DOM (Document Object Model) to spos\u00f3b, w jaki JavaScript \u201ewidzi\u201d stron\u0119 internetow\u0105. Dzi\u0119ki niemu mo\u017cemy wyszukiwa\u0107 elementy, zmienia\u0107 ich zawarto\u015b\u0107, a tak\u017ce dodawa\u0107 i usuwa\u0107 nowe elementy.<\/p>\n

Zobaczmy najwa\u017cniejsze metody i operacje, kt\u00f3re powinien zna\u0107 ka\u017cdy pocz\u0105tkuj\u0105cy programista.<\/p>\n

1. Wyszukiwanie element\u00f3w<\/h2>\n

Aby co\u015b zmieni\u0107 na stronie, najpierw musimy to znale\u017a\u0107.<\/p>\n

<p id=\"tekst\">To jest przyk\u0142adowy tekst<\/p><\/code><\/p>\n

Wyszukiwanie po id<\/code><\/p>\n

let element = document.getElementById(\"tekst\");
\nconsole.log(element.innerHTML); \/\/ wy\u015bwietli: To jest przyk\u0142adowy tekst<\/code><\/p>\n

Wyszukiwanie po nazwie taga<\/p>\n

let paragrafy = document.getElementsByTagName(\"p\");<\/code>
\nconsole.log(paragrafy[0].innerHTML); \/\/ pierwszy <p> na stronie<\/code><\/p>\n

Wyszukiwanie po klasie<\/p>\n

<p class=\"opis\">Pierwszy opis<\/p><\/code>
\n<p class=\"opis\">Drugi opis<\/p><\/code><\/p>\n

i kod JavaScript<\/p>\n

let opisy = document.getElementsByClassName(\"opis\");<\/code>
\nconsole.log(opisy[1].innerHTML); \/\/ wy\u015bwietli: Drugi opis<\/code><\/p>\n

Wyja\u015bnijmy tutaj jeszcze, dlaczego console.log dla opisy[1] wy\u015bwietli 2 element. Ot\u00f3\u017c wszystkie klasy „opis” w zapisie tablocowym [nawias kwadratowy] w kt\u00f3rym umieszczony jest indeks jeden, to tak na prawd\u0119 element nr 2, gdy\u017c w tablicach, indeksy liczymy od ZERA.<\/p>\n

2. Zmiana element\u00f3w w DOM<\/h2>\n

Kiedy znajdziemy element na stronie (np. akapit, link, obrazek), mo\u017cemy go zmodyfikowa\u0107<\/strong> – czyli zmieni\u0107 jego tre\u015b\u0107<\/strong>, atrybuty<\/strong> (np. link, \u017ar\u00f3d\u0142o obrazka), albo styl<\/strong> (np. kolor, rozmiar czcionki).<\/p>\n

Pomy\u015bl o tym tak:
– DOM to drzewo<\/strong>.
– Ka\u017cdy element HTML (np. <p><\/code>, <a><\/code>, <img><\/code>) to ga\u0142\u0105\u017a tego drzewa<\/strong>.
– JavaScript pozwala nam \u201epodmieni\u0107 li\u015bcie\u201d \u2013 czyli zawarto\u015b\u0107, wygl\u0105d i ustawienia tych element\u00f3w.<\/p>\n

2.1 Zmiana tre\u015bci elementu (innerHTML<\/code>)<\/h3>\n

innerHTML<\/code> to wszystko, co znajduje si\u0119 wewn\u0105trz znacznika HTML<\/strong>.<\/p>\n

<p id=\"tekst\">To jest stara tre\u015b\u0107<\/p><\/code><\/p>\n

oraz kod JavaScript, podmieniaj\u0105cy t\u0119 tre\u015b\u0107<\/p>\n

let element = document.getElementById(\"tekst\");<\/code>
\nelement.innerHTML = \"To jest nowa tre\u015b\u0107!\";<\/code><\/p>\n

2.2 Zmiana atrybut\u00f3w elementu (setAttribute<\/code> i attribute = \"warto\u015b\u0107\"<\/code>)<\/h3>\n

Elementy HTML maj\u0105 atrybuty<\/strong>, np.:<\/p>\n

<a href=\"...\"><\/code> \u2013 link prowadzi gdzie\u015b indziej,<\/p>\n

<img src=\"...\"><\/code> \u2013 obrazek ma podane \u017ar\u00f3d\u0142o,<\/p>\n

<input type=\"text\"><\/code> \u2013 pole formularza ma typ \u201etekst\u201d.<\/p>\n

Mo\u017cemy je zmienia\u0107 w JavaScripcie.<\/p>\n

Przyk\u0142ad 1 – link<\/h4>\n

<a id=\"link\" href=\"https:\/\/google.com\">Kliknij mnie<\/a><\/code><\/p>\n

i kod JavaScript, kt\u00f3ry podmieni link<\/p>\n

let link = document.getElementById(\"link\");<\/code>
\nlink.setAttribute(\"href\", \"https:\/\/piotrgabriel.pl\/wiki\");<\/code><\/p>\n

Teraz klikni\u0119cie linku przeniesie nie na Google, ale na ten blog.<\/p>\n

Przyk\u0142ad 2 – obrazek<\/h4>\n

<img id=\"obrazek\" src=\"kot.jpg\" alt=\"Kot\"><\/code><\/p>\n

oraz kod JS<\/p>\n

let img = document.getElementById(\"obrazek\");<\/code>
\nimg.setAttribute(\"src\", \"pies.jpg\");<\/code><\/p>\n

Zamiast kota wy\u015bwietli si\u0119 pies.<\/p>\n

2.3 Zmiana styl\u00f3w CSS (style.property<\/code>)<\/h3>\n

Mo\u017cemy te\u017c zmienia\u0107 wygl\u0105d element\u00f3w – tak, jakby\u015bmy edytowali CSS, tylko dynamicznie.<\/p>\n

<p id=\"tekst\">Zmieniam kolor!<\/p><\/code><\/p>\n

no i JS<\/p>\n

let element = document.getElementById(\"tekst\");<\/code>
\nelement.style.color = \"red\"; \/\/ zmiana koloru<\/code>
\nelement.style.fontSize = \"24px\"; \/\/ zmiana rozmiaru czcionki<\/code>
\nelement.style.fontWeight = \"bold\"; \/\/ pogrubienie<\/code><\/p>\n

Efekt: tekst stanie si\u0119 du\u017cy, czerwony i pogrubiony<\/strong>.<\/p>\n

2.4 Podsumowanie zmian<\/h3>\n

W skr\u00f3cie:<\/p>\n

    \n
  • innerHTML<\/code> \u2013 zmienia zawarto\u015b\u0107 elementu (tekst\/HTML w \u015brodku).<\/li>\n
  • \n

    setAttribute<\/code> albo element.atrybut = ...<\/code> \u2013 zmienia ustawienia elementu (np. link, src obrazka).<\/p>\n<\/li>\n

  • \n

    style.property<\/code> \u2013 zmienia wygl\u0105d elementu (kolor, wielko\u015b\u0107, marginesy itd.).<\/p>\n<\/li>\n<\/ul>\n

    2.5 Dodatkowe elementy<\/h3>\n

    document.getElementById(\"lista\")<\/code><\/strong><\/h3>\n

    Co robi:<\/strong> Zwraca jeden<\/strong> element o podanym id<\/code> (albo null<\/code>, je\u015bli nie istnieje).
    Zwraca:<\/strong> Referencj\u0119 do elementu (np. HTMLUListElement<\/code>) lub null<\/code>.<\/p>\n

    const lista = document.getElementById(\"lista\");<\/code>
    \nif (lista) {<\/code>
    \n\/\/ mo\u017cemy na niej dzia\u0142a\u0107<\/code>
    \n}<\/code><\/p>\n

    Pu\u0142apka:<\/strong> id<\/code> musi by\u0107 unikalne<\/strong> na stronie. Gdy element nie istnieje, dostaniesz null<\/code> \u2014 sprawdzaj to przed u\u017cyciem.<\/p>\n

    document.createElement(\"li\")<\/code><\/strong><\/h3>\n

    Co robi:<\/strong> Tworzy nowy element<\/strong> w pami\u0119ci (jeszcze nie na stronie).
    Zwraca:<\/strong> Pusty element, kt\u00f3ry dopiero dodasz do DOM.<\/p>\n

    const li = document.createElement(\"li\");<\/code>
    \nli.textContent = \"Mleko\"; \/\/ uzupe\u0142nij tre\u015b\u0107<\/code>
    \n\/\/ na razie nie wida\u0107 na stronie, dop\u00f3ki nie wstawisz do DOM<\/code><\/p>\n

    Pu\u0142apka:<\/strong> Samo createElement<\/code> niczego nie poka\u017ce – musisz jeszcze u\u017cy\u0107 np. appendChild<\/code>.<\/p>\n

    parent.appendChild(node)<\/code><\/strong><\/h3>\n

    Co robi:<\/strong> Wstawia node<\/code> jako ostatnie dziecko<\/strong> elementu-rodzica.
    Dodatkowo:<\/strong> Je\u015bli node<\/code> ju\u017c gdzie\u015b jest w DOM – zostanie przeniesiony<\/strong>, nie skopiowany.<\/p>\n

    const lista = document.getElementById(\"lista\");<\/code>
    \nconst li = document.createElement(\"li\");<\/code>
    \nli.textContent = \"Chleb\";<\/code>
    \nlista.appendChild(li); \/\/ teraz element jest widoczny na stronie<\/code><\/p>\n

    Pu\u0142apki:<\/strong><\/p>\n

      \n
    • Jeden w\u0119ze\u0142 mo\u017ce mie\u0107 tylko jednego rodzica<\/strong> \u2014 appendChild<\/code> go przenosi.<\/li>\n
    • Chcesz kopi\u0119? U\u017cyj node.cloneNode(true)<\/code> i dopiero potem appendChild<\/code>.<\/li>\n<\/ul>\n

      parent.removeChild(node)<\/strong><\/code><\/h3>\n

      Co robi:<\/strong> Usuwa konkretne dziecko<\/strong> z rodzica.
      Zwraca:<\/strong> Usuni\u0119ty w\u0119ze\u0142 (gdyby\u015b chcia\u0142 go np. wstawi\u0107 gdzie indziej).<\/p>\n

      const lista = document.getElementById(\"lista\");<\/code>
      \nconst ostatni = lista?.lastElementChild; \/\/ lepiej ni\u017c lastChild (patrz ni\u017cej)<\/code>
      \nif (ostatni) lista.removeChild(ostatni);<\/code><\/p>\n

      Pu\u0142apki:<\/strong><\/p>\n

        \n
      • removeChild<\/code> wymaga referencji do dziecka<\/strong>.<\/li>\n
      • U\u017cywaj lastElementChild<\/code> zamiast lastChild<\/code>, bo lastChild<\/code> mo\u017ce by\u0107 w\u0119z\u0142em tekstowym<\/strong> (np. spacja\/enter).<\/li>\n
      • Alternatywa (kr\u00f3cej): ostatni.remove()<\/code> \u2014 usuwa si\u0119 sam bez odwo\u0142ania do rodzica.<\/li>\n<\/ul>\n

        parent.getElementsByTagName(\"li\")<\/code><\/h3>\n

        Co robi:<\/strong> Zwraca \u201e\u017cyw\u0105\u201d kolekcj\u0119<\/strong> (HTMLCollection<\/code>) wszystkich element\u00f3w o danym tagu wewn\u0105trz<\/strong> parent<\/code>.
        \u201e\u017bywa\u201d<\/strong> = automatycznie si\u0119 aktualizuje, gdy dodajesz\/usuwasz elementy.<\/p>\n

        const lista = document.getElementById(\"lista\");<\/code>
        \nconst items = lista.getElementsByTagName(\"li\"); \/\/ HTMLCollection (live)<\/code><\/p>\n

        \/\/ stylowanie wszystkich pozycji:<\/code>
        \nfor (const el of items) {<\/code>
        \nel.style.color = \"blue\";<\/code>
        \nel.style.fontWeight = \"bold\";<\/code>
        \n}<\/code><\/p>\n

        Pu\u0142apki:<\/strong><\/p>\n

          \n
        • To nie jest<\/strong> tablica. Je\u015bli chcesz metody tablicowe, zr\u00f3b:
          Array.from(items).forEach(...)<\/code>.<\/li>\n
        • Przy usuwaniu<\/strong> w p\u0119tli lepiej iterowa\u0107 \u201eod ko\u0144ca\u201d albo najpierw skopiowa\u0107 do tablicy, bo \u201e\u017cywa\u201d kolekcja zmienia si\u0119 w trakcie iteracji.<\/li>\n<\/ul>\n

          const arr = Array.from(items);<\/code>
          \nfor (let i = arr.length - 1; i >= 0; i--) {<\/code>
          \narr[i].remove();<\/code>
          \n}<\/code><\/p>\n

          Gdy potrzebujesz selektor\u00f3w CSS i statycznej<\/strong> listy, wygodniejsze bywa querySelectorAll(\"li\")<\/code> (zwraca NodeList<\/code>, nie \u201e\u017cywe\u201d).<\/p>\n

           <\/p>\n

          \u0106wiczenie 1: Zmieniamy elementy na stronie za pomoc\u0105 JavaScript<\/h2>\n

          Teraz warto to prze\u0107wiczy\u0107. Zadaniem jest stworzenie prostej strony HTML, na kt\u00f3rej b\u0119dziesz zmienia\u0107 tre\u015b\u0107, wygl\u0105d i atrybuty element\u00f3w.<\/p>\n

          Zadanie 1. Stw\u00f3rz stron\u0119 HTML z poni\u017cszymi elementami:<\/strong><\/p>\n

            \n
          • akapit <p><\/code> z tekstem np. \u201eTo jest stary tekst\u201d,<\/li>\n
          • przycisk <button><\/code> z napisem \u201eZmie\u0144 tekst\u201d,<\/li>\n
          • przycisk <button><\/code> z napisem \u201eZmie\u0144 kolor\u201d,<\/li>\n
          • obrazek <img><\/code> (mo\u017ce by\u0107 np. kot.jpg<\/code>).<\/li>\n<\/ul>\n

            Zadanie 2. Napisz skrypt JavaScript, kt\u00f3ry:<\/strong><\/p>\n

              \n
            • po klikni\u0119ciu przycisku \u201eZmie\u0144 tekst\u201d<\/strong> zmieni tre\u015b\u0107 akapitu na \u201eTo jest nowy tekst!\u201d<\/li>\n
            • po klikni\u0119ciu przycisku \u201eZmie\u0144 kolor\u201d<\/strong> zmieni kolor akapitu na niebieski,<\/li>\n
            • dodatkowo podmieni obrazek z kot.jpg<\/code> na pies.jpg<\/code>.<\/li>\n<\/ul>\n

              Rozwi\u0105zanie<\/strong><\/p>\n

              <!DOCTYPE html><\/code>
              \n<html lang=\"pl\"><\/code>
              \n<head><\/code>
              \n<meta charset=\"UTF-8\"><\/code>
              \n<title>\u0106wiczenie DOM<\/title><\/code>
              \n<\/head><\/code>
              \n<body><\/code>
              \n<!-- Akapit --><\/code>
              \n<p id=\"tekst\">To jest stary tekst<\/p><\/code><\/p>\n

              <!-- Przyciski --><\/code>
              \n<button onclick=\"zmienTekst()\">Zmie\u0144 tekst<\/button><\/code>
              \n<button onclick=\"zmienKolor()\">Zmie\u0144 kolor<\/button><\/code><\/p>\n

              <!-- Obrazek --><\/code>
              \n<img id=\"obrazek\" src=\"kot.jpg\" alt=\"Kot\" width=\"200\"><\/code><\/p>\n

              <script><\/code>
              \n\/\/ Funkcja zmieniaj\u0105ca tre\u015b\u0107 akapitu<\/code>
              \nfunction zmienTekst() {<\/code>
              \nlet element = document.getElementById(\"tekst\");<\/code>
              \nelement.innerHTML = \"To jest nowy tekst!\";<\/code>
              \n}<\/code><\/p>\n

              \/\/ Funkcja zmieniaj\u0105ca kolor akapitu<\/code>
              \nfunction zmienKolor() {<\/code>
              \nlet element = document.getElementById(\"tekst\");<\/code>
              \nelement.style.color = \"blue\";<\/code>
              \n}<\/code><\/p>\n

              \/\/ Podmiana obrazka<\/code>
              \nlet obrazek = document.getElementById(\"obrazek\");<\/code>
              \nobrazek.setAttribute(\"src\", \"pies.jpg\");<\/code>
              \n<\/script><\/code>
              \n<\/body><\/code>
              \n<\/html><\/code><\/p>\n

              Kr\u00f3tki komentarz, przeanalizujmy co si\u0119 tutaj dzieje?<\/p>\n

                \n
              • \n

                document.getElementById(\"tekst\")<\/code> – > wyszukuje akapit po id<\/strong>.<\/p>\n<\/li>\n

              • \n

                innerHTML = \"...\"<\/code> – > zmienia jego tre\u015b\u0107.<\/p>\n<\/li>\n

              • \n

                style.color = \"blue\"<\/code> – > zmienia kolor tekstu na niebieski.<\/p>\n<\/li>\n

              • \n

                setAttribute(\"src\", \"pies.jpg\")<\/code> – > podmienia \u017ar\u00f3d\u0142o obrazka.<\/p>\n<\/li>\n<\/ul>\n

                \u0106wiczenie 2: Operacje na elementach dokumentu<\/h2>\n

                W tym \u0107wiczeniu nauczysz si\u0119 dodawa\u0107, usuwa\u0107 i podmienia\u0107 elementy<\/strong> na stronie przy u\u017cyciu JavaScript.<\/p>\n

                Zadanie 1. <\/strong>Utw\u00f3rz prost\u0105 stron\u0119 HTML z nag\u0142\u00f3wkiem <h2><\/code>, pustym kontenerem <div id=\"kontener\"><\/div><\/code> i trzema przyciskami:<\/p>\n

                  \n
                • \u201eDodaj akapit\u201d<\/li>\n
                • \u201eUsu\u0144 akapit\u201d<\/li>\n
                • \u201ePodmie\u0144 akapit\u201d<\/li>\n
                • <\/li>\n<\/ul>\n

                  Zadanie 2. <\/strong>Napisz skrypt, kt\u00f3ry:<\/p>\n

                    \n
                  • po klikni\u0119ciu \u201eDodaj akapit\u201d utworzy nowy element <p><\/code> z tekstem \u201eJestem nowym akapitem\u201d i doda go do kontenera,<\/li>\n
                  • po klikni\u0119ciu \u201eUsu\u0144 akapit\u201d usunie ostatni dodany akapit,<\/li>\n
                  • po klikni\u0119ciu \u201ePodmie\u0144 akapit\u201d zamieni istniej\u0105cy akapit na inny z tre\u015bci\u0105 \u201eZosta\u0142em podmieniony\u201d.<\/li>\n<\/ul>\n

                    Rozwi\u0105zanie<\/strong><\/p>\n

                    <!DOCTYPE html><\/code>
                    \n<html lang=\"pl\"><\/code>
                    \n<head><\/code>
                    \n<meta charset=\"UTF-8\"><\/code>
                    \n<title>\u0106wiczenie DOM 2<\/title><\/code>
                    \n<\/head><\/code>
                    \n<body><\/code>
                    \n<h2>\u0106wiczenie 2: Operacje na elementach<\/h2><\/code><\/p>\n

                    <!-- Kontener --><\/code>
                    \n<div id=\"kontener\"><\/div><\/code><\/p>\n

                    <!-- Przyciski --><\/code>
                    \n<button onclick=\"dodajAkapit()\">Dodaj akapit<\/button><\/code>
                    \n<button onclick=\"usunAkapit()\">Usu\u0144 akapit<\/button><\/code>
                    \n<button onclick=\"podmienAkapit()\">Podmie\u0144 akapit<\/button><\/code><\/p>\n

                    <script><\/code>
                    \nlet kontener = document.getElementById(\"kontener\");<\/code><\/p>\n

                    \/\/ Dodawanie nowego akapitu<\/code>
                    \nfunction dodajAkapit() {<\/code>
                    \nlet nowy = document.createElement(\"p\");<\/code>
                    \nnowy.innerHTML = \"Jestem nowym akapitem\";<\/code>
                    \nkontener.appendChild(nowy);<\/code>
                    \n}<\/code><\/p>\n

                    \/\/ Usuwanie ostatniego akapitu<\/code>
                    \nfunction usunAkapit() {<\/code>
                    \nif (kontener.lastChild) {<\/code>
                    \nkontener.removeChild(kontener.lastChild);<\/code>
                    \n}<\/code>
                    \n}<\/code><\/p>\n

                    \/\/ Podmiana pierwszego akapitu<\/code>
                    \nfunction podmienAkapit() {<\/code>
                    \nif (kontener.firstChild) {<\/code>
                    \nlet nowy = document.createElement(\"p\");<\/code>
                    \nnowy.innerHTML = \"Zosta\u0142em podmieniony\";<\/code>
                    \nkontener.replaceChild(nowy, kontener.firstChild);<\/code>
                    \n}<\/code>
                    \n}<\/code>
                    \n<\/script><\/code>
                    \n<\/body><\/code>
                    \n<\/html><\/code><\/p>\n

                    Wyja\u015bnienie<\/strong><\/p>\n

                      \n
                    • \n

                      createElement(\"p\")<\/code> -> tworzy nowy element akapitu.<\/p>\n<\/li>\n

                    • \n

                      appendChild(nowy)<\/code> -> dodaje nowy akapit do kontenera.<\/p>\n<\/li>\n

                    • \n

                      removeChild(...)<\/code> -> usuwa wskazany element z drzewa DOM.<\/p>\n<\/li>\n

                    • \n

                      replaceChild(nowy, stary)<\/code> -> podmienia stary element na nowy.<\/p>\n<\/li>\n<\/ul>\n

                      \u0106wiczenie 3: Interaktywna lista zakup\u00f3w<\/h2>\n

                      W tym \u0107wiczeniu stworzymy prost\u0105 list\u0119 zakup\u00f3w, do kt\u00f3rej mo\u017cna dodawa\u0107 nowe produkty, usuwa\u0107 je i zmienia\u0107 ich wygl\u0105d.<\/p>\n

                      Zadanie 1.<\/strong> Utw\u00f3rz stron\u0119 HTML z:<\/p>\n

                        \n
                      • nag\u0142\u00f3wkiem <h2>Moja lista zakup\u00f3w<\/h2><\/code>,<\/li>\n
                      • pust\u0105 list\u0105 <ul id=\"lista\"><\/ul><\/code>,<\/li>\n
                      • polem tekstowym <input><\/code> do wpisania produktu,<\/li>\n
                      • trzema przyciskami: \u201eDodaj produkt\u201d, \u201eUsu\u0144 ostatni\u201d, \u201ePokoloruj list\u0119\u201d.<\/li>\n<\/ul>\n

                        Zadanie 2.<\/strong> Napisz skrypt, kt\u00f3ry:<\/p>\n

                          \n
                        • doda nowy produkt wpisany w polu tekstowym do listy,<\/li>\n
                        • usunie ostatni element listy,<\/li>\n
                        • zmieni kolor wszystkich element\u00f3w listy na niebieski.<\/li>\n<\/ul>\n

                          Rozwi\u0105zanie<\/strong><\/p>\n

                          <!DOCTYPE html><\/code>
                          \n<html lang=\"pl\"><\/code>
                          \n<head><\/code>
                          \n<meta charset=\"UTF-8\"><\/code>
                          \n<title>\u0106wiczenie DOM 3<\/title><\/code>
                          \n<\/head><\/code>
                          \n<body><\/code>
                          \n<h2>Moja lista zakup\u00f3w<\/h2><\/code><\/p>\n

                          <!-- Pole tekstowe --><\/code>
                          \n<input type=\"text\" id=\"produkt\" placeholder=\"Wpisz produkt\"><\/code>
                          \n<br><br><\/code><\/p>\n

                          <!-- Lista --><\/code>
                          \n<ul id=\"lista\"><\/ul><\/code><\/p>\n

                          <!-- Przyciski --><\/code>
                          \n<button onclick=\"dodajProdukt()\">Dodaj produkt<\/button><\/code>
                          \n<button onclick=\"usunProdukt()\">Usu\u0144 ostatni<\/button><\/code>
                          \n<button onclick=\"pokolorujListe()\">Pokoloruj list\u0119<\/button><\/code><\/p>\n

                          <script><\/code>
                          \nlet lista = document.getElementById(\"lista\");<\/code><\/p>\n

                          \/\/ Dodawanie nowego produktu do listy<\/code>
                          \nfunction dodajProdukt() {<\/code>
                          \nlet input = document.getElementById(\"produkt\");<\/code>
                          \nif (input.value.trim() !== \"\") {<\/code>
                          \nlet nowy = document.createElement(\"li\");<\/code>
                          \nnowy.innerHTML = input.value;<\/code>
                          \nlista.appendChild(nowy);<\/code>
                          \ninput.value = \"\"; \/\/ czy\u015bcimy pole po dodaniu<\/code>
                          \n}<\/code>
                          \n}<\/code><\/p>\n

                          \/\/ Usuwanie ostatniego produktu<\/code>
                          \nfunction usunProdukt() {<\/code>
                          \nif (lista.lastChild) {<\/code>
                          \nlista.removeChild(lista.lastChild);<\/code>
                          \n}<\/code>
                          \n}<\/code><\/p>\n

                          \/\/ Zmiana koloru ca\u0142ej listy<\/code>
                          \nfunction pokolorujListe() {<\/code>
                          \nlet produkty = lista.getElementsByTagName(\"li\");<\/code>
                          \nfor (let i = 0; i < produkty.length; i++) {<\/code>
                          \nprodukty[i].style.color = \"blue\";<\/code>
                          \nprodukty[i].style.fontWeight = \"bold\";<\/code>
                          \n}<\/code>
                          \n}<\/code>
                          \n<\/script><\/code>
                          \n<\/body><\/code>
                          \n<\/html><\/code><\/p>\n

                          Wyja\u015bnienie<\/strong><\/p>\n

                            \n
                          • getElementById(\"lista\")<\/code> -> pobiera list\u0119 zakup\u00f3w.<\/li>\n
                          • createElement(\"li\")<\/code> -> tworzy nowy punkt listy.<\/li>\n
                          • appendChild(...)<\/code> -> dodaje produkt na ko\u0144cu listy.<\/li>\n
                          • removeChild(...)<\/code> -> usuwa ostatni element listy.<\/li>\n
                          • getElementsByTagName(\"li\")<\/code> -> pobiera wszystkie produkty w li\u015bcie i pozwala zmienia\u0107 ich styl w p\u0119tli.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

                            Model DOM (Document Object Model) to spos\u00f3b, w jaki JavaScript \u201ewidzi\u201d stron\u0119 internetow\u0105. Dzi\u0119ki niemu mo\u017cemy wyszukiwa\u0107 elementy, zmienia\u0107 ich zawarto\u015b\u0107, a tak\u017ce dodawa\u0107 i usuwa\u0107 nowe elementy. Zobaczmy najwa\u017cniejsze metody i operacje, kt\u00f3re powinien zna\u0107 ka\u017cdy pocz\u0105tkuj\u0105cy programista.<\/p>\n","protected":false},"author":1,"featured_media":260,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[],"class_list":["post-1234","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3-javascript"],"_links":{"self":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/1234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/comments?post=1234"}],"version-history":[{"count":5,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/1234\/revisions"}],"predecessor-version":[{"id":1239,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/1234\/revisions\/1239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media\/260"}],"wp:attachment":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media?parent=1234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/categories?post=1234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/tags?post=1234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}