DEV Community

Isaac
Isaac

Posted on • Updated on

Challenge: Explaining HTML DOM to audiences without any coding knowledge

In all languages, no matter about programming or not, we write it with a goal we want to express to others. For example, in an article, we can always get the main idea by reading the outline or some keywords to summarize it roughly. Same as in web pages, but nowadays the articles are dynamite in most cases. Also, the audiences you're talking to in programming languages are mainly the system, instead of human.

A web page is composed of 2 programming languages: HTML and CSS: HTML is for the content, CSS is for the styling. We can make a static website by only using them. However, if we want to make the content dynamic, we use programming languages to control it. DOM is a standard for controlling elements in web pages. The most-used programming language we use to connect them together is call JavaScript.

The full name of DOM is Document Object Model, a standard instead of a programming language. Therefore, JavaScript is not the only programming language for manipulating it, but the most used one for web development. DOM turns all the content in HTML documents into tree structure elements. For example, in a book we divide it into chapters, each chapter is composed of paragraphs, each paragraph has sentences......and so on. Everything is arranged and organized so that we can always quote a certain sentence or a statement precisely.

However, the difference between books and web pages is we're able to interact with web pages. As a developer, there are 2 steps we need to follow when we're going to make it happen:

  1. Select: Just like quoting from a book, we must specify what we're going to interact. The difference is we're not trying to get the main idea from the document, but telling the system where the changes are going to happen.

  2. Manipulate: After targeting the part, we need to tell the system what to do with them. We describe the changes we want to the system.

In addition, in many situations, we need to designate something on the web page to trigger the change described above. Buttons, toggles, and switches are the examples not that hard to imagine. You definitely have experienced interacting with one or more of them as a human being lives in 2022.

In a nutshell, DOM built a mutual standard no matter what the programming language is. We're able to achieve real-time add, get, change, and delete the HTML elements through DOM so that we can make more vivid and fancy websites than early time without refreshing web pages frequently.

Top comments (0)