Document Object Model

As a beginner, learning html, css and javascript you must at a point ask yourself question like, cant i build a website without javascript or say whats is javascript doing that i cant ignore?

Yes, there is a place for each it, html to add content, CSS to style and Javascript for functionality or interactive and some call it behaviour.
For example, When your alarm wakes you 5am, you either off it or snooze it uisng the button, so think of all the content you see (html), then how the alarm is designed(CSS) i.e interface then when you press the button to left or right and something happened(Javascript).

Another question you will likely asked is how does this behaviour happen? It's simple, javascript accessing the content in HTML by communicating with the browser using the properties, methods, and events in the interface called the Document Object Model, or DOM, it ia a tree-like representation of the web page that gets loaded into the browser.

So here is how DOM works by targeting the content through the element and giving it some instructions to carry out, lets look at DOM structure.

DOM structure

lets say I want to control the tr from javascript using DOM, to access it I go like,

const userTable = document.getElementsByTagName("tr");

and you ahead to give instruction or use it for whatever you want to, which lead us to DOM Properties and method.

DOM make use of properties and method to access object(HTML Elment), Let mention few DOM Methods, Property and how they used.

DOM METHODs

*addEventListener()
*

element.addEventListener("click", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

appendChild()

const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

DOM Properties