Exploring the Fundamentals of Browser Components and the DOM

webdev1801 — Fri, 04 Aug 2023 13:40:21 +0000

In preparing to engage with DOM projects, it's essential to establish a foundational understanding of the core components that shape our web browsing experience.

Let's take a moment to distinguish between the key entities within the browser environment:

the Window,
Navigator
and Document.

The window is the browser tab that a web page is loaded into; this is represented in JavaScript by the Window object.

Using methods available on this object you can do things like return the window's size (see Window.innerWidth and Window.innerHeight), 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 event handler to the current window, and more.

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 Navigator object. You can use this object to retrieve things like the user's preferred language, a media stream from the user's webcam, etc.

The document (represented by the DOM in browsers) is the actual page loaded into the window, and is represented in JavaScript by the Document 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.

Let's take an example of a very simple page containing a element inside which you can find an image, and a paragraph with a link inside. The HTML source code looks like this:

<!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>

The DOM on the other hand looks like this

Each entry in the tree is called a node. You can see in the diagram above that some nodes represent elements (identified as HTML, HEAD, META and so on) and others represent text (identified as #text). There are other types of nodes as well, but these are the main ones you'll encounter.

Nodes are also referred to by their position in the tree relative to other nodes:

Root node: The top node in the tree, which in the case of HTML is always the HTML node
Child node: A node directly inside another node.

For example, IMG is a child of SECTION in the above example.

Descendant node: A node anywhere inside another node.

For example, IMG is a child of SECTION in the above example, and it is also a descendant. IMG is not a child of BODY, as it is two levels below it in the tree, but it is a descendant of BODY.

Parent node: A node which has another node inside it.

For example, BODY is the parent node of SECTION in the above example.

Sibling nodes: Nodes that sit on the same level in the DOM tree.

For example, IMG and P are siblings in the above example.

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 may have also come across them if you have studied CSS (e.g. descendant selector, child selector).

DEV Community: webdev1801

Exploring the Fundamentals of Browser Components and the DOM