{"id":23518,"date":"2023-08-13T08:32:58","date_gmt":"2023-08-13T06:32:58","guid":{"rendered":"https:\/\/theforcecode.com\/help\/pl\/?p=23518"},"modified":"2023-09-07T12:42:21","modified_gmt":"2023-09-07T10:42:21","slug":"manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom","status":"publish","type":"post","link":"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/","title":{"rendered":"Manipulowanie elementami HTML za pomoc\u0105 JavaScript Document Object Model (DOM)"},"content":{"rendered":"<p>Document Object Model, znany r\u00f3wnie\u017c jako DOM, jest reprezentacj\u0105 struktury HTML w postaci drzewa obiekt\u00f3w, kt\u00f3re mo\u017cna manipulowa\u0107 za pomoc\u0105 j\u0119zyka JavaScript. W skr\u00f3cie, DOM pozwala nam dost\u0119powa\u0107 do element\u00f3w HTML i modyfikowa\u0107 je dynamicznie w czasie wykonywania skrypt\u00f3w.<\/p>\n<ul>\n<li><a title=\"Dowiedz si\u0119, jak dzia\u0142a struktura Document Object Model (DOM)\" href=\"#1\">Zrozumienie struktury DOM<\/a><\/li>\n<li><a title=\"Odkryj, dlaczego umiej\u0119tno\u015b\u0107 manipulacji DOM jest kluczowa w j\u0119zyku JavaScript\" href=\"#2\">Dlaczego manipulacja DOM jest wa\u017cna w JavaScript?<\/a><\/li>\n<li><a title=\"Przegl\u0105daj popularne metody interakcji z Document Object Model w JavaScript\" href=\"#3\">Popularne metody DOM w JavaScript<\/a><\/li>\n<li><a title=\"Najlepsze praktyki efektywnej i zgodnej manipulacji DOM w JavaScript\" href=\"#4\">Najlepsze praktyki manipulacji DOM w JavaScript<\/a><\/li>\n<\/ul>\n<div class=\"alert message_alert overflow-y-auto alert-default\"><span class=\"w-12 block flex-shrink\"><svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg><\/span><div class=\"flex-1\"><p class=\"mb-0\">Struktura DOM sk\u0142ada si\u0119 z w\u0119z\u0142\u00f3w, kt\u00f3re reprezentuj\u0105 r\u00f3\u017cne cz\u0119\u015bci dokumentu HTML. Korze\u0144 drzewa jest reprezentowany przez obiekt <code>document<\/code>, kt\u00f3ry jest rodzicem dla wszystkich innych w\u0119z\u0142\u00f3w. Ka\u017cdy element HTML, a tak\u017ce tekst czy atrybuty, s\u0105 reprezentowane jako w\u0119z\u0142y w drzewie DOM.<\/p><\/div><\/div>\n<p>Zobacz tak\u017ce:<\/p>\n<ul>\n<li><a title=\"Skrypty po stronie serwera czy klienta?\" href=\"https:\/\/theforcecode.com\/help\/pl\/demistyfikacja-skryptow-po-stronie-klienta-co-odroznia-je-od-skryptow-po-stronie-serwera\/\">Demistyfikacja skrypt\u00f3w po stronie klienta: co odr\u00f3\u017cnia je od skrypt\u00f3w po stronie serwera?<\/a><\/li>\n<li><a title=\"Zmiana wygl\u0105du strony WWW w CSS\" href=\"https:\/\/theforcecode.com\/help\/pl\/sztuka-css-jak-stylizowac-i-zmieniac-wyglad-swojej-strony-www\/\">Sztuka CSS \u2013 jak zmienia\u0107 wygl\u0105d strony WWW?<\/a><\/li>\n<li><a title=\"Jaki j\u0119zyk programowania do projektu wybra\u0107\" href=\"https:\/\/theforcecode.com\/help\/pl\/node-js-vs-php-porownanie-i-wybor-najlepszej-technologii-dla-twojego-projektu\">Node.js vs PHP: Por\u00f3wnanie i wyb\u00f3r najlepszej technologii dla Twojego projektu<\/a><\/li>\n<\/ul>\n<h2 id=\"zrozumienie-struktury-dom\"><a name=\"1\"><\/a>Zrozumienie struktury DOM<\/h2>\n<p>Wa\u017cne jest, aby zrozumie\u0107 struktur\u0119 DOM, aby m\u00f3c skutecznie manipulowa\u0107 elementami HTML za pomoc\u0105 JavaScript. Ka\u017cdy element HTML ma swoje miejsce w drzewie DOM, a jego w\u0142a\u015bciwo\u015bci i metody mog\u0105 by\u0107 dost\u0119pne dla manipulacji.<\/p>\n<p>Na przyk\u0142ad, aby uzyska\u0107 dost\u0119p do elementu o okre\u015blonym identyfikatorze, mo\u017cemy u\u017cy\u0107 metody <code>getElementById<\/code> obiektu <code>document<\/code>. Mo\u017cemy r\u00f3wnie\u017c porusza\u0107 si\u0119 po drzewie DOM, korzystaj\u0105c z r\u00f3\u017cnych w\u0142a\u015bciwo\u015bci, takich jak <code>parentNode<\/code>, <code>childNodes<\/code> i <code>nextSibling<\/code>, aby znale\u017a\u0107 i manipulowa\u0107 innymi elementami.<\/p>\n<h2 id=\"dlaczego-manipulacja-dom-jest-wazna-w-javascript\"><a name=\"2\"><\/a>Dlaczego manipulacja DOM jest wa\u017cna w JavaScript?<\/h2>\n<p>Manipulacja DOM jest nieod\u0142\u0105czn\u0105 cz\u0119\u015bci\u0105 wielu aplikacji internetowych. Pozwala nam dynamicznie zmienia\u0107 zawarto\u015b\u0107 i wygl\u0105d strony w odpowiedzi na interakcje u\u017cytkownika lub zmienne warunkiowe. Bez umiej\u0119tno\u015bci manipulowania DOM, tworzenie interaktywnych stron internetowych by\u0142oby znacznie trudniejsze.<\/p>\n<p>JavaScript umo\u017cliwia nam dost\u0119p do element\u00f3w DOM i modyfikowanie ich, co pozwala na tworzenie dynamicznych efekt\u00f3w, takich jak animacje, dynamiczne formularze czy zmiana tre\u015bci strony w czasie rzeczywistym. Manipulacja DOM pozwala nam r\u00f3wnie\u017c na interakcj\u0119 z u\u017cytkownikiem, tak\u0105 jak obs\u0142uga zdarze\u0144, w tym klikni\u0119cia myszy, wprowadzanie danych czy zmiana rozmiaru okna przegl\u0105darki.<\/p>\n<h2 id=\"popularne-metody-dom-w-javascript\"><a name=\"3\"><\/a>Popularne metody DOM w JavaScript<\/h2>\n<p>JavaScript oferuje wiele przydatnych metod do manipulacji DOM. Oto kilka z nich:<\/p>\n<ul>\n<li><a href=\"#1a\">Dost\u0119p do element\u00f3w HTML za pomoc\u0105 JavaScript<\/a><\/li>\n<li><a href=\"#1b\">Modyfikowanie element\u00f3w HTML za pomoc\u0105 JavaScript<\/a><\/li>\n<li><a href=\"#1c\">Dodawanie i usuwanie element\u00f3w HTML za pomoc\u0105 JavaScript<\/a><\/li>\n<li><a href=\"#1d\">Obs\u0142uga zdarze\u0144 za pomoc\u0105 DOM<\/a><\/li>\n<\/ul>\n<h3 id=\"dostep-do-elementow-html-za-pomoca-javascript\"><a name=\"1a\"><\/a>Dost\u0119p do element\u00f3w HTML za pomoc\u0105 JavaScript<\/h3>\n<p>Metoda <code>getElementById<\/code> pozwala na znalezienie elementu o okre\u015blonym identyfikatorze w drzewie DOM. Mo\u017cemy u\u017cy\u0107 tej metody, aby uzyska\u0107 dost\u0119p do konkretnego elementu i manipulowa\u0107 jego atrybutami czy zawarto\u015bci\u0105.<\/p>\n<p>Inn\u0105 przydatn\u0105 metod\u0105 jest <code>getElementsByClassName<\/code>, kt\u00f3ra pozwala na znalezienie element\u00f3w o okre\u015blonej klasie. Mo\u017cemy u\u017cy\u0107 tej metody, aby znale\u017a\u0107 wszystkie elementy z okre\u015blon\u0105 klas\u0105 i zmodyfikowa\u0107 je jednocze\u015bnie.<\/p>\n<h3 id=\"modyfikowanie-elementow-html-za-pomoca-javascript\"><a name=\"1b\"><\/a>Modyfikowanie element\u00f3w HTML za pomoc\u0105 JavaScript<\/h3>\n<p>Metoda <code>innerHTML<\/code> pozwala na modyfikacj\u0119 zawarto\u015bci elementu HTML. Mo\u017cemy u\u017cy\u0107 tej metody, aby zmieni\u0107 tekst, dodawa\u0107 nowe elementy HTML czy usuwa\u0107 istniej\u0105ce.<\/p>\n<p>Inn\u0105 przydatn\u0105 metod\u0105 jest <code>setAttribute<\/code>, kt\u00f3ra pozwala na ustawienie atrybut\u00f3w elementu HTML. Mo\u017cemy u\u017cy\u0107 tej metody, aby zmieni\u0107 atrybuty, takie jak <code>src<\/code>, <code>href<\/code> czy <code>class<\/code>.<\/p>\n<h3 id=\"dodawanie-i-usuwanie-elementow-html-za-pomoca-javascript\"><a name=\"1c\"><\/a>Dodawanie i usuwanie element\u00f3w HTML za pomoc\u0105 JavaScript<\/h3>\n<p>Metoda <code>createElement<\/code> pozwala na tworzenie nowych element\u00f3w HTML. Mo\u017cemy u\u017cy\u0107 tej metody, aby dynamicznie tworzy\u0107 nowe elementy i dodawa\u0107 je do strony.<\/p>\n<p>Metoda <code>appendChild<\/code> pozwala na dodawanie element\u00f3w jako dzieci innych element\u00f3w. Mo\u017cemy u\u017cy\u0107 tej metody, aby doda\u0107 nowy element jako dziecko innego elementu, co pozwala na tworzenie bardziej z\u0142o\u017conych struktur HTML.<\/p>\n<p>Metoda <code>removeChild<\/code> pozwala na usuwanie element\u00f3w z drzewa DOM. Mo\u017cemy u\u017cy\u0107 tej metody, aby usun\u0105\u0107 istniej\u0105cy element HTML.<\/p>\n<h3 id=\"obsluga-zdarzen-za-pomoca-dom\"><a name=\"1d\"><\/a>Obs\u0142uga zdarze\u0144 za pomoc\u0105 DOM<\/h3>\n<p>DOM umo\u017cliwia r\u00f3wnie\u017c obs\u0142ug\u0119 zdarze\u0144, takich jak klikni\u0119cia myszy, wprowadzanie danych czy zmiana rozmiaru okna przegl\u0105darki. Mo\u017cemy u\u017cy\u0107 metody <code>addEventListener<\/code>, aby przypisa\u0107 funkcj\u0119 do danego zdarzenia. Ta funkcja zostanie wywo\u0142ana, gdy zdarzenie nast\u0105pi.<\/p>\n<h2 id=\"najlepsze-praktyki-manipulacji-dom-w-javascript\"><a name=\"4\"><\/a>Najlepsze praktyki manipulacji DOM w JavaScript<\/h2>\n<p>Podczas manipulacji DOM w JavaScript istnieje kilka najlepszych praktyk, kt\u00f3re warto mie\u0107 na uwadze:<\/p>\n<ol>\n<li><span class=\"flex items-start justify-start\">Staraj si\u0119 u\u017cywa\u0107 jak najmniejszej ilo\u015bci operacji na DOM, poniewa\u017c zmiany w drzewie DOM mog\u0105 wp\u0142ywa\u0107 na wydajno\u015b\u0107 strony.<\/span><\/li>\n<li><span class=\"flex items-start justify-start\">Przechowuj odwo\u0142ania do element\u00f3w DOM w zmiennych, aby unikn\u0105\u0107 zb\u0119dnych wyszukiwa\u0144 w drzewie DOM.<\/span><\/li>\n<li><span class=\"flex items-start justify-start\">Wykorzystaj delegacj\u0119 zdarze\u0144, aby obs\u0142u\u017cy\u0107 wiele element\u00f3w za pomoc\u0105 jednej funkcji. Mo\u017cesz przypisa\u0107 funkcj\u0119 do rodzica i u\u017cy\u0107 w\u0142a\u015bciwo\u015bci target obiektu zdarzenia, aby zidentyfikowa\u0107, kt\u00f3ry element zosta\u0142 klikni\u0119ty.<\/span><\/li>\n<li><span class=\"flex items-start justify-start\">Upewnij si\u0119, \u017ce kod manipuluj\u0105cy DOM jest czytelny i zrozumia\u0142y dla innych programist\u00f3w. U\u017cywaj opisowych nazw zmiennych i funkcji oraz komentarzy, aby wyja\u015bni\u0107, co dany fragment kodu robi.<\/span><\/li>\n<\/ol>\n<div class=\"alert message_alert overflow-y-auto alert-info\"><span class=\"w-12 block flex-shrink\"><svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg><\/span><div class=\"flex-1\"><p class=\"mb-0\">Manipulacja DOM jest kluczowym elementem programowania stron internetowych za pomoc\u0105 JavaScript. Dzi\u0119ki umiej\u0119tno\u015bci manipulowania elementami HTML za pomoc\u0105 DOM, mo\u017cemy tworzy\u0107 dynamiczne i interaktywne strony internetowe. Zrozumienie struktury DOM i korzystanie z popularnych metod DOM pozwala nam na efektywn\u0105 i elastyczn\u0105 manipulacj\u0119 elementami HTML.<\/p><\/div><\/div>\n<div class=\"helpful-block-content wth-theme-thumbs\" data-title=\"\" >\n<ul>\n<li><span class=\"wth-title\">Czy ten artyku\u0142 by\u0142 pomocny?<\/span><\/li>\n<li><a data-post=\"23518\" data-post-url=\"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/\" data-post-title=\"Manipulowanie elementami HTML za pomoc\u0105 JavaScript Document Object Model (DOM)\" data-response=\"1\" href=\"#\" class=\"wth-green-btn icon-thumbsup icon1-thumbs-up4\">Tak<\/a><a data-response=\"0\" data-post=\"23518\" data-post-url=\"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/\" data-post-title=\"Manipulowanie elementami HTML za pomoc\u0105 JavaScript Document Object Model (DOM)\" href=\"#\" class=\"wth-red-btn icon-thumbsdown icon1-thumbs-down4\">Nie<\/a><\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Document Object Model, znany r\u00f3wnie\u017c jako DOM, jest reprezentacj\u0105 struktury HTML w postaci drzewa obiekt\u00f3w, kt\u00f3re mo\u017cna manipulowa\u0107 za pomoc\u0105 j\u0119zyka JavaScript. W skr\u00f3cie, DOM pozwala nam dost\u0119powa\u0107 do element\u00f3w HTML i modyfikowa\u0107 je dynamicznie w czasie wykonywania skrypt\u00f3w. Zrozumienie struktury DOM Dlaczego manipulacja DOM jest wa\u017cna w JavaScript? Popularne metody DOM w JavaScript Najlepsze [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1214,1477],"tags":[953,955,956,1481,1482],"acf":{"second_title":"Document Object Model (DOM)","pokaz_ranking_hostingow":false,"tresc":false},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Manipulowanie elementami HTML za pomoc\u0105 JavaScript Document Object Model (DOM) &raquo; TheForceCode - centrum wiedzy<\/title>\n<meta name=\"description\" content=\"Document Object Model, znany r\u00f3wnie\u017c jako DOM, jest reprezentacj\u0105 struktury HTML w postaci drzewa obiekt\u00f3w, kt\u00f3re mo\u017cna manipulowa\u0107 za pomoc\u0105 j\u0119zyka JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Manipulowanie elementami HTML za pomoc\u0105 JavaScript Document Object Model (DOM) &raquo; TheForceCode - centrum wiedzy\" \/>\n<meta property=\"og:description\" content=\"Document Object Model, znany r\u00f3wnie\u017c jako DOM, jest reprezentacj\u0105 struktury HTML w postaci drzewa obiekt\u00f3w, kt\u00f3re mo\u017cna manipulowa\u0107 za pomoc\u0105 j\u0119zyka JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/\" \/>\n<meta property=\"og:site_name\" content=\"TheForceCode - centrum wiedzy\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/theforcecode\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-13T06:32:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-07T10:42:21+00:00\" \/>\n<meta name=\"author\" content=\"PowiernikMocy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"PowiernikMocy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/\"},\"author\":{\"name\":\"PowiernikMocy\",\"@id\":\"https:\/\/theforcecode.com\/help\/pl\/#\/schema\/person\/fc4829558bbc3eb55f2cabff906de402\"},\"headline\":\"Manipulowanie elementami HTML za pomoc\u0105 JavaScript Document Object Model (DOM)\",\"datePublished\":\"2023-08-13T06:32:58+00:00\",\"dateModified\":\"2023-09-07T10:42:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/\"},\"wordCount\":877,\"publisher\":{\"@id\":\"https:\/\/theforcecode.com\/help\/pl\/#organization\"},\"keywords\":[\"HTML\",\"JavaScript\",\"WWW\",\"DOM\",\"Document Object Model\"],\"articleSection\":[\"JavaScript\",\"HTML\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/\",\"url\":\"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/\",\"name\":\"Manipulowanie elementami HTML za pomoc\u0105 JavaScript Document Object Model (DOM) &raquo; TheForceCode - centrum wiedzy\",\"isPartOf\":{\"@id\":\"https:\/\/theforcecode.com\/help\/pl\/#website\"},\"datePublished\":\"2023-08-13T06:32:58+00:00\",\"dateModified\":\"2023-09-07T10:42:21+00:00\",\"description\":\"Document Object Model, znany r\u00f3wnie\u017c jako DOM, jest reprezentacj\u0105 struktury HTML w postaci drzewa obiekt\u00f3w, kt\u00f3re mo\u017cna manipulowa\u0107 za pomoc\u0105 j\u0119zyka JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/theforcecode.com\/help\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\/\/theforcecode.com\/help\/pl\/html\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Document Object Model (DOM)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/theforcecode.com\/help\/pl\/#website\",\"url\":\"https:\/\/theforcecode.com\/help\/pl\/\",\"name\":\"TheForceCode.com\",\"description\":\"TheForceCode - artyku\u0142y\",\"publisher\":{\"@id\":\"https:\/\/theforcecode.com\/help\/pl\/#organization\"},\"alternateName\":\"TheForceCode Help\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/theforcecode.com\/help\/pl\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/theforcecode.com\/help\/pl\/#organization\",\"name\":\"TheForceCode.com\",\"alternateName\":\"TheForceCode \u2013 May the code, be with you\",\"url\":\"https:\/\/theforcecode.com\/help\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/theforcecode.com\/help\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/theforcecode.com\/help\/pl\/wp-content\/uploads\/2023\/04\/tfc-logo-black.png\",\"contentUrl\":\"https:\/\/theforcecode.com\/help\/pl\/wp-content\/uploads\/2023\/04\/tfc-logo-black.png\",\"width\":1000,\"height\":307,\"caption\":\"TheForceCode.com\"},\"image\":{\"@id\":\"https:\/\/theforcecode.com\/help\/pl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/theforcecode\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/theforcecode.com\/help\/pl\/#\/schema\/person\/fc4829558bbc3eb55f2cabff906de402\",\"name\":\"PowiernikMocy\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/theforcecode.com\/help\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cc4482a5ab8c62f7ffeb5d78c27ef285?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cc4482a5ab8c62f7ffeb5d78c27ef285?s=96&d=mm&r=g\",\"caption\":\"PowiernikMocy\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Manipulowanie elementami HTML za pomoc\u0105 JavaScript Document Object Model (DOM) &raquo; TheForceCode - centrum wiedzy","description":"Document Object Model, znany r\u00f3wnie\u017c jako DOM, jest reprezentacj\u0105 struktury HTML w postaci drzewa obiekt\u00f3w, kt\u00f3re mo\u017cna manipulowa\u0107 za pomoc\u0105 j\u0119zyka JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/","og_locale":"pl_PL","og_type":"article","og_title":"Manipulowanie elementami HTML za pomoc\u0105 JavaScript Document Object Model (DOM) &raquo; TheForceCode - centrum wiedzy","og_description":"Document Object Model, znany r\u00f3wnie\u017c jako DOM, jest reprezentacj\u0105 struktury HTML w postaci drzewa obiekt\u00f3w, kt\u00f3re mo\u017cna manipulowa\u0107 za pomoc\u0105 j\u0119zyka JavaScript.","og_url":"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/","og_site_name":"TheForceCode - centrum wiedzy","article_publisher":"https:\/\/www.facebook.com\/theforcecode\/","article_published_time":"2023-08-13T06:32:58+00:00","article_modified_time":"2023-09-07T10:42:21+00:00","author":"PowiernikMocy","twitter_card":"summary_large_image","twitter_misc":{"Napisane przez":"PowiernikMocy","Szacowany czas czytania":"5 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/#article","isPartOf":{"@id":"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/"},"author":{"name":"PowiernikMocy","@id":"https:\/\/theforcecode.com\/help\/pl\/#\/schema\/person\/fc4829558bbc3eb55f2cabff906de402"},"headline":"Manipulowanie elementami HTML za pomoc\u0105 JavaScript Document Object Model (DOM)","datePublished":"2023-08-13T06:32:58+00:00","dateModified":"2023-09-07T10:42:21+00:00","mainEntityOfPage":{"@id":"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/"},"wordCount":877,"publisher":{"@id":"https:\/\/theforcecode.com\/help\/pl\/#organization"},"keywords":["HTML","JavaScript","WWW","DOM","Document Object Model"],"articleSection":["JavaScript","HTML"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/","url":"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/","name":"Manipulowanie elementami HTML za pomoc\u0105 JavaScript Document Object Model (DOM) &raquo; TheForceCode - centrum wiedzy","isPartOf":{"@id":"https:\/\/theforcecode.com\/help\/pl\/#website"},"datePublished":"2023-08-13T06:32:58+00:00","dateModified":"2023-09-07T10:42:21+00:00","description":"Document Object Model, znany r\u00f3wnie\u017c jako DOM, jest reprezentacj\u0105 struktury HTML w postaci drzewa obiekt\u00f3w, kt\u00f3re mo\u017cna manipulowa\u0107 za pomoc\u0105 j\u0119zyka JavaScript.","breadcrumb":{"@id":"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/theforcecode.com\/help\/pl\/manipulowanie-elementami-html-za-pomoca-javascript-document-object-model-dom\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/theforcecode.com\/help\/pl\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/theforcecode.com\/help\/pl\/html\/"},{"@type":"ListItem","position":3,"name":"Document Object Model (DOM)"}]},{"@type":"WebSite","@id":"https:\/\/theforcecode.com\/help\/pl\/#website","url":"https:\/\/theforcecode.com\/help\/pl\/","name":"TheForceCode.com","description":"TheForceCode - artyku\u0142y","publisher":{"@id":"https:\/\/theforcecode.com\/help\/pl\/#organization"},"alternateName":"TheForceCode Help","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/theforcecode.com\/help\/pl\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/theforcecode.com\/help\/pl\/#organization","name":"TheForceCode.com","alternateName":"TheForceCode \u2013 May the code, be with you","url":"https:\/\/theforcecode.com\/help\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/theforcecode.com\/help\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/theforcecode.com\/help\/pl\/wp-content\/uploads\/2023\/04\/tfc-logo-black.png","contentUrl":"https:\/\/theforcecode.com\/help\/pl\/wp-content\/uploads\/2023\/04\/tfc-logo-black.png","width":1000,"height":307,"caption":"TheForceCode.com"},"image":{"@id":"https:\/\/theforcecode.com\/help\/pl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/theforcecode\/"]},{"@type":"Person","@id":"https:\/\/theforcecode.com\/help\/pl\/#\/schema\/person\/fc4829558bbc3eb55f2cabff906de402","name":"PowiernikMocy","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/theforcecode.com\/help\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cc4482a5ab8c62f7ffeb5d78c27ef285?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cc4482a5ab8c62f7ffeb5d78c27ef285?s=96&d=mm&r=g","caption":"PowiernikMocy"}}]}},"_links":{"self":[{"href":"https:\/\/theforcecode.com\/help\/pl\/wp-json\/wp\/v2\/posts\/23518"}],"collection":[{"href":"https:\/\/theforcecode.com\/help\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theforcecode.com\/help\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theforcecode.com\/help\/pl\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/theforcecode.com\/help\/pl\/wp-json\/wp\/v2\/comments?post=23518"}],"version-history":[{"count":11,"href":"https:\/\/theforcecode.com\/help\/pl\/wp-json\/wp\/v2\/posts\/23518\/revisions"}],"predecessor-version":[{"id":23651,"href":"https:\/\/theforcecode.com\/help\/pl\/wp-json\/wp\/v2\/posts\/23518\/revisions\/23651"}],"wp:attachment":[{"href":"https:\/\/theforcecode.com\/help\/pl\/wp-json\/wp\/v2\/media?parent=23518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theforcecode.com\/help\/pl\/wp-json\/wp\/v2\/categories?post=23518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theforcecode.com\/help\/pl\/wp-json\/wp\/v2\/tags?post=23518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}