CINXE.COM

<!doctype html> <html lang="en-US" prefix="og: https://ogp.me/ns#"> <head> <base href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"> <link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"> <meta name="theme-color" content="#ffffff"> <link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"> <title>DOM scripting introduction - Learn web development | MDN</title> <link rel="alternate" title="Einführung in DOM-Scripting" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Scripting/DOM_scripting" hreflang="de"> <link rel="alternate" title="Manipuler des documents" href="https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Scripting/DOM_scripting" hreflang="fr"> <link rel="alternate" title="DOM スクリプティング入門" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Scripting/DOM_scripting" hreflang="ja"> <link rel="alternate" title="JavaScript e CSS" href="https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Core/Scripting/DOM_scripting" hreflang="pt"> <link rel="alternate" title="Управление документами" href="https://developer.mozilla.org/ru/docs/Learn_web_development/Core/Scripting/DOM_scripting" hreflang="ru"> <link rel="alternate" title="DOM 脚本简介" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting/DOM_scripting" hreflang="zh"> <link rel="alternate" title="DOM scripting introduction" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting" hreflang="en"> <link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""> <link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hreflang="en"> <meta name="description" content="When writing web pages and apps, one of the most common things you'll want to do is change the document structure in some way. This is usually done by manipulating the Document Object Model (DOM) via a set of built-in browser APIs for controlling HTML and styling information. In this article we'll introduce you to DOM scripting."> <meta property="og:url" content="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting"> <meta property="og:title" content="DOM scripting introduction - Learn web development | MDN"> <meta property="og:type" content="website"> <meta property="og:locale" content="en_US"> <meta property="og:description" content="When writing web pages and apps, one of the most common things you'll want to do is change the document structure in some way. This is usually done by manipulating the Document Object Model (DOM) via a set of built-in browser APIs for controlling HTML and styling information. In this article we'll introduce you to DOM scripting."> <meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:height" content="1080"> <meta property="og:image:width" content="1920"> <meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."> <meta property="og:site_name" content="MDN Web Docs"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:creator" content="MozDevNet"> <link rel="canonical" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting"> <style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style> <script src="/static/js/gtag.js" defer></script> <script defer src="/static/js/main.c6d1d6c1.js"></script> <link href="/static/css/main.bb0aeb15.css" rel="stylesheet"> <meta http-equiv="X-Translated-By" content="Google"> <meta http-equiv="X-Translated-To" content="fr"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.Gl1-asbZpBo.O/am=AAM/d=1/rs=AN8SPfq8JYd4C6ZalZRdqmFyVC7dnjezsw/m=corsproxy" data-sourceurl="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting"></script> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.Gl1-asbZpBo.O/am=AAM/d=1/exm=corsproxy/ed=1/rs=AN8SPfq8JYd4C6ZalZRdqmFyVC7dnjezsw/m=phishing_protection" data-phishing-protection-enabled="false" data-forms-warning-enabled="true" data-source-url="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting"></script> <meta name="robots" content="none"> </head> <body> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.Gl1-asbZpBo.O/am=AAM/d=1/exm=corsproxy,phishing_protection/ed=1/rs=AN8SPfq8JYd4C6ZalZRdqmFyVC7dnjezsw/m=navigationui" data-environment="prod" data-proxy-url="https://developer-mozilla-org.translate.goog" data-proxy-full-url="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" data-source-url="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting" data-source-language="pl" data-target-language="fr" data-display-language="en-GB" data-detected-source-language="" data-is-source-untranslated="false" data-source-untranslated-url="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting&anno=2" data-client="tr"></script> <script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script> <div id="root"> <ul id="nav-access" class="a11y-nav"> <li><a id="skip-main" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#content">Skip to main content</a></li> <li><a id="skip-search" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#top-nav-search-input">Skip to search</a></li> <li><a id="skip-select-language" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#languages-switcher-button">Skip to select language</a></li> </ul> <div class="page-wrapper category-javascript document-page"> <div class="top-banner loading"> <section class="place top container"></section> </div> <div class="sticky-header-container"> <header class="top-navigation "> <div class="container "> <div class="top-navigation-wrap"> <a href="https://developer-mozilla-org.translate.goog/en-US/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="logo" aria-label="MDN homepage"> <svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewbox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"> <title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path> </svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button> </div> <div class="top-navigation-main"> <nav class="main-nav" aria-label="Main menu"> <ul class="main-menu nojs"> <li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="top-level-entry">References</a> <ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"> <li class="apis-link-container mobile-only "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Overview / Web Technology </div> <p class="submenu-item-description">Web technology reference for developers</p> </div></a></li> <li class="html-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon html"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> HTML </div> <p class="submenu-item-description">Structure of content on the web</p> </div></a></li> <li class="css-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon css"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> CSS </div> <p class="submenu-item-description">Code used to describe document style</p> </div></a></li> <li class="javascript-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon javascript"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> JavaScript </div> <p class="submenu-item-description">General-purpose scripting language</p> </div></a></li> <li class="http-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTTP?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon http"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> HTTP </div> <p class="submenu-item-description">Protocol for transmitting web resources</p> </div></a></li> <li class="apis-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon apis"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Web APIs </div> <p class="submenu-item-description">Interfaces for building web applications</p> </div></a></li> <li class="apis-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Mozilla/Add-ons/WebExtensions?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Web Extensions </div> <p class="submenu-item-description">Developing extensions for web browsers</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/Accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Accessibility </div> <p class="submenu-item-description">Build web projects usable for all</p> </div></a></li> <li class="apis-link-container desktop-only "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Web Technology </div> <p class="submenu-item-description">Web technology reference for developers</p> </div></a></li> </ul></li> <li class="top-level-entry-container active"><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="top-level-entry">Learn</a> <ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"> <li class="apis-link-container mobile-only "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon learn"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Overview / MDN Learning Area </div> <p class="submenu-item-description">Learn web development</p> </div></a></li> <li class="apis-link-container desktop-only "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon learn"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> MDN Learning Area </div> <p class="submenu-item-description">Learn web development</p> </div></a></li> <li class="html-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon html"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> HTML </div> <p class="submenu-item-description">Learn to structure web content with HTML</p> </div></a></li> <li class="css-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon css"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> CSS </div> <p class="submenu-item-description">Learn to style content using CSS</p> </div></a></li> <li class="javascript-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon javascript"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> JavaScript </div> <p class="submenu-item-description">Learn to run scripts in the browser</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Accessibility </div> <p class="submenu-item-description">Learn to make the web accessible to all</p> </div></a></li> </ul></li> <li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="https://developer-mozilla-org.translate.goog/en-US/plus?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="top-level-entry">Plus</a> <ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Overview </div> <p class="submenu-item-description">A customized MDN experience</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus/ai-help?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> AI Help </div> <p class="submenu-item-description">Get real-time assistance and support</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus/updates?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Updates </div> <p class="submenu-item-description">All browser compatibility updates at a glance</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus/docs/features/overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Documentation </div> <p class="submenu-item-description">Learn how to use MDN Plus</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus/docs/faq?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> FAQ </div> <p class="submenu-item-description">Frequently asked questions about MDN Plus</p> </div></a></li> </ul></li> <li class="top-level-entry-container "><a class="top-level-entry menu-link" href="https://developer-mozilla-org.translate.goog/en-US/curriculum/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Curriculum <sup class="new">New</sup></a></li> <li class="top-level-entry-container "><a class="top-level-entry menu-link" href="https://developer-mozilla-org.translate.goog/en-US/blog/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Blog</a></li> <li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button> <ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/play?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Playground </div> <p class="submenu-item-description">Write, test and share your code</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/observatory?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> HTTP Observatory </div> <p class="submenu-item-description">Scan a website for free</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus/ai-help?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> AI Help </div> <p class="submenu-item-description">Get real-time assistance and support</p> </div></a></li> </ul></li> </ul> </nav> <div class="header-search"> <form action="/en-US/search" class="search-form search-widget" id="top-nav-search-form" role="search"> <label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autocomplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required value=""><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button> <div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div> </form> </div> <div class="theme-switcher-menu"> <button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button> </div> <ul class="auth-container"> <li><a href="https://developer-mozilla-org.translate.goog/users/fxa/login/authenticate/?next=/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting&_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="login-link" rel="nofollow">Log in</a></li> <li><a href="https://developer-mozilla-org.translate.goog/users/fxa/login/authenticate/?next=/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting&_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li> </ul> </div> </div> </header> <div class="article-actions-container"> <div class="container"> <button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button> <nav class="breadcrumbs-container" aria-label="Breadcrumb"> <ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"> <li property="itemListElement" typeof="ListItem"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Learn</span></a> <meta property="position" content="1"></li> <li property="itemListElement" typeof="ListItem"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Core learning modules</span></a> <meta property="position" content="2"></li> <li property="itemListElement" typeof="ListItem"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Dynamic scripting with JavaScript</span></a> <meta property="position" content="3"></li> <li property="itemListElement" typeof="ListItem"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">DOM scripting introduction</span></a> <meta property="position" content="4"></li> </ol> </nav> <div class="article-actions"> <button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button> <ul class="article-actions-entries"> <li class="article-actions-entry"> <div class="languages-switcher-menu open-on-focus-within"> <button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>English (US)</span></button> <div class="hidden"> <ul class="submenu language-menu " aria-labelledby="language-menu-button"> <li class=" "> <form class="submenu-item locale-redirect-setting"> <div class="group"> <label class="switch"><input type="checkbox" name="locale-redirect"><span class="slider"></span><span class="label">Remember language</span></label><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a> </div> </form></li> <li class=" "><a data-locale="de" href="https://developer-mozilla-org.translate.goog/de/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li> <li class=" "><a data-locale="fr" href="https://developer-mozilla-org.translate.goog/fr/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>Français</span></a></li> <li class=" "><a data-locale="ja" href="https://developer-mozilla-org.translate.goog/ja/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>日本語</span></a></li> <li class=" "><a data-locale="pt-BR" href="https://developer-mozilla-org.translate.goog/pt-BR/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>Português (do Brasil)</span></a></li> <li class=" "><a data-locale="ru" href="https://developer-mozilla-org.translate.goog/ru/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>Русский</span></a></li> <li class=" "><a data-locale="zh-CN" href="https://developer-mozilla-org.translate.goog/zh-CN/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>中文 (简体)</span></a></li> </ul> </div> </div></li> </ul> </div> </div> </div> </div> <div class="main-wrapper"> <div class="sidebar-container"> <aside id="sidebar-quicklinks" class="sidebar"> <button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button> <nav aria-label="Related Topics" class="sidebar-inner"> <header class="sidebar-actions"> <section class="sidebar-filter-container"> <div class="sidebar-filter "> <label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autocomplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button> </div> </section> </header> <div class="sidebar-inner-nav"> <div class="in-nav-toc"> <div class="document-toc-container"> <section class="document-toc"> <header> <h2 class="document-toc-heading">In this article</h2> </header> <ul class="document-toc-list"> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#the_important_parts_of_a_web_browser">The important parts of a web browser</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#the_document_object_model">The document object model</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#active_learning_basic_dom_manipulation">Active learning: Basic DOM manipulation</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#active_learning_a_dynamic_shopping_list">Active learning: A dynamic shopping list</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#summary">Summary</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#see_also">See also</a></li> </ul> </section> </div> </div> <div class="sidebar-body"> <ol> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Getting started modules</a></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Environment_setup?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Environment setup</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Installing basic software</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Browsing the web</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Code editors</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Dealing with files</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Command line crash course</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Your_first_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Your first website</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What will your website look like?</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML: Creating the content</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS: Styling the content</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript: Adding interactivity</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Publishing your website</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Web_standards?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web standards</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How the web works</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">The web standards model</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How browsers load websites</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Soft_skills?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Soft skills</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Research and learning</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Collaboration and teamwork</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Workflows and processes</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Succeeding in job interviews</a></li> </ol> </details></li> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Core modules</a></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Structuring content with HTML</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Basic HTML syntax</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What's in the head? Webpage metadata</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Headings and paragraphs in HTML</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Emphasis and importance</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Lists?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Lists</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Structuring documents</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Advanced text features</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Creating links</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Marking up a letter</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Structuring a page of content</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML images</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML video and audio</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Mozilla splash page</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML table basics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML table accessibility</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Structuring a planet data table</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Forms and buttons in HTML</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Debugging HTML</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS styling basics</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What is CSS?</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Getting started with CSS</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Styling a biography page</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Basic CSS selectors</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Attribute selectors</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Pseudo-classes and pseudo-elements</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Combinators</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">The box model</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Handling conflicts</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS values and units</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Sizing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Sizing items in CSS</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Backgrounds and borders</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Overflowing content</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Images_media_forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Images, media, and form elements</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Tables?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Styling tables</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Debugging CSS</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Fundamental CSS comprehension</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Creating fancy letterheaded paper</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: A cool-looking box</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Text_styling?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS text styling</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Fundamental text and font styling</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Text_styling/Styling_lists?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Styling lists</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Text_styling/Styling_links?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Styling links</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web fonts</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Typesetting a community school homepage</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS layout</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to CSS layout</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout/Floats?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Floats</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout/Positioning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Positioning</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Flexbox</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout/Grids?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS grid layout</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Responsive design</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Media query fundamentals</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Fundamental layout comprehension</a></li> </ol> </details></li> <li class="toggle"> <details open> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Dynamic scripting with JavaScript</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What is JavaScript?</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/A_first_splash?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">A first splash into JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/What_went_wrong?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What went wrong? Troubleshooting JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Variables?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Storing the information you need — Variables</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Math?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Basic math in JavaScript — numbers and operators</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Strings?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Handling text — strings in JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Useful string methods</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Arrays?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Arrays</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Silly_story_generator?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Silly story generator</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Conditionals?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Making decisions in your code — conditionals</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Loops?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Looping code</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Functions?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Functions — reusable blocks of code</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Build_your_own_function?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Build your own function</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Return_values?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Function return values</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Events?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to events</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Event bubbling</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Image_gallery?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Image gallery</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Object_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript object basics</a></li> <li><em><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" aria-current="page">DOM scripting introduction</a></em></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Network_requests?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Making network requests with JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/JSON?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Working with JSON</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Debugging JavaScript and handling errors</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript frameworks and libraries</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to client-side frameworks</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Framework main features</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Getting started with React</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Beginning our React todo list</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_components?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Componentizing our React app</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">React interactivity: Events and state</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">React interactivity: Editing, filtering, conditional rendering</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Accessibility in React</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">React resources</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Accessibility</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What is accessibility?</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility/Tooling?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Accessibility tooling and assistive technology</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML: A good basis for accessibility</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS and JavaScript accessibility best practices</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">WAI-ARIA basics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility/Multimedia?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Accessible multimedia</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility/Mobile?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Mobile accessibility</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Accessibility troubleshooting</a></li> </ol> </details></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Design_for_developers?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Design for developers</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Version_control?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Version control</a></li> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Extension modules</a></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Advanced JavaScript objects</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Object prototypes</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Object-oriented programming</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Classes in JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Object building practice</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Adding features to our bouncing balls demo</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_APIs?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Client-side web APIs</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to web APIs</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Video and Audio APIs</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Drawing graphics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Client-side storage</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Third-party APIs</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Async_JS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Asynchronous JavaScript</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introducing asynchronous JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How to use promises</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How to implement a promise-based API</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introducing workers</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Challenge: Sequencing animations</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web forms</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/Your_first_form?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Your first form</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How to structure a web form</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Basic native form controls</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">The HTML5 input types</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/Other_form_controls?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Other form controls</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/Styling_web_forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Styling web forms</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Advanced form styling</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">UI pseudo-classes</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Client-side form validation</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Sending form data</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_tools?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Understanding client-side tools</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Client-side tooling overview</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Package management basics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introducing a complete toolchain</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Deploying our app</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Server-side websites</a></summary> <ol> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Server-side first steps</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to the server side</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Client-Server Overview</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Server-side web frameworks</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Website security</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django web framework (Python)</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django introduction</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/development_environment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Setting up a Django development environment</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial: The Local Library website</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 2: Creating a skeleton website</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Models?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 3: Using models</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 4: Django admin site</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Home_page?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 5: Creating our home page</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 6: Generic list and detail views</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Sessions?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 7: Sessions framework</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Authentication?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 8: User authentication and permissions</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 9: Working with forms</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Testing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 10: Testing a Django web application</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Deployment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 11: Deploying Django to production</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django web application security</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Assessment: DIY Django mini blog</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express web framework (Node.js)</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express/Node introduction</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Setting up a Node development environment</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial: The Local Library website</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 2: Creating a skeleton website</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 4: Routes and controllers</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 5: Displaying library data</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 6: Working with forms</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 7: Deploying to production</a></li> </ol> </details></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web performance</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/why_web_performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">The "why" of web performance</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/What_is_web_performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What is web performance?</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/Perceived_performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Perceived performance</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/Measuring_performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Measuring performance</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/Multimedia?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Multimedia: Images</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/video?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Multimedia: video</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript performance optimization</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML performance optimization</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS performance optimization</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Performance/business_case_for_performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">The business case for web performance</a></li> </ol> </details></li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Testing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Testing</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Testing/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to cross-browser testing</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Strategies for carrying out testing</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Handling common HTML and CSS problems</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Implementing feature detection</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to automated testing</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Setting up your own test automation environment</a></li> </ol> </details></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Transform_animate?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Transform and animate CSS</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Extensions/Security_privacy?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Security and privacy</a></li> <li class="section">Further resources</li> <li class="toggle"> <details> <summary><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Howto?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How to solve common problems</a></summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Solve common HTML problems</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Solve common CSS problems</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Howto/Solve_JavaScript_problems?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Solve common JavaScript problems</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Howto/Web_mechanics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web mechanics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Howto/Tools_and_setup?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Tools and setup</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Howto/Design_and_accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Design and accessibility</a></li> </ol> </details></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/About?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">About</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Educators?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Resources for educators</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Changelog?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Changelog</a></li> </ol> </div> </div> <section class="place side"></section> </nav> </aside> <div class="toc-container"> <aside class="toc"> <nav> <div class="document-toc-container"> <section class="document-toc"> <header> <h2 class="document-toc-heading">In this article</h2> </header> <ul class="document-toc-list"> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#the_important_parts_of_a_web_browser">The important parts of a web browser</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#the_document_object_model">The document object model</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#active_learning_basic_dom_manipulation">Active learning: Basic DOM manipulation</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#active_learning_a_dynamic_shopping_list">Active learning: A dynamic shopping list</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#summary">Summary</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#see_also">See also</a></li> </ul> </section> </div> </nav> </aside> <section class="place side"></section> </div> </div> <main id="content" class="main-content "> <article class="main-page-content" lang="en-US"> <header> <h1>DOM scripting introduction</h1> </header> <div class="section-content"> <ul class="prev-next"> <li><a class="button secondary" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Object_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><span class="button-wrap"> Previous </span></a></li> <li><a class="button secondary" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><span class="button-wrap"> Overview: Dynamic scripting with JavaScript</span></a></li> <li><a class="button secondary" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Network_requests?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><span class="button-wrap"> Next </span></a></li> </ul> <p>When writing web pages and apps, one of the most common things you'll want to do is change the document structure in some way. This is usually done by manipulating the Document Object Model (DOM) via a set of built-in browser APIs for controlling HTML and styling information. In this article we'll introduce you to <strong>DOM scripting</strong>.</p> <figure class="table-container"> <table> <tbody> <tr> <th scope="row">Prerequisites:</th> <td>An understanding of <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Structuring_content?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML</a> and the <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Styling_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">fundamentals of CSS</a>, familiarity with JavaScript basics as covered in previous lessons.</td> </tr> <tr> <th scope="row">Learning outcomes:</th> <td> <ul> <li>What the DOM is — the browser's internal representation of the document's HTML structure as a hierarchy of objects.</li> <li>The important parts of a web browser as represented in JavaScript — <code>Navigator</code>, <code>Window</code>, and <code>Document</code>.</li> <li>How DOM nodes exist relative to each other in the DOM tree — root, parent, child, sibling, and descendant.</li> <li>Getting references to DOM nodes, creating new nodes, adding and removing nodes and attributes.</li> <li>Manipulating CSS styles with JavaScript.</li> </ul></td> </tr> </tbody> </table> </figure> </div> <section aria-labelledby="the_important_parts_of_a_web_browser"> <h2 id="the_important_parts_of_a_web_browser"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#the_important_parts_of_a_web_browser">The important parts of a web browser</a></h2> <div class="section-content"> <p>Web browsers are very complicated pieces of software with a lot of moving parts, many of which can't be controlled or manipulated by a web developer using JavaScript. You might think that such limitations are a bad thing, but browsers are locked down for good reasons, mostly centering around security. Imagine if a website could get access to your stored passwords or other sensitive information, and log into websites as if it were you?</p> <p>Despite the limitations, Web APIs still give us access to a lot of functionality that enable us to do a great many things with web pages. There are a few really obvious bits you'll reference regularly in your code — consider the following diagram, which represents the main parts of a browser directly involved in viewing web pages:</p> <p><img src="/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting/document-window-navigator.png" alt="Important parts of web browser; the document is the web page. The window includes the entire document and also the tab. The navigator is the browser, which includes the window (which includes the document) and all other windows." width="664" height="444" loading="lazy"></p> <ul> <li>The window is the browser tab that a web page is loaded into; this is represented in JavaScript by the <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Window?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Window</code></a> object. Using methods available on this object you can do things like return the window's size (see <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Window/innerWidth?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Window.innerWidth</code></a> and <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Window/innerHeight?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Window.innerHeight</code></a>), manipulate the document loaded into that window, store data specific to that document on the client-side (for example using a local database or other storage mechanism), attach an <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Events?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">event handler</a> to the current window, and more.</li> <li>The navigator represents the state and identity of the browser (i.e. the user-agent) as it exists on the web. In JavaScript, this is represented by the <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Navigator?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Navigator</code></a> object. You can use this object to retrieve things like the user's preferred language, a media stream from the user's webcam, etc.</li> <li>The document (represented by the DOM in browsers) is the actual page loaded into the window, and is represented in JavaScript by the <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Document?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Document</code></a> object. You can use this object to return and manipulate information on the HTML and CSS that comprises the document, for example get a reference to an element in the DOM, change its text content, apply new styles to it, create new elements and add them to the current element as children, or even delete it altogether.</li> </ul> <p>In this article we'll focus mostly on manipulating the document, but we'll show a few other useful bits besides.</p> </div> </section> <section aria-labelledby="the_document_object_model"> <h2 id="the_document_object_model"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#the_document_object_model">The document object model</a></h2> <div class="section-content"> <p>Let's provide a brief recap on the Document Object Model (DOM), which we also looked at earlier in the course. The document currently loaded in each one of your browser tabs is represented by a DOM. This is a "tree structure" representation created by the browser that enables the HTML structure to be easily accessed by programming languages — for example the browser itself uses it to apply styling and other information to the correct elements as it renders a page, and developers like you can manipulate the DOM with JavaScript after the page has been rendered.</p> <p>We have created an example page at <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example.html" class="external" target="_blank">dom-example.html</a> (<a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html" class="external" target="_blank">see it live also</a>). Try opening this up in your browser — it is a very simple page containing a <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/section?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><section></code></a> element inside which you can find an image, and a paragraph with a link inside. The HTML source code looks like this:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html notranslate"><code><!doctype html> <html lang="en-US"> <head> <meta charset="utf-8" /> <title>Simple DOM example</title> </head> <body> <section> <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." /> <p> Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a> </p> </section> </body> </html> </code></pre> </div> <p>The DOM on the other hand looks like this:</p> <p><img src="/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting/dom-screenshot.png" alt="Tree structure representation of Document Object Model: The top node is the doctype and HTML element. Child nodes of the HTML include head and body. Each child element is a branch. All text, even white space, is shown as well." width="717" height="396" loading="lazy"></p> <div class="notecard note"> <p><strong>Note:</strong> This DOM tree diagram was created using Ian Hickson's <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://software.hixie.ch/utilities/js/live-dom-viewer/" class="external" target="_blank">Live DOM viewer</a>.</p> </div> <p>Each entry in the tree is called a <strong>node</strong>. You can see in the diagram above that some nodes represent elements (identified as <code>HTML</code>, <code>HEAD</code>, <code>META</code> and so on) and others represent text (identified as <code>#text</code>). There are <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Node/nodeType?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">other types of nodes as well</a>, but these are the main ones you'll encounter.</p> <p>Nodes are also referred to by their position in the tree relative to other nodes:</p> <ul> <li><strong>Root node</strong>: The top node in the tree, which in the case of HTML is always the <code>HTML</code> node (other markup vocabularies like SVG and custom XML will have different root elements).</li> <li><strong>Child node</strong>: A node <em>directly</em> inside another node. For example, <code>IMG</code> is a child of <code>SECTION</code> in the above example.</li> <li><strong>Descendant node</strong>: A node <em>anywhere</em> inside another node. For example, <code>IMG</code> is a child of <code>SECTION</code> in the above example, and it is also a descendant. <code>IMG</code> is not a child of <code>BODY</code>, as it is two levels below it in the tree, but it is a descendant of <code>BODY</code>.</li> <li><strong>Parent node</strong>: A node which has another node inside it. For example, <code>BODY</code> is the parent node of <code>SECTION</code> in the above example.</li> <li><strong>Sibling nodes</strong>: Nodes that sit on the same level under the same parent node in the DOM tree. For example, <code>IMG</code> and <code>P</code> are siblings in the above example.</li> </ul> <p>It is useful to familiarize yourself with this terminology before working with the DOM, as a number of the code terms you'll come across make use of them. You'll also come across them in CSS (e.g. descendant selector, child selector).</p> </div> </section> <section aria-labelledby="active_learning_basic_dom_manipulation"> <h2 id="active_learning_basic_dom_manipulation"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#active_learning_basic_dom_manipulation">Active learning: Basic DOM manipulation</a></h2> <div class="section-content"> <p>To start learning about DOM manipulation, let's begin with a practical example.</p> <ol> <li><p>Take a local copy of the <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example.html" class="external" target="_blank">dom-example.html page</a> and the <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dinosaur.png" class="external" target="_blank">image</a> that goes along with it.</p></li> <li><p>Add a <code><script></script></code> element just above the closing <code></body></code> tag.</p></li> <li><p>To manipulate an element inside the DOM, you first need to select it and store a reference to it inside a variable. Inside your script element, add the following line:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>const link = document.querySelector("a"); </code></pre> </div></li> <li><p>Now we have the element reference stored in a variable, we can start to manipulate it using properties and methods available to it (these are defined on interfaces like <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/HTMLAnchorElement?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>HTMLAnchorElement</code></a> in the case of <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/a?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><a></code></a> element, its more general parent interface <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/HTMLElement?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>HTMLElement</code></a>, and <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Node?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Node</code></a> — which represents all nodes in a DOM). First of all, let's change the text inside the link by updating the value of the <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Node/textContent?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Node.textContent</code></a> property. Add the following line below the previous one:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>link.textContent = "Mozilla Developer Network"; </code></pre> </div></li> <li><p>We should also change the URL the link is pointing to, so that it doesn't go to the wrong place when it is clicked on. Add the following line, again at the bottom:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>link.href = "https://developer.mozilla.org"; </code></pre> </div></li> </ol> <p>Note that, as with many things in JavaScript, there are many ways to select an element and store a reference to it in a variable. <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Document/querySelector?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Document.querySelector()</code></a> is the recommended modern approach. It is convenient because it allows you to select elements using CSS selectors. The above <code>querySelector()</code> call will match the first <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/a?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><a></code></a> element that appears in the document. If you wanted to match and do things to multiple elements, you could use <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Document/querySelectorAll?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Document.querySelectorAll()</code></a>, which matches every element in the document that matches the selector, and stores references to them in an <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Arrays?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">array</a>-like object called a <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/NodeList?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>NodeList</code></a>.</p> <p>There are older methods available for grabbing element references, such as:</p> <ul> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Document/getElementById?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Document.getElementById()</code></a>, which selects an element with a given <code>id</code> attribute value, e.g. <code><p id="myId">My paragraph</p></code>. The ID is passed to the function as a parameter, i.e. <code>const elementRef = document.getElementById('myId')</code>.</li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Document/getElementsByTagName?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Document.getElementsByTagName()</code></a>, which returns an array-like object containing all the elements on the page of a given type, for example <code><p></code>s, <code><a></code>s, etc. The element type is passed to the function as a parameter, i.e. <code>const elementRefArray = document.getElementsByTagName('p')</code>.</li> </ul> <p>These two work better in older browsers than the modern methods like <code>querySelector()</code>, but are not as convenient. Have a look and see what others you can find!</p> </div> </section> <section aria-labelledby="creating_and_placing_new_nodes"> <h3 id="creating_and_placing_new_nodes"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#creating_and_placing_new_nodes">Creating and placing new nodes</a></h3> <div class="section-content"> <p>The above has given you a little taste of what you can do, but let's go further and look at how we can create new elements.</p> <ol> <li><p>Going back to the current example, let's start by grabbing a reference to our <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/section?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><section></code></a> element — add the following code at the bottom of your existing script (do the same with the other lines too):</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>const sect = document.querySelector("section"); </code></pre> </div></li> <li><p>Now let's create a new paragraph using <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Document/createElement?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Document.createElement()</code></a> and give it some text content in the same way as before:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>const para = document.createElement("p"); para.textContent = "We hope you enjoyed the ride."; </code></pre> </div></li> <li><p>You can now append the new paragraph at the end of the section using <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Node/appendChild?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Node.appendChild()</code></a>:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>sect.appendChild(para); </code></pre> </div></li> <li><p>Finally for this part, let's add a text node to the paragraph the link sits inside, to round off the sentence nicely. First we will create the text node using <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Document/createTextNode?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Document.createTextNode()</code></a>:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>const text = document.createTextNode( " — the premier source for web development knowledge.", ); </code></pre> </div></li> <li><p>Now we'll grab a reference to the paragraph the link is inside, and append the text node to it:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>const linkPara = document.querySelector("p"); linkPara.appendChild(text); </code></pre> </div></li> </ol> <p>That's most of what you need for adding nodes to the DOM — you'll make a lot of use of these methods when building dynamic interfaces (we'll look at some examples later).</p> </div> </section> <section aria-labelledby="moving_and_removing_elements"> <h3 id="moving_and_removing_elements"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#moving_and_removing_elements">Moving and removing elements</a></h3> <div class="section-content"> <p>There may be times when you want to move nodes, or delete them from the DOM altogether. This is perfectly possible.</p> <p>If we wanted to move the paragraph with the link inside it to the bottom of the section, we could do this:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>sect.appendChild(linkPara); </code></pre> </div> <p>This moves the paragraph down to the bottom of the section. You might have thought it would make a second copy of it, but this is not the case — <code>linkPara</code> is a reference to the one and only copy of that paragraph. If you wanted to make a copy and add that as well, you'd need to use <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Node/cloneNode?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Node.cloneNode()</code></a> instead.</p> <p>Removing a node is pretty simple as well, at least when you have a reference to the node to be removed and its parent. In our current case, we just use <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Node/removeChild?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Node.removeChild()</code></a>, like this:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>sect.removeChild(linkPara); </code></pre> </div> <p>When you want to remove a node based only on a reference to itself, which is fairly common, you can use <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Element/remove?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Element.remove()</code></a>:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>linkPara.remove(); </code></pre> </div> <p>This method is not supported in older browsers. They have no method to tell a node to remove itself, so you'd have to do the following:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>linkPara.parentNode.removeChild(linkPara); </code></pre> </div> <p>Have a go at adding the above lines to your code.</p> </div> </section> <section aria-labelledby="manipulating_styles"> <h3 id="manipulating_styles"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#manipulating_styles">Manipulating styles</a></h3> <div class="section-content"> <p>It is possible to manipulate CSS styles via JavaScript in a variety of ways.</p> <p>To start with, you can get a list of all the stylesheets attached to a document using <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Document/styleSheets?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Document.stylesheets</code></a>, which returns an array-like object with <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/CSSStyleSheet?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>CSSStyleSheet</code></a> objects. You can then add/remove styles as wished. However, we're not going to expand on those features because they are a somewhat archaic and difficult way to manipulate style. There are much easier ways.</p> <p>The first way is to add inline styles directly onto elements you want to dynamically style. This is done with the <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/HTMLElement/style?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>HTMLElement.style</code></a> property, which contains inline styling information for each element in the document. You can set properties of this object to directly update element styles.</p> <ol> <li><p>As an example, try adding these lines to our ongoing example:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>para.style.color = "white"; para.style.backgroundColor = "black"; para.style.padding = "10px"; para.style.width = "250px"; para.style.textAlign = "center"; </code></pre> </div></li> <li><p>Reload the page and you'll see that the styles have been applied to the paragraph. If you look at that paragraph in your browser's <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html" class="external" target="_blank">Page Inspector/DOM inspector</a>, you'll see that these lines are indeed adding inline styles to the document:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html notranslate"><code><p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;"> We hope you enjoyed the ride. </p> </code></pre> </div></li> </ol> <div class="notecard note"> <p><strong>Note:</strong> Notice how the JavaScript property versions of the CSS styles are written in <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Glossary/Camel_case?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">lower camel case</a> whereas the CSS versions are hyphenated (<a href="https://developer-mozilla-org.translate.goog/en-US/docs/Glossary/Kebab_case?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">kebab-case</a>) (e.g. <code>backgroundColor</code> versus <code>background-color</code>). Make sure you don't get these mixed up, otherwise it won't work.</p> </div> <p>There is another common way to dynamically manipulate styles on your document, which we'll look at now.</p> <ol> <li><p>Delete the previous five lines you added to the JavaScript.</p></li> <li><p>Add the following inside your HTML <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/head?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><head></code></a>:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html notranslate"><code><style> .highlight { color: white; background-color: black; padding: 10px; width: 250px; text-align: center; } </style> </code></pre> </div></li> <li><p>Now we'll turn to a very useful method for general HTML manipulation — <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Element/setAttribute?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Element.setAttribute()</code></a> — this takes two arguments, the attribute you want to set on the element, and the value you want to set it to. In this case we will set a class name of highlight on our paragraph:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>para.setAttribute("class", "highlight"); </code></pre> </div></li> <li><p>Refresh your page, and you'll see no change — the CSS is still applied to the paragraph, but this time by giving it a class that is selected by our CSS rule, not as inline CSS styles.</p></li> </ol> <p>Which method you choose is up to you; both have their advantages and disadvantages. The first method takes less setup and is good for simple uses, whereas the second method is more purist (no mixing CSS and JavaScript, no inline styles, which are seen as a bad practice). As you start building larger and more involved apps, you will probably start using the second method more, but it is really up to you.</p> <p>At this point, we haven't really done anything useful! There is no point using JavaScript to create static content — you might as well just write it into your HTML and not use JavaScript. It is more complex than HTML, and creating your content with JavaScript also has other issues attached to it (such as not being readable by search engines).</p> <p>In the next section we will look at a more practical use of DOM APIs.</p> <div class="notecard note"> <p><strong>Note:</strong> You can find our <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example-manipulated.html" class="external" target="_blank">finished version of the dom-example.html</a> demo on GitHub (<a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html" class="external" target="_blank">see it live also</a>).</p> </div> </div> </section> <section aria-labelledby="active_learning_a_dynamic_shopping_list"> <h2 id="active_learning_a_dynamic_shopping_list"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#active_learning_a_dynamic_shopping_list">Active learning: A dynamic shopping list</a></h2> <div class="section-content"> <p>In this challenge we want to make a simple shopping list example that allows you to dynamically add items to the list using a form input and button. When you add an item to the input and press the button:</p> <ul> <li>The item should appear in the list.</li> <li>Each item should be given a button that can be pressed to delete that item off the list.</li> <li>The input should be emptied and focused ready for you to enter another item.</li> </ul> <p>The finished demo will look something like this:</p> <p><img src="/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting/shopping-list.png" alt="Demo layout of a shopping list. A 'my shopping list' header followed by 'Enter a new item' with an input field and 'add item' button. The list of already added items is below, each with a corresponding delete button. " width="369" height="191" loading="lazy"></p> <p>To complete the exercise, follow the steps below, and make sure that the list behaves as described above.</p> <ol> <li>To start with, download a copy of our <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list.html" class="external" target="_blank">shopping-list.html</a> starting file and make a copy of it somewhere. You'll see that it has some minimal CSS, a div with a label, input, and button, and an empty list and <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/script?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><script></code></a> element. You'll be making all your additions inside the script.</li> <li>Create three variables that hold references to the list (<a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/ul?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><ul></code></a>), <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/input?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><input></code></a>, and <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/button?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><button></code></a> elements.</li> <li>Create a <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Functions?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">function</a> that will run in response to the button being clicked.</li> <li>Inside the function body, start off by storing the current <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/HTMLInputElement/value?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">value</a> of the input element in a variable.</li> <li>Next, empty the input element by setting its value to an empty string — <code>''</code>.</li> <li>Create three new elements — a list item (<a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/li?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><li></code></a>), <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/span?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><span></code></a>, and <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/button?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><button></code></a>, and store them in variables.</li> <li>Append the span and the button as children of the list item.</li> <li>Set the text content of the span to the input element value you saved earlier, and the text content of the button to 'Delete'.</li> <li>Append the list item as a child of the list.</li> <li>Attach an event handler to the delete button so that, when clicked, it will delete the entire list item (<code><li>...</li></code>).</li> <li>Finally, use the <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/HTMLElement/focus?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>focus()</code></a> method to focus the input element ready for entering the next shopping list item.</li> </ol> <div class="notecard note"> <p><strong>Note:</strong> If you get really stuck, have a look at our <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list-finished.html" class="external" target="_blank">finished shopping list</a> (<a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html" class="external" target="_blank">see it running live also</a>).</p> </div> </div> </section> <section aria-labelledby="summary"> <h2 id="summary"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#summary">Summary</a></h2> <div class="section-content"> <p>We have reached the end of our study of document and DOM manipulation. At this point you should understand what the important parts of a web browser are with respect to controlling documents and other aspects of the user's web experience. Most importantly, you should understand what the Document Object Model is, and how to manipulate it to create useful functionality.</p> </div> </section> <section aria-labelledby="see_also"> <h2 id="see_also"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#see_also">See also</a></h2> <div class="section-content"> <ul> <li>There are lots more features you can use to manipulate your documents. Check out some of our references and see what you can discover: <ul> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Document?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Document</code></a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Window?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Window</code></a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Node?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>Node</code></a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/HTMLElement?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>HTMLElement</code></a>, <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/HTMLInputElement?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>HTMLInputElement</code></a>, <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/HTMLImageElement?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>HTMLImageElement</code></a>, etc.</li> </ul></li> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://explainers.dev/dom-scripting/" class="external" target="_blank">DOM Scripting</a>, explainers.dev</li> </ul> <ul class="prev-next"> <li><a class="button secondary" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Object_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><span class="button-wrap"> Previous </span></a></li> <li><a class="button secondary" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><span class="button-wrap"> Overview: Dynamic scripting with JavaScript</span></a></li> <li><a class="button secondary" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/Network_requests?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><span class="button-wrap"> Next </span></a></li> </ul> </div> </section> </article> <aside class="article-footer"> <div class="article-footer-inner"> <div class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewbox="0 0 162 162" fill="none" role="none"> <mask id="b" fill="#fff"> <path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path> </mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"> <path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path> </g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"> <path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path> </g><defs> <clippath id="c"> <path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path> </clippath> <clippath id="d"> <path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path> </clippath> <lineargradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientunits="userSpaceOnUse"> <stop stop-color="#086DFC"></stop> <stop offset="0.246" stop-color="#2C81FA"></stop> <stop offset="0.516" stop-color="#5497F8"></stop> <stop offset="0.821" stop-color="#80B0F6"></stop> <stop offset="1" stop-color="#9ABFF5"></stop> </lineargradient> </defs> </svg> </div> <h2>Help improve MDN</h2> <fieldset class="feedback"> <label>Was this page helpful to you?</label> <div class="button-container"> <button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button> </div> </fieldset><a class="contribute" href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>. <p class="last-modified-date">This page was last modified on <time datetime="2025-01-29T15:54:45.000Z">Jan 29, 2025</time> by <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting/contributors.txt?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" rel="nofollow">MDN contributors</a>.</p> <div id="on-github" class="on-github"> <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md?plain%3D1" title="Folder: en-us/learn_web_development/core/scripting/dom_scripting (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/content/issues/new?template%3Dpage-report.yml%26mdn-url%3Dhttps%253A%252F%252Fdeveloper.mozilla.org%252Fen-US%252Fdocs%252FLearn_web_development%252FCore%252FScripting%252FDOM_scripting%26metadata%3D%253C%2521--%2BDo%2Bnot%2Bmake%2Bchanges%2Bbelow%2Bthis%2Bline%2B--%253E%250A%253Cdetails%253E%250A%253Csummary%253EPage%2Breport%2Bdetails%253C%252Fsummary%253E%250A%250A*%2BFolder%253A%2B%2560en-us%252Flearn_web_development%252Fcore%252Fscripting%252Fdom_scripting%2560%250A*%2BMDN%2BURL%253A%2Bhttps%253A%252F%252Fdeveloper.mozilla.org%252Fen-US%252Fdocs%252FLearn_web_development%252FCore%252FScripting%252FDOM_scripting%250A*%2BGitHub%2BURL%253A%2Bhttps%253A%252F%252Fgithub.com%252Fmdn%252Fcontent%252Fblob%252Fmain%252Ffiles%252Fen-us%252Flearn_web_development%252Fcore%252Fscripting%252Fdom_scripting%252Findex.md%250A*%2BLast%2Bcommit%253A%2Bhttps%253A%252F%252Fgithub.com%252Fmdn%252Fcontent%252Fcommit%252Fef472690cc383fc77d7aa53ddec036b5efa3b526%250A*%2BDocument%2Blast%2Bmodified%253A%2B2025-01-29T15%253A54%253A45.000Z%250A%250A%253C%252Fdetails%253E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a> </div> </div> </aside> </main> </div> </div> <footer id="nav-footer" class="page-footer"> <div class="page-footer-grid"> <div class="page-footer-logo-col"> <a href="https://developer-mozilla-org.translate.goog/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="mdn-footer-logo" aria-label="MDN homepage"> <svg width="48" height="17" viewbox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path> </svg></a> <p>Your blueprint for a better internet.</p> <ul class="social-icons"> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://bsky.app/profile/developer.mozilla.org" target="_blank" rel="me noopener noreferrer"><span class="icon icon-bluesky"></span><span class="visually-hidden">MDN on Bluesky</span></a></li> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/blog/rss.xml?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li> </ul> </div> <div class="page-footer-nav-col-1"> <h2 class="footer-nav-heading">MDN</h2> <ul class="footer-nav-list"> <li class="footer-nav-item"><a href="https://developer-mozilla-org.translate.goog/en-US/about?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">About</a></li> <li class="footer-nav-item"><a href="https://developer-mozilla-org.translate.goog/en-US/blog/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Blog</a></li> <li class="footer-nav-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/en-US/careers/listings/?team%3DProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li> <li class="footer-nav-item"><a href="https://developer-mozilla-org.translate.goog/en-US/advertising?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Advertise with us</a></li> </ul> </div> <div class="page-footer-nav-col-2"> <h2 class="footer-nav-heading">Support</h2> <ul class="footer-nav-list"> <li class="footer-nav-item"><a class="footer-nav-link" href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://support.mozilla.org/products/mdn-plus">Product help</a></li> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/MDN/Community/Issues?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Report an issue</a></li> </ul> </div> <div class="page-footer-nav-col-3"> <h2 class="footer-nav-heading">Our communities</h2> <ul class="footer-nav-list"> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/en-US/community?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">MDN Community</a></li> <li class="footer-nav-item"><a class="footer-nav-link" href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/discord?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" target="_blank" rel="noopener noreferrer">MDN Chat</a></li> </ul> </div> <div class="page-footer-nav-col-4"> <h2 class="footer-nav-heading">Developers</h2> <ul class="footer-nav-list"> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web Technologies</a></li> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Learn Web Development</a></li> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/en-US/plus?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">MDN Plus</a></li> <li class="footer-nav-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li> </ul> </div> <div class="page-footer-moz"> <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"> <svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewbox="0 0 267.431 62.607"> <path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path> </svg></a> <ul class="footer-moz-list"> <li class="footer-moz-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li> <li class="footer-moz-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/privacy/websites/%23cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li> <li class="footer-moz-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li> <li class="footer-moz-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li> </ul> </div> <div class="page-footer-legal"> <p id="license" class="page-footer-legal-text">Visit <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://foundation.mozilla.org/">Mozilla Foundation</a>.<br> Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="https://developer-mozilla-org.translate.goog/en-US/docs/MDN/Writing_guidelines/Attrib_copyright_license?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">a Creative Commons license</a>.</p> </div> </div> </footer> </div> <script type="application/json" id="hydration">{"url":"/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting/Object_basics\"><span class=\"button-wrap\"> Previous </span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting\"><span class=\"button-wrap\"> Overview: Dynamic scripting with JavaScript</span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting/Network_requests\"><span class=\"button-wrap\"> Next </span></a></li></ul>\n<p>When writing web pages and apps, one of the most common things you'll want to do is change the document structure in some way. This is usually done by manipulating the Document Object Model (DOM) via a set of built-in browser APIs for controlling HTML and styling information. In this article we'll introduce you to <strong>DOM scripting</strong>.</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">Prerequisites:</th>\n <td>An understanding of <a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content\">HTML</a> and the <a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics\">fundamentals of CSS</a>, familiarity with JavaScript basics as covered in previous lessons.</td>\n </tr>\n <tr>\n <th scope=\"row\">Learning outcomes:</th>\n <td>\n <ul>\n <li>What the DOM is — the browser's internal representation of the document's HTML structure as a hierarchy of objects.</li>\n <li>The important parts of a web browser as represented in JavaScript — <code>Navigator</code>, <code>Window</code>, and <code>Document</code>.</li>\n <li>How DOM nodes exist relative to each other in the DOM tree — root, parent, child, sibling, and descendant.</li>\n <li>Getting references to DOM nodes, creating new nodes, adding and removing nodes and attributes.</li>\n <li>Manipulating CSS styles with JavaScript.</li>\n </ul>\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"the_important_parts_of_a_web_browser","title":"The important parts of a web browser","isH3":false,"content":"<p>Web browsers are very complicated pieces of software with a lot of moving parts, many of which can't be controlled or manipulated by a web developer using JavaScript. You might think that such limitations are a bad thing, but browsers are locked down for good reasons, mostly centering around security. Imagine if a website could get access to your stored passwords or other sensitive information, and log into websites as if it were you?</p>\n<p>Despite the limitations, Web APIs still give us access to a lot of functionality that enable us to do a great many things with web pages. There are a few really obvious bits you'll reference regularly in your code — consider the following diagram, which represents the main parts of a browser directly involved in viewing web pages:</p>\n<p><img src=\"/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting/document-window-navigator.png\" alt=\"Important parts of web browser; the document is the web page. The window includes the entire document and also the tab. The navigator is the browser, which includes the window (which includes the document) and all other windows.\" width=\"664\" height=\"444\" loading=\"lazy\"></p>\n<ul>\n<li>The window is the browser tab that a web page is loaded into; this is represented in JavaScript by the <a href=\"/en-US/docs/Web/API/Window\"><code>Window</code></a> object. Using methods available on this object you can do things like return the window's size (see <a href=\"/en-US/docs/Web/API/Window/innerWidth\"><code>Window.innerWidth</code></a> and <a href=\"/en-US/docs/Web/API/Window/innerHeight\"><code>Window.innerHeight</code></a>), manipulate the document loaded into that window, store data specific to that document on the client-side (for example using a local database or other storage mechanism), attach an <a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Events\">event handler</a> to the current window, and more.</li>\n<li>The navigator represents the state and identity of the browser (i.e. the user-agent) as it exists on the web. In JavaScript, this is represented by the <a href=\"/en-US/docs/Web/API/Navigator\"><code>Navigator</code></a> object. You can use this object to retrieve things like the user's preferred language, a media stream from the user's webcam, etc.</li>\n<li>The document (represented by the DOM in browsers) is the actual page loaded into the window, and is represented in JavaScript by the <a href=\"/en-US/docs/Web/API/Document\"><code>Document</code></a> object. You can use this object to return and manipulate information on the HTML and CSS that comprises the document, for example get a reference to an element in the DOM, change its text content, apply new styles to it, create new elements and add them to the current element as children, or even delete it altogether.</li>\n</ul>\n<p>In this article we'll focus mostly on manipulating the document, but we'll show a few other useful bits besides.</p>"}},{"type":"prose","value":{"id":"the_document_object_model","title":"The document object model","isH3":false,"content":"<p>Let's provide a brief recap on the Document Object Model (DOM), which we also looked at earlier in the course. The document currently loaded in each one of your browser tabs is represented by a DOM. This is a \"tree structure\" representation created by the browser that enables the HTML structure to be easily accessed by programming languages — for example the browser itself uses it to apply styling and other information to the correct elements as it renders a page, and developers like you can manipulate the DOM with JavaScript after the page has been rendered.</p>\n<p>We have created an example page at <a href=\"https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example.html\" class=\"external\" target=\"_blank\">dom-example.html</a> (<a href=\"https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html\" class=\"external\" target=\"_blank\">see it live also</a>). Try opening this up in your browser — it is a very simple page containing a <a href=\"/en-US/docs/Web/HTML/Element/section\"><code><section></code></a> element inside which you can find an image, and a paragraph with a link inside. The HTML source code looks like this:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><!doctype html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <title>Simple DOM example</title>\n </head>\n <body>\n <section>\n <img\n src=\"dinosaur.png\"\n alt=\"A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.\" />\n <p>\n Here we will add a link to the\n <a href=\"https://www.mozilla.org/\">Mozilla homepage</a>\n </p>\n </section>\n </body>\n</html>\n</code></pre></div>\n<p>The DOM on the other hand looks like this:</p>\n<p><img src=\"/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting/dom-screenshot.png\" alt=\"Tree structure representation of Document Object Model: The top node is the doctype and HTML element. Child nodes of the HTML include head and body. Each child element is a branch. All text, even white space, is shown as well.\" width=\"717\" height=\"396\" loading=\"lazy\"></p>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nThis DOM tree diagram was created using Ian Hickson's <a href=\"https://software.hixie.ch/utilities/js/live-dom-viewer/\" class=\"external\" target=\"_blank\">Live DOM viewer</a>.</p>\n</div>\n<p>Each entry in the tree is called a <strong>node</strong>. You can see in the diagram above that some nodes represent elements (identified as <code>HTML</code>, <code>HEAD</code>, <code>META</code> and so on) and others represent text (identified as <code>#text</code>). There are <a href=\"/en-US/docs/Web/API/Node/nodeType\">other types of nodes as well</a>, but these are the main ones you'll encounter.</p>\n<p>Nodes are also referred to by their position in the tree relative to other nodes:</p>\n<ul>\n<li><strong>Root node</strong>: The top node in the tree, which in the case of HTML is always the <code>HTML</code> node (other markup vocabularies like SVG and custom XML will have different root elements).</li>\n<li><strong>Child node</strong>: A node <em>directly</em> inside another node. For example, <code>IMG</code> is a child of <code>SECTION</code> in the above example.</li>\n<li><strong>Descendant node</strong>: A node <em>anywhere</em> inside another node. For example, <code>IMG</code> is a child of <code>SECTION</code> in the above example, and it is also a descendant. <code>IMG</code> is not a child of <code>BODY</code>, as it is two levels below it in the tree, but it is a descendant of <code>BODY</code>.</li>\n<li><strong>Parent node</strong>: A node which has another node inside it. For example, <code>BODY</code> is the parent node of <code>SECTION</code> in the above example.</li>\n<li><strong>Sibling nodes</strong>: Nodes that sit on the same level under the same parent node in the DOM tree. For example, <code>IMG</code> and <code>P</code> are siblings in the above example.</li>\n</ul>\n<p>It is useful to familiarize yourself with this terminology before working with the DOM, as a number of the code terms you'll come across make use of them. You'll also come across them in CSS (e.g. descendant selector, child selector).</p>"}},{"type":"prose","value":{"id":"active_learning_basic_dom_manipulation","title":"Active learning: Basic DOM manipulation","isH3":false,"content":"<p>To start learning about DOM manipulation, let's begin with a practical example.</p>\n<ol>\n<li>\n<p>Take a local copy of the <a href=\"https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example.html\" class=\"external\" target=\"_blank\">dom-example.html page</a> and the <a href=\"https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dinosaur.png\" class=\"external\" target=\"_blank\">image</a> that goes along with it.</p>\n</li>\n<li>\n<p>Add a <code><script></script></code> element just above the closing <code></body></code> tag.</p>\n</li>\n<li>\n<p>To manipulate an element inside the DOM, you first need to select it and store a reference to it inside a variable. Inside your script element, add the following line:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const link = document.querySelector(\"a\");\n</code></pre></div>\n</li>\n<li>\n<p>Now we have the element reference stored in a variable, we can start to manipulate it using properties and methods available to it (these are defined on interfaces like <a href=\"/en-US/docs/Web/API/HTMLAnchorElement\"><code>HTMLAnchorElement</code></a> in the case of <a href=\"/en-US/docs/Web/HTML/Element/a\"><code><a></code></a> element, its more general parent interface <a href=\"/en-US/docs/Web/API/HTMLElement\"><code>HTMLElement</code></a>, and <a href=\"/en-US/docs/Web/API/Node\"><code>Node</code></a> — which represents all nodes in a DOM). First of all, let's change the text inside the link by updating the value of the <a href=\"/en-US/docs/Web/API/Node/textContent\"><code>Node.textContent</code></a> property. Add the following line below the previous one:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>link.textContent = \"Mozilla Developer Network\";\n</code></pre></div>\n</li>\n<li>\n<p>We should also change the URL the link is pointing to, so that it doesn't go to the wrong place when it is clicked on. Add the following line, again at the bottom:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>link.href = \"https://developer.mozilla.org\";\n</code></pre></div>\n</li>\n</ol>\n<p>Note that, as with many things in JavaScript, there are many ways to select an element and store a reference to it in a variable. <a href=\"/en-US/docs/Web/API/Document/querySelector\"><code>Document.querySelector()</code></a> is the recommended modern approach. It is convenient because it allows you to select elements using CSS selectors. The above <code>querySelector()</code> call will match the first <a href=\"/en-US/docs/Web/HTML/Element/a\"><code><a></code></a> element that appears in the document. If you wanted to match and do things to multiple elements, you could use <a href=\"/en-US/docs/Web/API/Document/querySelectorAll\"><code>Document.querySelectorAll()</code></a>, which matches every element in the document that matches the selector, and stores references to them in an <a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Arrays\">array</a>-like object called a <a href=\"/en-US/docs/Web/API/NodeList\"><code>NodeList</code></a>.</p>\n<p>There are older methods available for grabbing element references, such as:</p>\n<ul>\n<li><a href=\"/en-US/docs/Web/API/Document/getElementById\"><code>Document.getElementById()</code></a>, which selects an element with a given <code>id</code> attribute value, e.g. <code><p id=\"myId\">My paragraph</p></code>. The ID is passed to the function as a parameter, i.e. <code>const elementRef = document.getElementById('myId')</code>.</li>\n<li><a href=\"/en-US/docs/Web/API/Document/getElementsByTagName\"><code>Document.getElementsByTagName()</code></a>, which returns an array-like object containing all the elements on the page of a given type, for example <code><p></code>s, <code><a></code>s, etc. The element type is passed to the function as a parameter, i.e. <code>const elementRefArray = document.getElementsByTagName('p')</code>.</li>\n</ul>\n<p>These two work better in older browsers than the modern methods like <code>querySelector()</code>, but are not as convenient. Have a look and see what others you can find!</p>"}},{"type":"prose","value":{"id":"creating_and_placing_new_nodes","title":"Creating and placing new nodes","isH3":true,"content":"<p>The above has given you a little taste of what you can do, but let's go further and look at how we can create new elements.</p>\n<ol>\n<li>\n<p>Going back to the current example, let's start by grabbing a reference to our <a href=\"/en-US/docs/Web/HTML/Element/section\"><code><section></code></a> element — add the following code at the bottom of your existing script (do the same with the other lines too):</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const sect = document.querySelector(\"section\");\n</code></pre></div>\n</li>\n<li>\n<p>Now let's create a new paragraph using <a href=\"/en-US/docs/Web/API/Document/createElement\"><code>Document.createElement()</code></a> and give it some text content in the same way as before:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const para = document.createElement(\"p\");\npara.textContent = \"We hope you enjoyed the ride.\";\n</code></pre></div>\n</li>\n<li>\n<p>You can now append the new paragraph at the end of the section using <a href=\"/en-US/docs/Web/API/Node/appendChild\"><code>Node.appendChild()</code></a>:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>sect.appendChild(para);\n</code></pre></div>\n</li>\n<li>\n<p>Finally for this part, let's add a text node to the paragraph the link sits inside, to round off the sentence nicely. First we will create the text node using <a href=\"/en-US/docs/Web/API/Document/createTextNode\"><code>Document.createTextNode()</code></a>:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const text = document.createTextNode(\n \" — the premier source for web development knowledge.\",\n);\n</code></pre></div>\n</li>\n<li>\n<p>Now we'll grab a reference to the paragraph the link is inside, and append the text node to it:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const linkPara = document.querySelector(\"p\");\nlinkPara.appendChild(text);\n</code></pre></div>\n</li>\n</ol>\n<p>That's most of what you need for adding nodes to the DOM — you'll make a lot of use of these methods when building dynamic interfaces (we'll look at some examples later).</p>"}},{"type":"prose","value":{"id":"moving_and_removing_elements","title":"Moving and removing elements","isH3":true,"content":"<p>There may be times when you want to move nodes, or delete them from the DOM altogether. This is perfectly possible.</p>\n<p>If we wanted to move the paragraph with the link inside it to the bottom of the section, we could do this:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>sect.appendChild(linkPara);\n</code></pre></div>\n<p>This moves the paragraph down to the bottom of the section. You might have thought it would make a second copy of it, but this is not the case — <code>linkPara</code> is a reference to the one and only copy of that paragraph. If you wanted to make a copy and add that as well, you'd need to use <a href=\"/en-US/docs/Web/API/Node/cloneNode\"><code>Node.cloneNode()</code></a> instead.</p>\n<p>Removing a node is pretty simple as well, at least when you have a reference to the node to be removed and its parent. In our current case, we just use <a href=\"/en-US/docs/Web/API/Node/removeChild\"><code>Node.removeChild()</code></a>, like this:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>sect.removeChild(linkPara);\n</code></pre></div>\n<p>When you want to remove a node based only on a reference to itself, which is fairly common, you can use <a href=\"/en-US/docs/Web/API/Element/remove\"><code>Element.remove()</code></a>:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>linkPara.remove();\n</code></pre></div>\n<p>This method is not supported in older browsers. They have no method to tell a node to remove itself, so you'd have to do the following:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>linkPara.parentNode.removeChild(linkPara);\n</code></pre></div>\n<p>Have a go at adding the above lines to your code.</p>"}},{"type":"prose","value":{"id":"manipulating_styles","title":"Manipulating styles","isH3":true,"content":"<p>It is possible to manipulate CSS styles via JavaScript in a variety of ways.</p>\n<p>To start with, you can get a list of all the stylesheets attached to a document using <a href=\"/en-US/docs/Web/API/Document/styleSheets\"><code>Document.stylesheets</code></a>, which returns an array-like object with <a href=\"/en-US/docs/Web/API/CSSStyleSheet\"><code>CSSStyleSheet</code></a> objects. You can then add/remove styles as wished. However, we're not going to expand on those features because they are a somewhat archaic and difficult way to manipulate style. There are much easier ways.</p>\n<p>The first way is to add inline styles directly onto elements you want to dynamically style. This is done with the <a href=\"/en-US/docs/Web/API/HTMLElement/style\"><code>HTMLElement.style</code></a> property, which contains inline styling information for each element in the document. You can set properties of this object to directly update element styles.</p>\n<ol>\n<li>\n<p>As an example, try adding these lines to our ongoing example:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>para.style.color = \"white\";\npara.style.backgroundColor = \"black\";\npara.style.padding = \"10px\";\npara.style.width = \"250px\";\npara.style.textAlign = \"center\";\n</code></pre></div>\n</li>\n<li>\n<p>Reload the page and you'll see that the styles have been applied to the paragraph. If you look at that paragraph in your browser's <a href=\"https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html\" class=\"external\" target=\"_blank\">Page Inspector/DOM inspector</a>, you'll see that these lines are indeed adding inline styles to the document:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><p\n style=\"color: white; background-color: black; padding: 10px; width: 250px; text-align: center;\">\n We hope you enjoyed the ride.\n</p>\n</code></pre></div>\n</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nNotice how the JavaScript property versions of the CSS styles are written in <a href=\"/en-US/docs/Glossary/Camel_case\">lower camel case</a> whereas the CSS versions are hyphenated (<a href=\"/en-US/docs/Glossary/Kebab_case\">kebab-case</a>) (e.g. <code>backgroundColor</code> versus <code>background-color</code>). Make sure you don't get these mixed up, otherwise it won't work.</p>\n</div>\n<p>There is another common way to dynamically manipulate styles on your document, which we'll look at now.</p>\n<ol>\n<li>\n<p>Delete the previous five lines you added to the JavaScript.</p>\n</li>\n<li>\n<p>Add the following inside your HTML <a href=\"/en-US/docs/Web/HTML/Element/head\"><code><head></code></a>:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><style>\n .highlight {\n color: white;\n background-color: black;\n padding: 10px;\n width: 250px;\n text-align: center;\n }\n</style>\n</code></pre></div>\n</li>\n<li>\n<p>Now we'll turn to a very useful method for general HTML manipulation — <a href=\"/en-US/docs/Web/API/Element/setAttribute\"><code>Element.setAttribute()</code></a> — this takes two arguments, the attribute you want to set on the element, and the value you want to set it to. In this case we will set a class name of highlight on our paragraph:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>para.setAttribute(\"class\", \"highlight\");\n</code></pre></div>\n</li>\n<li>\n<p>Refresh your page, and you'll see no change — the CSS is still applied to the paragraph, but this time by giving it a class that is selected by our CSS rule, not as inline CSS styles.</p>\n</li>\n</ol>\n<p>Which method you choose is up to you; both have their advantages and disadvantages. The first method takes less setup and is good for simple uses, whereas the second method is more purist (no mixing CSS and JavaScript, no inline styles, which are seen as a bad practice). As you start building larger and more involved apps, you will probably start using the second method more, but it is really up to you.</p>\n<p>At this point, we haven't really done anything useful! There is no point using JavaScript to create static content — you might as well just write it into your HTML and not use JavaScript. It is more complex than HTML, and creating your content with JavaScript also has other issues attached to it (such as not being readable by search engines).</p>\n<p>In the next section we will look at a more practical use of DOM APIs.</p>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nYou can find our <a href=\"https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example-manipulated.html\" class=\"external\" target=\"_blank\">finished version of the dom-example.html</a> demo on GitHub (<a href=\"https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html\" class=\"external\" target=\"_blank\">see it live also</a>).</p>\n</div>"}},{"type":"prose","value":{"id":"active_learning_a_dynamic_shopping_list","title":"Active learning: A dynamic shopping list","isH3":false,"content":"<p>In this challenge we want to make a simple shopping list example that allows you to dynamically add items to the list using a form input and button. When you add an item to the input and press the button:</p>\n<ul>\n<li>The item should appear in the list.</li>\n<li>Each item should be given a button that can be pressed to delete that item off the list.</li>\n<li>The input should be emptied and focused ready for you to enter another item.</li>\n</ul>\n<p>The finished demo will look something like this:</p>\n<p><img src=\"/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting/shopping-list.png\" alt=\"Demo layout of a shopping list. A 'my shopping list' header followed by 'Enter a new item' with an input field and 'add item' button. The list of already added items is below, each with a corresponding delete button. \" width=\"369\" height=\"191\" loading=\"lazy\"></p>\n<p>To complete the exercise, follow the steps below, and make sure that the list behaves as described above.</p>\n<ol>\n<li>To start with, download a copy of our <a href=\"https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list.html\" class=\"external\" target=\"_blank\">shopping-list.html</a> starting file and make a copy of it somewhere. You'll see that it has some minimal CSS, a div with a label, input, and button, and an empty list and <a href=\"/en-US/docs/Web/HTML/Element/script\"><code><script></code></a> element. You'll be making all your additions inside the script.</li>\n<li>Create three variables that hold references to the list (<a href=\"/en-US/docs/Web/HTML/Element/ul\"><code><ul></code></a>), <a href=\"/en-US/docs/Web/HTML/Element/input\"><code><input></code></a>, and <a href=\"/en-US/docs/Web/HTML/Element/button\"><code><button></code></a> elements.</li>\n<li>Create a <a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Functions\">function</a> that will run in response to the button being clicked.</li>\n<li>Inside the function body, start off by storing the current <a href=\"/en-US/docs/Web/API/HTMLInputElement/value\">value</a> of the input element in a variable.</li>\n<li>Next, empty the input element by setting its value to an empty string — <code>''</code>.</li>\n<li>Create three new elements — a list item (<a href=\"/en-US/docs/Web/HTML/Element/li\"><code><li></code></a>), <a href=\"/en-US/docs/Web/HTML/Element/span\"><code><span></code></a>, and <a href=\"/en-US/docs/Web/HTML/Element/button\"><code><button></code></a>, and store them in variables.</li>\n<li>Append the span and the button as children of the list item.</li>\n<li>Set the text content of the span to the input element value you saved earlier, and the text content of the button to 'Delete'.</li>\n<li>Append the list item as a child of the list.</li>\n<li>Attach an event handler to the delete button so that, when clicked, it will delete the entire list item (<code><li>...</li></code>).</li>\n<li>Finally, use the <a href=\"/en-US/docs/Web/API/HTMLElement/focus\"><code>focus()</code></a> method to focus the input element ready for entering the next shopping list item.</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nIf you get really stuck, have a look at our <a href=\"https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list-finished.html\" class=\"external\" target=\"_blank\">finished shopping list</a> (<a href=\"https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html\" class=\"external\" target=\"_blank\">see it running live also</a>).</p>\n</div>"}},{"type":"prose","value":{"id":"summary","title":"Summary","isH3":false,"content":"<p>We have reached the end of our study of document and DOM manipulation. At this point you should understand what the important parts of a web browser are with respect to controlling documents and other aspects of the user's web experience. Most importantly, you should understand what the Document Object Model is, and how to manipulate it to create useful functionality.</p>"}},{"type":"prose","value":{"id":"see_also","title":"See also","isH3":false,"content":"<ul>\n<li>There are lots more features you can use to manipulate your documents. Check out some of our references and see what you can discover:\n<ul>\n<li><a href=\"/en-US/docs/Web/API/Document\"><code>Document</code></a></li>\n<li><a href=\"/en-US/docs/Web/API/Window\"><code>Window</code></a></li>\n<li><a href=\"/en-US/docs/Web/API/Node\"><code>Node</code></a></li>\n<li><a href=\"/en-US/docs/Web/API/HTMLElement\"><code>HTMLElement</code></a>, <a href=\"/en-US/docs/Web/API/HTMLInputElement\"><code>HTMLInputElement</code></a>, <a href=\"/en-US/docs/Web/API/HTMLImageElement\"><code>HTMLImageElement</code></a>, etc.</li>\n</ul>\n</li>\n<li><a href=\"https://explainers.dev/dom-scripting/\" class=\"external\" target=\"_blank\">DOM Scripting</a>, explainers.dev</li>\n</ul>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting/Object_basics\"><span class=\"button-wrap\"> Previous </span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting\"><span class=\"button-wrap\"> Overview: Dynamic scripting with JavaScript</span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting/Network_requests\"><span class=\"button-wrap\"> Next </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":false,"locale":"en-US","mdn_url":"/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting","modified":"2025-01-29T15:54:45.000Z","native":"English (US)","noIndexing":false,"other_translations":[{"locale":"de","title":"Einführung in DOM-Scripting","native":"Deutsch"},{"locale":"fr","title":"Manipuler des documents","native":"Français"},{"locale":"ja","title":"DOM スクリプティング入門","native":"日本語"},{"locale":"pt-BR","title":"JavaScript e CSS","native":"Português (do Brasil)"},{"locale":"ru","title":"Управление документами","native":"Русский"},{"locale":"zh-CN","title":"DOM 脚本简介","native":"中文 (简体)"}],"pageTitle":"DOM scripting introduction - Learn web development | MDN","parents":[{"uri":"/en-US/docs/Learn_web_development","title":"Learn"},{"uri":"/en-US/docs/Learn_web_development/Core","title":"Core learning modules"},{"uri":"/en-US/docs/Learn_web_development/Core/Scripting","title":"Dynamic scripting with JavaScript"},{"uri":"/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting","title":"DOM scripting introduction"}],"popularity":null,"short_title":"DOM scripting introduction","sidebarHTML":"<ol><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Getting_started\">Getting started modules</a></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup\">Environment setup</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">Installing basic software</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">Browsing the web</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\">Code editors</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">Dealing with files</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">Command line crash course</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website\">Your first website</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">What will your website look like?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML: Creating the content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS: Styling the content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript: Adding interactivity</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">Publishing your website</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards\">Web standards</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">How the web works</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">The web standards model</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\">How browsers load websites</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills\">Soft skills</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\">Research and learning</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\">Collaboration and teamwork</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\">Workflows and processes</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\">Succeeding in job interviews</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Core\">Core modules</a></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content\">Structuring content with HTML</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">Basic HTML syntax</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">What's in the head? Webpage metadata</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">Headings and paragraphs in HTML</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">Emphasis and importance</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Lists\">Lists</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">Structuring documents</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">Advanced text features</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links\">Creating links</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">Challenge: Marking up a letter</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">Challenge: Structuring a page of content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML images</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">HTML video and audio</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Challenge: Mozilla splash page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">HTML table basics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">HTML table accessibility</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">Challenge: Structuring a planet data table</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">Forms and buttons in HTML</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">Debugging HTML</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics\">CSS styling basics</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">What is CSS?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started\">Getting started with CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">Challenge: Styling a biography page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">Basic CSS selectors</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">Attribute selectors</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">Pseudo-classes and pseudo-elements</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators\">Combinators</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model\">The box model</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">Handling conflicts</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS values and units</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Sizing\">Sizing items in CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">Backgrounds and borders</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow\">Overflowing content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">Images, media, and form elements</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Tables\">Styling tables</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">Challenge: Fundamental CSS comprehension</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">Challenge: Creating fancy letterheaded paper</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">Challenge: A cool-looking box</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling\">CSS text styling</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals\">Fundamental text and font styling</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Styling_lists\">Styling lists</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Styling_links\">Styling links</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Web fonts</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">Challenge: Typesetting a community school homepage</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout\">CSS layout</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction\">Introduction to CSS layout</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Floats\">Floats</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Positioning\">Positioning</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS grid layout</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">Responsive design</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries\">Media query fundamentals</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">Challenge: Fundamental layout comprehension</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/en-US/docs/Learn_web_development/Core/Scripting\">Dynamic scripting with JavaScript</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">What is JavaScript?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/A_first_splash\">A first splash into JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/What_went_wrong\">What went wrong? Troubleshooting JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Variables\">Storing the information you need — Variables</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Math\">Basic math in JavaScript — numbers and operators</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Strings\">Handling text — strings in JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">Useful string methods</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Arrays\">Arrays</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">Challenge: Silly story generator</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Conditionals\">Making decisions in your code — conditionals</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Loops\">Looping code</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Functions\">Functions — reusable blocks of code</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">Build your own function</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Return_values\">Function return values</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Events\">Introduction to events</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling\">Event bubbling</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Image_gallery\">Challenge: Image gallery</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript object basics</a></li><li><em><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting\" aria-current=\"page\">DOM scripting introduction</a></em></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Network_requests\">Making network requests with JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/JSON\">Working with JSON</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">Debugging JavaScript and handling errors</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript frameworks and libraries</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">Introduction to client-side frameworks</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">Framework main features</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">Getting started with React</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">Beginning our React todo list</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">Componentizing our React app</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\">React interactivity: Events and state</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\">React interactivity: Editing, filtering, conditional rendering</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\">Accessibility in React</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\">React resources</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility\">Accessibility</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">What is accessibility?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/Tooling\">Accessibility tooling and assistive technology</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/HTML\">HTML: A good basis for accessibility</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS and JavaScript accessibility best practices</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA basics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/Multimedia\">Accessible multimedia</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/Mobile\">Mobile accessibility</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">Challenge: Accessibility troubleshooting</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Design_for_developers\">Design for developers</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Version_control\">Version control</a></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Extensions\">Extension modules</a></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">Object prototypes</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">Object-oriented programming</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">Classes in JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">Object building practice</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">Challenge: Adding features to our bouncing balls demo</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs\">Client-side web APIs</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Introduction to web APIs</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">Video and Audio APIs</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">Drawing graphics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">Client-side storage</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">Third-party APIs</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS\">Asynchronous JavaScript</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing\">Introducing asynchronous JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises\">How to use promises</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">How to implement a promise-based API</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">Introducing workers</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">Challenge: Sequencing animations</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms\">Web forms</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Your_first_form\">Your first form</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">How to structure a web form</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">Basic native form controls</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">The HTML5 input types</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">Other form controls</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">Styling web forms</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">Advanced form styling</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI pseudo-classes</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\">Client-side form validation</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">Sending form data</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools\">Understanding client-side tools</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">Client-side tooling overview</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">Package management basics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">Introducing a complete toolchain</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">Deploying our app</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side\">Server-side websites</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps\">Server-side first steps</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">Introduction to the server side</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">Client-Server Overview</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">Server-side web frameworks</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">Website security</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django\">Django web framework (Python)</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Django introduction</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">Setting up a Django development environment</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: The Local Library website</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django Tutorial Part 2: Creating a skeleton website</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Models\">Django Tutorial Part 3: Using models</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\">Django Tutorial Part 4: Django admin site</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\">Django Tutorial Part 5: Creating our home page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\">Django Tutorial Part 6: Generic list and detail views</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\">Django Tutorial Part 7: Sessions framework</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\">Django Tutorial Part 8: User authentication and permissions</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Forms\">Django Tutorial Part 9: Working with forms</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Testing\">Django Tutorial Part 10: Testing a Django web application</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\">Django Tutorial Part 11: Deploying Django to production</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\">Django web application security</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\">Assessment: DIY Django mini blog</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express web framework (Node.js)</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Express/Node introduction</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Setting up a Node development environment</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express Tutorial: The Local Library website</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express Tutorial Part 2: Creating a skeleton website</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\">Express Tutorial Part 4: Routes and controllers</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Part 5: Displaying library data</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express Tutorial Part 6: Working with forms</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance\">Web performance</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/why_web_performance\">The \"why\" of web performance</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">What is web performance?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">Perceived performance</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">Measuring performance</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/Multimedia\">Multimedia: Images</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/video\">Multimedia: video</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript performance optimization</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/HTML\">HTML performance optimization</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/CSS\">CSS performance optimization</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">The business case for web performance</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing\">Testing</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Introduction\">Introduction to cross-browser testing</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">Strategies for carrying out testing</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">Handling common HTML and CSS problems</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection\">Implementing feature detection</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing\">Introduction to automated testing</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">Setting up your own test automation environment</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Transform_animate\">Transform and animate CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Security_privacy\">Security and privacy</a></li><li class=\"section\">Further resources</li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Howto\">How to solve common problems</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems\">Solve common HTML problems</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems\">Solve common CSS problems</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">Solve common JavaScript problems</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Web_mechanics\">Web mechanics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Tools_and_setup\">Tools and setup</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Design_and_accessibility\">Design and accessibility</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/About\">About</a></li><li><a href=\"/en-US/docs/Learn_web_development/Educators\">Resources for educators</a></li><li><a href=\"/en-US/docs/Learn_web_development/Changelog\">Changelog</a></li></ol>","source":{"folder":"en-us/learn_web_development/core/scripting/dom_scripting","github_url":"https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md","last_commit_url":"https://github.com/mdn/content/commit/ef472690cc383fc77d7aa53ddec036b5efa3b526","filename":"index.md"},"summary":"When writing web pages and apps, one of the most common things you'll want to do is change the document structure in some way. This is usually done by manipulating the Document Object Model (DOM) via a set of built-in browser APIs for controlling HTML and styling information. In this article we'll introduce you to DOM scripting.","title":"DOM scripting introduction","toc":[{"text":"The important parts of a web browser","id":"the_important_parts_of_a_web_browser"},{"text":"The document object model","id":"the_document_object_model"},{"text":"Active learning: Basic DOM manipulation","id":"active_learning_basic_dom_manipulation"},{"text":"Active learning: A dynamic shopping list","id":"active_learning_a_dynamic_shopping_list"},{"text":"Summary","id":"summary"},{"text":"See also","id":"see_also"}],"pageType":"learn-module-chapter"}}</script> <script>function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('pl', 'fr', function () {});}</script> <script src="https://translate.google.com/translate_a/element.js?cb=gtElInit&hl=en-GB&client=wt" type="text/javascript"></script> </body> </html>