FAQ: The Document Object Model - Review

Frequently Asked Questions JavaScript FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Review” exercise from the lesson “The Document Object Model”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise Review

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

At the end of this tutorial, I was still left with a very critical question: WHAT ACTUALLY IS THE DOM???

I did some research, and thanks to a few resources (listed below) I have come up with a summary that finally makes it clear to me. Hopefully, someone else will see this and get a better understanding from this post:

Sources:

TLDR: The DOM is a browser’s interpretation of HTML source code. A very concrete example is the Elements tab of a Google Chrome browser, which displays Google Chrome’s version of the DOM for a given web page.


That said, I encourage you to read on for more clarification.

The DOM

DOM stands for Document Object Model

Document - in this case, a Hypertext Markup Language (HTML) Document. It is an example of a Structured Document, because it has structural and semantic tags that inform users of the purposes, hierarchy, attributes, etc. of elements in the document.

Effectively, the HTML document is also the web page itself - one way to intuitively understand this is if all styling was stripped away (not just CSS but also the browser default styles), the document rendered would reflect only the content of the HTML document. The HTML tags would not be displayed, but they would be interpreted and understood by the browser.

Object - The objects in this case are the elements of a page, as well as text and attributes associated with elements. An incomplete list of Objects includes:

  • Content elements - e.g. paragraph elements, anchor elements (links), image elements
  • Text between content elements (e.g. in below example “Home” text is an object)
  • Structural elements - these may not be visible (e.g. Div/Body/Footer)
  • Attributes included in element tags of the HTML Document
  • Comments in the HTML Document (obviously not rendered by browser)

Note: CSS applied styles are not considered objects in the DOM, unless it is an inline style attribute that is included directly in the HTML document.

Clarification: What exactly is an HTML element?

Look at this source code:

<a href="index.html" id="nav">Home</a>

Here we have an anchor element, which is a link to index.html.

  • a is the tag
  • href and idare attributes
  • index.html is the attribute value of the href attribute
  • Home is the text

Everything including and between the opening and closing tags are a single HTML element.

These can all be accessed through dot notation as attributes of the element. E.g. if we store the element as a variable called navLink

let navLink = document.getElementById('nav');

//checking what's stored at navLink
navLink;

// Output:
<a href="index.html" id="nav">Home</a>

The navLink variable contains our entire anchor element. From here, we can easily modify attributes and values. For example, we can change where the link goes by changing the href attribute:

navLink.href = '<https://www.wikipedia.org>';

We can also change the text content by reassigning the textContent property:

navLink.textContent = 'Navigate to Wikipedia';

Now when we view our element, either in the console or by checking the Elements tag, we can see how the element has been updated.

//checking what's stored at navLink after our changes
navLink;

// Output:
<a href="https://www.wikipedia.org/" id="nav">Navigate to Wikipedia</a>

Model - The Model is generated by the browser, consisting of the objects it has found by parsing the information found in the HTML document and associated CSS styles. The DOM therefore is the browser’s representation of the website.

How is the DOM different from the HTML Source Code?

The DOM will differ from the HTML Source Code if:

  • Elements are modified by client-side Javascript (e.g. color change is applied via JS that runs externally to the HTML)
  • The browser automatically modifies something (e.g. browsers may auto-fix bugs in source code)
    • One common example of this is the tabletag — a tbodytag is required inside a table, but developers often fail to include it in their HTML. The browser will automatically correct the error and add the tbody, which modifies the DOM.
    • The browser will also automatically fix tags that have not been closed, thus changing the DOM from the source code, which contains unclosed tags.
1 Like