The Document Object Model (DOM) is the core of the web experience. It is what allows the page to have structure and allows user and developer alike to interact with the webpage. Thanks to the elements of the web document being objects, we can access and alter the properties of the web page easily using normal Object Oriented Programming (OOP) style methods.
For example document.querySelector() calls the querySelector method of the document itself, allowing us to fetch elements of the DOM in Javascript. This lets us dynamically access and edit elements of the DOM and give more functionality to our webpage.
The DOM is rendered sequentially, meaning that each element is placed top to bottom. This is significant not only for the ordering of elements on the page, but also for loading in scripts. If the script is placed higher in the page than an element it tries to use and isn't loaded asynchronously, then the script will fail as that element has not been loaded into the DOM when the script runs.
More Information
MDN Web Docs about the DOM[1]
An HTML tag is a specific keyword enclosed by arrow brackets <> used to designate a specific element type that should be rendered at that location in the DOM. There are many different types of tags which will be detailed in the next section, however some examples include:
- <div>
- <article>
- <script>
Tags let the browser and screenreaders know what to expect
and render from any particular part of the page. Using our
above examples, <div> is
a generic section element that can contain any other tags.
Likewise,
<article> is a more
specific section element using a method called
Semantic HTML, which specifies that the
content within this section is self-contained and unrelated
to anything else on the page.
Finally for our examples
we have <script>. This
is different in that it's more of a utility tag. This tells
the browser that whatever is contained in the
href attribute is a script
to give the page functionality. More details for all of the
above tags are available in the tags section of this page.
Attributes are a way of providing additional information and functionality to HTML elements. There are many standard attributes that can be used, and in many cases custom attributes can be used also which will be detailed later.[2] Attributes can essentially be used as a way to store data on a tag, which can make it easier to manipulate and access specific tags. Some examples of attributes include:
- class
- title
- disabled
Attributes can be accessed both by CSS files and by
Javascript files to enhance the functionality of any
website. Lets explore our examples to detail this.
One
of the most common attributes is
class. It is very common to
give a tag one or more classes to allow for styling in CSS
and even accessing in Javascript, which will be detailed
more later.
The next two are more functional
tags. For title, this one is
used to add tooltips to elements. The browsers detect that a
title is present on an element, and will show that tooltip
on hover, hover on
this text here
for an example.
Finally, the disabled attribute
will tell the browser that an element is not to be used or
accessible whilst the page is loaded. This can be useful for
ensuring form elements can only be accessed if certain
conditions are met, and is a much simpler built in solution
than creating something manually to prevent input in
Javascript.
More Information
MDN Web Docs about the DOM[1]