Principle of reciprocity
Whatever a person can do with HTML and CSS in creating the contents
of a web page, JavaScript can do. And whatever JavaScript can do in
creating a web page, a person can do.
The Document Object Model gives the structure within which it is possible
to control all aspects of a web page using JavaScript. It enables the
implementation of the following principle.
Of course, using JavaScript has the advantage that a program can do things
much faster than a person, which means pages can change in real-time.
Look at the w3schools and Traversing the DOM web pages to show the
heirarchial (tree) structure of the elements in a web page.
Examples
An example web page showing a list of the upper level nodes in its
HTML element structure.
Get display stats: by clicking a button, the computer
screen height, width and colour depth is displayed as a new
paragraph at the end of the existing content