Webpages are structured as Document Object Models (DOMs), which just means that the content of any webpage is organized as nested HTML elements, as in Figure 1.

Figure 1

An Example of a Webpage Document Object Model (DOM)

Each element can have attributes that provide information about it and can encapsulate other elements or a text node, which has a string.

Figure 2

Structure of an HTML Element

The DOM ensures that content on a web page is not just randomly represented but is displayed and accessed in a structured manner.

When working within a web-based editor as a content editor, such as a WYSIWYG editor in a LMS or CMS, you are typically only editing a very small part of the DOM, as in Figure 3.

Figure 3

The eLearning Content Editor's Editable Part of a DOM within a LMS or CMS

The caveat to this is that if you are able to run JavaScript on the page, then you can manipulate any part of the DOM as you would like. This is why many platforms restrict who can create JavaScript that runs on the page, because if you can include some JavaScript in your editable area, then you can adjust content on the page outside of your editable area, such as the navigation, headings, styles, etc.