Day 93 Angular DOM Manipulation

Yesterday I learned about the MEAN stack, each of the technologies I have learned about except for Angular.

First of all a conceptual aside, browsers are written in C++ code but have JavaScript engines embedded in them access to extra features. An interesting thought is how does the browser server know what to do with an HTML string/text how does it create something we can see.

That has something to do with the DOM to store and process webpages. DOM is a structure browsers use to store and manage web pages. Browsers give the JavaScript engine the ability to manipulate the DOM.

The DOM doesn’t live in the JavaScript engine but in the browsers C++ engine. When the DOM is on the browser will automatically recreate and render the webpage. The browser is a program sitting on the clients computer. It receives some HTML as the result to a HTTP request. The HTTP body contains the HTML. Essentially creating a string to sending it back as part of the HTTP request.

Then the browser needs to do something with the string and decide what to do with it. It doesn’t just use the string all the time but processes the string once and builds the DOM. The DOM takes the HTML and converts it to a hierarchy of objects which represent the various HTML elements. This hierarchy is the DOM tree.

The browser will pass the contents of JavaScript to the engine and run it. It will be received and executed in the browser. The JavaScript engine will process the extra features to manipulate the DOM (adding elements, removing elements) and will update the new features.

Ultimately the core of how modern webpages and web applications work. JavaScript code running on the browser through the embedded engine. Manipulating the DOM making the webpage dynamic allowing it to change, respond. Thereby making the webpage interactive.

The problem is the different browsers and versions and the different ways to write your code because of this. This results in a lot of extra code the angular framework help us with this.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Up ↑

%d bloggers like this: