From a bird's-eye view, the process of displaying a page looks like this:
The browser finds out the page's address using DNS, and then it makes a request to the server:
GET /courses HTTP/1.1 HOST: ru.hexlet.io
The server sends some HTML code in response.
The browser receives the HTML code, parses it, and forms an internal structure called a DOM tree
After that, the browser uses this tree for the physical rendering of the page that we're looking at right now:
What is a DOM tree? Why do we need it to generate a page when we have HTML? The fact is that HTML is just text. It's extremely inconvenient to use it directly. In fact, it's impossible in this case.
It's much easier to create an object based on it that will correspond to the structure of the HTML itself, then use it to generate the page. This object is the DOM tree.
The word tree is used here for a reason. An HTML file has a tree structure. It consists of tags embedded in other tags which are embedded in other tags, and so on.
Therefore, the resulting object has the same tree-like structure:
const html = ` <body> <p>hello, <b>world</b>!</p> </body> `; const parser = new DOMParser(); // Each HTML tag becomes a node of this tree, // and the tags nested in it become child nodes // Special text nodes are created to represent the text // The important thing is that all the elements represented in HTML // go into the DOM tree, including spaces and line feeds const doc = parser.parseFromString(html, 'text/html'); // Output the contents of the <body> tag console.log(doc.body.innerHTML);
The object obtained above has a structure that will be the same in all browsers and other programs that work with HTML. That's why it contains the DOM prefix.
The Document Object Model is a platform and language-independent format that allows programs and scripts to access the contents of HTML documents as well as change their contents, structure, and design.
Thanks to the existence of this standard, we're able to write one version of the code for all browsers. Otherwise, if each browser did what it wanted, you would have to write code for each browser individually due to their incompatibility.
But still, there are some differences. The browsers develop at different speeds and don't always keep up with changes in the DOM standard. Therefore, programmers have to wait for new features to appear in the majority of browsers before they can use them.
In later lessons, we'll discuss how modern developers deal with these problems using polyfills.
document object, which is filled with many methods for manipulating this tree according to the DOM specification.
The browser immediately displays any changes on the page:
// This header will replace the entire page (body tag) document.body.innerHTML = '<h1>For Hexlet!</h1>';
Those who have encountered HTML in real life know perfectly well that if you pass erroneous HTML with unclosed tags, broken nesting, and other problems to the browser, then there won't be any error messages. The browser will take this HTML and display something on the screen.
You may not like what you see, but it will work:
// This HTML contains errors, but the browser will still display it const html = '</p>hello, hexlet<div>';
The browser restores the document's structure according to some very tricky rules. Otherwise, it would be theoretically impossible to parse. But there is another reason: even if the HTML itself is correct when we create a DOM tree, the browser adds some tree nodes represented by HTML tags.
You may have missed this, but the standard requires them to be there. For example,
<tbody> is added to the tables, and it doesn't matter whether it was in the original HTML or not:
DOM opens up almost limitless possibilities for changing pages. All libraries (jquery and others) and frameworks (angular, react) manipulate DOM internally. It is the base around which everything in front-end development is built.
document object to replace the body of the document (as in the example above) with the following snippet:
<h1>This is my territory</h1>
The Hexlet support team or other students will answer you.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.