We shall now learn to put our JS into the web…
Document Object Model
DOM is a tree-like representation of a webpage’s content [like a binary tree or such].
Let’s go back to HTML for a while…
<div class="holder">
<div class="content">
<span class="quote left">❝</span>
<p class="text">I've got demons running 'round in my head</p>
<p class="text">And they feed on insecurities I have</p>
<p class="text">Won't you lay your healing hands on my chest?</p>
<p class="text">Let your ritual clean</p>
<span class="quote right">❞</span>
</div>
</div>
<div class="holder"> is the parent container of this part. Nested inside it are <div class="content">, and further in we have <span> and <p> elements. This works like a family tree with each part on its own branch.
Working with DOM
When we use JS with HTML, we need a way to refer the elements of the page in the <script>. We use the element’s selectors to do so :
const element = document.querySelector("#content");