{"id":1253,"date":"2025-09-22T09:26:20","date_gmt":"2025-09-22T07:26:20","guid":{"rendered":"https:\/\/piotrgabriel.pl\/wiki\/?p=1253"},"modified":"2025-09-22T11:50:06","modified_gmt":"2025-09-22T09:50:06","slug":"javascript-cz-8-operacje-na-elementach-dokumentu-i-wlasciwosci-obiektu-style","status":"publish","type":"post","link":"https:\/\/piotrgabriel.pl\/wiki\/javascript-cz-8-operacje-na-elementach-dokumentu-i-wlasciwosci-obiektu-style\/","title":{"rendered":"Javascript cz.8 – Operacje na elementach dokumentu i w\u0142a\u015bciwo\u015bci obiektu style"},"content":{"rendered":"

Praca z DOM (Document Object Model) to podstawa w JavaScript. Dzi\u0119ki metodom takim jak createElement<\/code>, appendChild<\/code> czy replaceChild<\/code> mo\u017cemy dynamicznie zmienia\u0107 zawarto\u015b\u0107 strony. Dodatkowo, poprzez obiekt style<\/code>, sterujemy wygl\u0105dem element\u00f3w HTML bezpo\u015brednio z poziomu skryptu.<\/p>\n

W tym wpisie znajdziesz proste wyja\u015bnienia oraz przyk\u0142ady gotowe do uruchomienia.<\/p>\n

<\/p>\n

Operacje na elementach dokumentu
\n1. document.createElement(element)<\/h2>\n

Tworzy nowy element HTML w pami\u0119ci. Nie jest on jeszcze widoczny na stronie, dop\u00f3ki nie zostanie do\u0142\u0105czony do dokumentu.<\/p>\n

Przyk\u0142ad 1 \u2013 tworzenie nag\u0142\u00f3wka<\/p>\n

<div id=\"container\"><\/div><\/code>
\n<script><\/code>
\nlet naglowek = document.createElement(\"h1\");<\/code>
\nnaglowek.textContent = \"Witaj w JS!\";<\/code>
\ndocument.getElementById(\"container\").appendChild(naglowek);<\/code>
\n<\/script><\/code><\/p>\n

Przyk\u0142ad 2 \u2013 tworzenie przycisku<\/p>\n

<div id=\"buttons\"><\/div><\/code>
\n<script><\/code>
\nlet btn = document.createElement(\"button\");<\/code>
\nbtn.textContent = \"Kliknij mnie!\";<\/code>
\ndocument.getElementById(\"buttons\").appendChild(btn);<\/code>
\n<\/script><\/code><\/p>\n

2. document.removeChild(element)<\/h2>\n

Usuwa wskazany element z rodzica.<\/p>\n

Przyk\u0142ad 1 \u2013 usu\u0144 akapit<\/p>\n

<div id=\"box\"><\/code>
\n<p id=\"tekst\">Ten akapit zostanie usuni\u0119ty<\/p><\/code>
\n<\/div><\/code>
\n<script><\/code>
\nlet box = document.getElementById(\"box\");<\/code>
\nlet tekst = document.getElementById(\"tekst\");<\/code>
\nbox.removeChild(tekst);<\/code>
\n<\/script><\/code><\/p>\n

Przyk\u0142ad 2 \u2013 usu\u0144 pierwszy element listy<\/p>\n

<ul id=\"lista\"><\/code>
\n<li>Pierwszy<\/li><\/code>
\n<li>Drugi<\/li><\/code>
\n<\/ul><\/code>
\n<script><\/code>
\nlet lista = document.getElementById(\"lista\");<\/code>
\nlista.removeChild(lista.firstElementChild);<\/code>
\n<\/script><\/code><\/p>\n

3. document.appendChild(element)<\/h2>\n

Dodaje nowy element jako dziecko do wskazanego rodzica.<\/p>\n

Przyk\u0142ad 1 \u2013 nowy element listy<\/p>\n

<ul id=\"lista\"><\/ul><\/code>
\n<script><\/code>
\nlet li = document.createElement(\"li\");<\/code>
\nli.textContent = \"Nowy element\";<\/code>
\ndocument.getElementById(\"lista\").appendChild(li);<\/code>
\n<\/script><\/code><\/p>\n

Przyk\u0142ad 2 \u2013 dodaj obrazek<\/p>\n

<div id=\"galeria\"><\/div><\/code>
\n<script><\/code>
\nlet img = document.createElement(\"img\");<\/code>
\nimg.src = \"https:\/\/via.placeholder.com\/100\";<\/code>
\ndocument.getElementById(\"galeria\").appendChild(img);<\/code>
\n<\/script><\/code><\/p>\n

4. document.replaceChild(element, oldElement)<\/h2>\n

Zamienia istniej\u0105cy element na inny.<\/p>\n

Przyk\u0142ad 1 \u2013 zamie\u0144 akapit<\/p>\n

<div id=\"content\"><\/code>
\n<p id=\"stary\">Stary tekst<\/p><\/code>
\n<\/div><\/code>
\n<script><\/code>
\nlet nowy = document.createElement(\"p\");<\/code>
\nnowy.textContent = \"Nowy tekst\";<\/code>
\nlet content = document.getElementById(\"content\");<\/code>
\nlet stary = document.getElementById(\"stary\");<\/code>
\ncontent.replaceChild(nowy, stary);<\/code>
\n<\/script><\/code><\/p>\n

Przyk\u0142ad 2 \u2013 zamie\u0144 przycisk<\/p>\n

<div id=\"panel\"><\/code>
\n<button id=\"btn1\">Stary przycisk<\/button><\/code>
\n<\/div><\/code>
\n<script><\/code>
\nlet nowyBtn = document.createElement(\"button\");<\/code>
\nnowyBtn.textContent = \"Nowy przycisk\";<\/code>
\nlet panel = document.getElementById(\"panel\");<\/code>
\nlet staryBtn = document.getElementById(\"btn1\");<\/code>
\npanel.replaceChild(nowyBtn, staryBtn);<\/code>
\n<\/script><\/code><\/p>\n

5. document.write(text)<\/h2>\n

Wstawia tekst lub HTML bezpo\u015brednio do dokumentu.
\nUwaga: u\u017cycie po za\u0142adowaniu strony nadpisze ca\u0142\u0105 zawarto\u015b\u0107.<\/p>\n

Przyk\u0142ad 1 \u2013 prosty napis<\/p>\n

<script><\/code>
\ndocument.write(\"Witaj \u015bwiecie!\");<\/code>
\n<\/script><\/code><\/p>\n

Przyk\u0142ad 2 \u2013 rysowanie listy<\/p>\n

<script><\/code>
\ndocument.write(\"<ul><li>Jeden<\/li><li>Dwa<\/li><\/ul>\");<\/code>
\n<\/script><\/code><\/p>\n

    \n
  • \n

    Je\u015bli document.write()<\/code> zostanie wywo\u0142ane w trakcie parsowania strony<\/strong> (np. wewn\u0105trz <script><\/code> umieszczonego w kodzie HTML zanim DOM jest gotowy) \u2013 wtedy tre\u015b\u0107 jest wstrzykiwana w tym miejscu i niczego nie nadpisuje.
    (tak dzia\u0142aj\u0105 przyk\u0142ady wy\u017cej –\u00a0 skrypt jest czytany w momencie \u0142adowania i wpis \u201eWitaj \u015bwiecie!\u201d l\u0105duje w tym miejscu w drzewie DOM).<\/p>\n<\/li>\n

  • \n

    Je\u015bli document.write()<\/code> zostanie wywo\u0142ane ju\u017c po za\u0142adowaniu dokumentu<\/strong> (np. w onload<\/code>, w setTimeout<\/code>, czy r\u0119cznie w konsoli po tym, jak strona si\u0119 wyrenderowa\u0142a), to wtedy zgodnie z dokumentacj\u0105:<\/p>\n

    \n

    \u201eThe write() method deletes all existing HTML when used on a loaded document.\u201d
    Innymi s\u0142owy \u2013 kasuje ca\u0142y dokument i zaczyna pisa\u0107 od zera.<\/p>\n

    na przyk\u0142ad:<\/p>\n

    <p>To jest tre\u015b\u0107 strony<\/p><\/code><\/p>\n

    <script><\/code>
    \n\/\/ Zadzia\u0142a w trakcie \u0142adowania - tekst wstrzykni\u0119ty bez kasowania<\/code>
    \ndocument.write(\"Witaj \u015bwiecie!<br>\");<\/code>
    \n<\/script><\/code><\/p>\n

    <script><\/code>
    \n\/\/ Zadzia\u0142a dopiero po za\u0142adowaniu dokumentu - nadpisze ca\u0142o\u015b\u0107<\/code>
    \nwindow.onload = function() {<\/code>
    \ndocument.write(\"Nadpisana strona!\");<\/code>
    \n}<\/code>
    \n<\/script><\/code><\/p><\/blockquote>\n<\/li>\n<\/ul>\n

    Wybrane w\u0142a\u015bciwo\u015bci obiektu style<\/h2>\n

    Ka\u017cdy element HTML ma obiekt style, kt\u00f3ry pozwala zmienia\u0107 wygl\u0105d bezpo\u015brednio z poziomu JavaScript.<\/p>\n

    1. backgroundColor<\/h2>\n

    Ustawia kolor t\u0142a elementu.<\/p>\n

    <div id=\"box\" style=\"width:100px; height:100px;\"><\/div><\/code>
    \n<script><\/code>
    \ndocument.getElementById(\"box\").style.backgroundColor = \"red\";<\/code>
    \n<\/script><\/code><\/p>\n

    2. color<\/h2>\n

    Kolor tekstu.<\/p>\n

    <p id=\"txt\">Kolorowy tekst<\/p><\/code>
    \n<script><\/code>
    \ndocument.getElementById(\"txt\").style.color = \"green\";<\/code>
    \n<\/script><\/code><\/p>\n

    3. fontSize<\/p>\n

    Rozmiar czcionki.<\/p>\n

    <p id=\"tekst\">Ma\u0142y tekst<\/p><\/code>
    \n<script><\/code>
    \ndocument.getElementById(\"tekst\").style.fontSize = \"30px\";<\/code>
    \n<\/script><\/code><\/p>\n

    4. fontStyle<\/h2>\n

    Styl czcionki (normal, italic, oblique).<\/p>\n

    <p id=\"styl\">Normalny tekst<\/p><\/code>
    \n<script><\/code>
    \ndocument.getElementById(\"styl\").style.fontStyle = \"italic\";<\/code>
    \n<\/script><\/code><\/p>\n

    5. fontWeight<\/h2>\n

    Grubo\u015b\u0107 czcionki (normal, bold, lighter, bolder).<\/p>\n

    <p id=\"waga\">Przyk\u0142ad<\/p><\/code>
    \n<script><\/code>
    \ndocument.getElementById(\"waga\").style.fontWeight = \"bold\";<\/code>
    \n<\/script><\/code><\/p>\n

    6. listStyleType<\/h2>\n

    Rodzaj wypunktowania (circle, square, decimal, none).<\/p>\n

    <ul id=\"mojaLista\"><\/code>
    \n<li>Element 1<\/li><\/code>
    \n<li>Element 2<\/li><\/code>
    \n<\/ul><\/code>
    \n<script><\/code>
    \ndocument.getElementById(\"mojaLista\").style.listStyleType = \"square\";<\/code>
    \n<\/script><\/code><\/p>\n

    Podsumowanie<\/strong><\/h2>\n

    Dzi\u0119ki operacjom na DOM i w\u0142a\u015bciwo\u015bciom style mo\u017cemy:<\/p>\n

      \n
    1. tworzy\u0107, usuwa\u0107 i modyfikowa\u0107 elementy HTML,<\/li>\n
    2. dynamicznie sterowa\u0107 wygl\u0105dem strony,<\/li>\n
    3. budowa\u0107 interaktywne aplikacje webowe bez prze\u0142adowania strony.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

      Praca z DOM (Document Object Model) to podstawa w JavaScript. Dzi\u0119ki metodom takim jak createElement, appendChild czy replaceChild mo\u017cemy dynamicznie zmienia\u0107 zawarto\u015b\u0107 strony. Dodatkowo, poprzez obiekt style, sterujemy wygl\u0105dem element\u00f3w HTML bezpo\u015brednio z poziomu skryptu. W tym wpisie znajdziesz proste […]<\/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-1253","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\/1253","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=1253"}],"version-history":[{"count":5,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/1253\/revisions"}],"predecessor-version":[{"id":1258,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/1253\/revisions\/1258"}],"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=1253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/categories?post=1253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/tags?post=1253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}