Why start with 'document' object in JavaScript?

You all might have had this question in mind; why on earth you have to use document whenever you want to make some change on its target value or whatsoever?

 

Here is the thing I want to note. That weird nonsense code line meant 'you are manipulating the document'.

And this is part of DOM(Document Object Model).

 

Note:

1. Document: It treats all the HTML documents.
2. Elements: All the tags that are inside your HTML or XML turn into a DOM element.
3. Text: All the tags’ content.
4. Attributes: All the attributes from a specific HTML element. In the image, the attribute class=”hero” is an attribute from the <p> element.

 

For example, 

var myStart = document.getElementsById('start');

That means 'so, on document, there is an id (element) named with 'start'.'

 

Additional example,

myStart.addEventListener('select', function(event) {

alert('Element selected!');

}, false);

This means 'when you compile myStart, let it listen up the following code.'

 

According to its page I cited here, "This events is for when you want to dispatch something when a specific element is selected. In that case we’re gonna dispatch a simple alert...

These are some of the most commonly used events. Of course, we have a lot of other events that you can use, like drag & drop events — when a user starts to drag some element you can make some action, and when they drop that element you can make another action."

 

 

 

https://www.freecodecamp.org/news/whats-the-document-object-model-and-why-you-should-know-how-to-use-it-1a2d0bc5429d/

What’s the Document Object Model, and why you should know how to use it.