LEARN: DOM

DOM stands for Document Object Model. It contains the structure of websites, and without a dom to interact with, HTML does not work.

A dom is simply a programming term describing how the browser - the hosting program - interacts with the website's code. CTRL + SHIFT + I to access the dom. Then type document into the console.

DOM tree - HTML Elements

  • #document
    • <!DOCTYPE html>
    • <html lang="en">
    • <head>
      • <meta charset="UTF-8">
      • <meta http-equiv="X-UA-Compatible" content="IE=edge">
      • <meta name="viewport" content="width=device-width, initial-scale=1.0">
      • <title>New Document</title>
      • <script src="expandingList.js" async></script>
      • <link rel="stylesheet" href="style.css">
      </head>
    • <body>
      • <header>Site header element: usually contains navigation or menu structures.</header>
      • <main>
        • <h1>Hello, DOM</h1>
        • <p>Learn more about the dom, at codecademy</p>
        </main>
      • <footer>Footer area: Good for copyright and attributions.</footer>
      </body>
    • </html>
Top