Getting back to Javascript

Resource: https://developer.mozilla.org/en-US/

DOM: Document Object Model

It’s a specification that defines the structure of an HTML or XML document as a tree of objects. Browserswhich are typically written in C++, implement this specification. Here’s how the interaction between C++ and JavaScript works in the browser:

1. Browser Rendering Engine (C++): The browser parses the HTML document and builds the DOM tree, representing the document’s structure. The rendering engine, written in C++, manages this DOM tree.
2. JavaScript Engine (C++): The browser includes a JavaScript engine (e.g., V8 in Chrome) that executes JavaScript code. This engine is also implemented in C++.
3. Interaction via Bindings: The C++ rendering engine exposes the DOM tree to the JavaScript engine through bindings. These bindings allow JavaScript code to access and manipulate the DOM nodes (elements, attributes, text, etc.).
4. Web APIs (C++): Browsers provide Web APIs (like the DOM API) which are also written in C++. JavaScript code can interact with these APIs to access functionalities beyond the DOM, such as network requests or local storage.

The only way to interact with the elements in DOM is via javascript.

+-----------------------------------------------------+
|                  Browser                            |
|                                                     |
|  +--------------------+      +-------------------+  |
|  |  Rendering Engine  |      | JavaScript Engine |  |
|  |      (C++)         |      |      (C++)        |  |
|  |                    |      |                   |  |
|  |  +-------------+   |      |   +-----------+   |  |
|  |  |   DOM Tree  |<------+----->|   JS Code |   |  |
|  |  +-------------+   |      |   +-----------+   |  |
|  |                    |      |                   |  |
|  +--------------------+      +-------------------+  |
|                                                     |
|             +---------------------+                 |
|             |      Web APIs       |                 |
|             |        (C++)        |                 |
|             +---------------------+                 |
|                                                     |
+-----------------------------------------------------+

In short, when the html document gets loaded, a HTML parser loads it to the DOM(C++) in list format and is later rendered on the browser. While the HTML is parsed, the Javascript runtime is available to access the DOM for object manipulation.

Basic Javascipt syntax: https://learnxinyminutes.com/docs/javascript/