# Week 5 - DOM and Namespaces

# Running JavaScript in the Browser

You can attach one or more JavaScript files to your your webpage by using a <script> tag.

# Document Object Model

When the browser reads an HTML file it creates an Object model representing all the content on the page. It builds a tree structure that helps it to know which elements are nested inside each other, which elements are parents and which are children.

This is a visual representation of how a browser sees the page. You can think of each indent as the start of a new branch in the DOM tree. Inside the html object, there are two children - head and body. Inside the head are two more children - title and link. title has a child, which is #text. The link element has no children. Inside body > header > h1 there are two children - img and #text. The img and the #text are siblings.

doctype
html
  head
    title
      #text
    link
  body
    header
      h1
        img
        #text
    nav
      a
        #text
      a
        #text
      a
        #text
    main
      h2
        #text
      p
        #text
    footer
      p
        #text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

You need to be able to visualize every page in this manner. Understand when you are searching for things or altering things that you will be working with parents, children, and siblings.

# Nodes and Elements

Each one of the things listed above, in the DOM diagram, is a Node. There are several kinds of types of nodes, including ElementNode, TextNode, DocumentFragement, and Comment. There are others but these are, by far, the most common.

There are node properties and methods which work on all the types, some that work only on Element nodes, and some that work only on Text nodes.

More about DOM and Nodes

# querySelector, querySelectorAll, and getElementById

The two methods we use the most to find elements on the page are document.querySelector and document.querySelectorAll. The difference between them is that querySelector finds the first match starting at the top of the page and querySelectorAll finds ALL the matches.

Learn more about querySelector

# Creating, Changing, and Removing Content

Manipulating HTML can be done quite easily once you understand the parent-child-sibling relationship between Nodes and the difference between Element nodes and Text nodes.

Learn about altering HTML with JS

# Namespacing

Namespacing is how we protect our code against naming conflicts with other peoples scripts. Anyone who builds an HTML file, can add <script> tags that point to any JavaScript file which is publicly available online.

That means that your JavaScript file and the JavaScript files belonging to 10 of your friends can all be loaded and running on the same page.

With 100 lines of script in each file, there is a decent chance that two of you could have created a global variable with the same name. This means that the second one to load will overwrite the second one OR if you used const then an error will stop all the scripts from running.

Solve this problem with Namespacing

# Live Preview

Once you start testing things in the browser, you will want to be able to get a live preview, meaning that every time you save a change to your files the browser will refresh itself.

There is an extension for VSCode called "Live Server" by Ritwick Dey. Currently, version 5.6.1. You should add this extension to VSCode.

If you want to add HTTPS support to the live preview, here is how:

This extension is NOT required now. Save this for future reference.

# TODO

TODO Before next week

If you have not read all these notes and watched the videos from this week, do that first.
Finish and submit the exercises Exercise 7- Arrays and Exercise 8 - Loops before 5pm on this Tuesday.
- Exercises page
Complete Hybrid 7 - Git Clone before next Monday at 5pm.
- Hybrid page
Read ahead the notes for week 6 to prepare for class.

← Week 4 - Arrays, Math, Errors Week 6 - Elements, Attributes, Imports, XML & JSON →