The Document Object Model, or "DOM", is a programming interface for accessing elements of web pages. Basically, it is a page API that allows you to read and manipulate the content, structure, and styles of a page. Let's see how it works and how it works.

How is a web page built?

The process of converting an HTML source document into a rendered stylized and interactive page is called the “Critical Rendering Path”. Although this process can be broken down into multiple steps, as I described in Understanding the Critical Rendering Path, these steps can be roughly grouped into two steps. In the first, the browser parses the document to determine what will ultimately be displayed on the page, and in the second, the browser renders.

The result of the first step is what is called a “render tree”. Render tree Is a representation of the HTML elements that will be displayed on the page, and their associated styles. To build this tree, the browser needs two things:

1. CSSOM, presentation of styles associated with elements
2. DOM, element representation

What is the DOM made of?

DOM is the object representation of the original HTML document. It has some differences, as we will see below, but it is essentially an attempt to transform the structure and content of an HTML document into an object model that can be used by various programs.

The structure of DOM objects is represented by what is called a "tree of nodes". It is so called because it can be thought of as a tree with a single parent that branches out into multiple child branches, each of which can have leaves. In this case, the parent “element” is the root element, the child “branches” are the nested elements, and the “leaves” are the content within the elements.

Let's take this HTML document as an example:

Hello world!

How are you?

This document can be represented as the following node tree:

• html
  • head
    • title
      • My first web page
  • body
    • h1
      • Hello world!
    • p
      • How are you?

What the DOM is not

In the example above, the DOM appears to be a 1: 1 mapping of the original HTML document. However, as I said, there are differences. To fully understand what the DOM is, we need to take a look at what it is not.

DOM is not a copy of the original HTML

Although the DOM is created from an HTML document, it is not always exactly the same. There are two cases in which the DOM may differ from the original HTML.

1. When HTML contains markup errors

The DOM is the interface for accessing the actual (i.e. already rendered) elements of an HTML document. In the process of creating the DOM, the browser itself can correct some errors in the HTML code.

Consider this HTML document as an example:

Hello world!

The document is missing elements and which is a must for HTML. But if we look at the resulting DOM tree, we can see that this has been fixed:

• html
  • head
  • body
    • Hello world!

  2. When the DOM is modified by Javascript

  In addition to being an interface for viewing the content of an HTML document, the DOM itself can also be modified.

  We can, for example, create additional nodes for the DOM using Javascript.

  Var newParagraph \u003d document.createElement ("p"); var paragraphContent \u003d document.createTextNode ("I" m new! "); newParagraph.appendChild (paragraphContent); document.body.appendChild (newParagraph);

  This code will change the DOM, but the changes will not appear in the HTML document.

  The DOM is not what you see in the browser (i.e. the render tree)

  In the browser viewport, you see the render tree which, as I said, is a combination of DOM and CSSOM. The difference between the DOM and the render tree is that the latter consists only of what will ultimately be displayed on the screen.

  Since the render tree is only concerned with what is displayed, it excludes items that are visually hidden. For example, elements that have styles with display: none.

  Hello world!

  How are you?

  DOM will include the element

  • html
    • head
    • body
      • h1
        • Hello world!
      • p
        • How are you?

  However, the render tree, and therefore what is visible in the viewport, will not be included in this item.

  • html
    • body
      • h1
        • Hello world!

  The DOM is not what is displayed in DevTools

  This difference is slightly smaller because the DevTools Element Inspector provides the closest approximation to the DOM we have in a browser. However, the DevTools inspector contains additional information that is not in the DOM.

  The best example of this is CSS pseudo-elements. Pseudo-elements created using selectors :: before and :: afterare part of the CSSOM and render tree, but are not technically part of the DOM. This is because the DOM is only generated from the original HTML document, not including the styles applied to the element.

  Although pseudo-elements are not part of the DOM, they are in our devtools element inspector.

  
  

  Summary

  The DOM is the interface to an HTML document. It is used by browsers as the first step to determining what to render in the viewport and by Javascript code to change the content, structure, or style of the page.

The DOM is often called the DOM tree because it is made up of a tree of objects called nodes. In you learned what the Document Object Model (DOM) is, how to access the document object and change its properties using the console, we also learned the difference between HTML and DOM source code.

In this tutorial, you will find the HTML terminology you need to work with JavaScript and the DOM, learn what a tree and DOM nodes are, and learn how to identify the most common types of nodes. You can also create a JavaScript program in the console to interactively modify the DOM.

HTML terminology

Understanding the terms HTML and JavaScript is critical to working with the DOM. Let's take a quick look at the basic terms.

Look at this HTML element:

Home

It contains an anchor, which is a link to index.html.

• a - tag
• href - attribute
• html - attribute value
• Home - text.

Everything between the opening and closing tags constitutes an HTML element.

Let's go back to the index.html file from the previous tutorial:

Document Object Model

The easiest way to access an element with JavaScript is with the id attribute. Let's add the above link to our index.html file with id \u003d "nav".

...

Document Object Model

Home

...

Load (or refresh) the page in a browser window and look at the DOM to make sure the code has been updated.

Then use the getElementById () method to access the entire element. Enter the following in the console:

document.getElementById ("nav");
Home

The getElementById () method will retrieve the entire element. Now, instead of having to enter this object and method every time you need to access the nav link, you can put the element in a variable to make it easier to work with.

let navLink \u003d document.getElementById ("nav");

The navLink variable contains the anchor. Here you can easily change attributes and values. For example, to change the location of the link, change the href attribute:

navLink.href \u003d "https://www.wikipedia.org";

You can also change the text by reassigning the textContent property:

navLink.textContent \u003d "Navigate to Wikipedia";

Now, by viewing this element in the console or checking the Elements tag, you can see how it has updated.

navLink;
Navigate to Wikipedia

The changes will be reflected on the front-end as well.

Refreshing the page will return all the original values.

At this point, you should understand how to use the document method to access an element, how to assign an element to a variable, and how to change properties and values \u200b\u200bon an element.

DOM tree and nodes

All elements in the DOM are defined as nodes. There are many types of nodes, but there are three main ones that you will work with most often:

1. Element node
2. Text node
3. Comment node

When an HTML element is an element in the DOM, it is called an element node. Any single text outside of an element is a text node, and an HTML comment is a comment node. Besides these three types of nodes, the document object itself is a document node, which is the root node of all other nodes.

The DOM consists of a tree structure of nested nodes, often referred to as the DOM tree. You probably know what a family tree is - a schematic representation of family ties, which consists of parents, children and next of kin. Nodes in the DOM are also called parent and child based on their relationship to other nodes.

For example, create a file nodes.html. add a text node to it, as well as comment and element nodes.

An element node

A text node.

The html element node is the parent. head and body are child nodes of html. body contains three child nodes, and they are all at the same level - the type of the node does not affect the nesting level.

Note: When working with HTML generated DOM, HTML source indentation creates many empty text nodes that will not be visible in the DevTools Elements tab. More about this at the link.

Determining node type

Every node in a document has a type, which is accessed through the nodeType property. The Mozilla Developer Network has an updated list of all node type constants. Below is a table of the most common node types.

In the Elements tab in the Developer Tools, you may notice that whenever you click and select any line in the DOM, the value \u003d\u003d $ 0 appears next to it. This is a very convenient way to access the currently active item.

In the node.html console, click on the first element in body (h1).

Use the console to find out the type of the selected node using the nodeType property.

$ 0.nodeType;
1

By selecting the h1 element, you will see 1 as the output that refers to ELEMENT_NODE. Do the same with the other nodes and they will return 3 and 8 respectively.

By knowing how to access an element, you can see the type of the node without highlighting the elements in the DOM.

document.body.nodeType;
1

In addition to nodeType, you can also use the nodeValue property to find out the value of a text or comment node, and nodeName to get the tag of an element.

Changing the DOM using events

So far, you've seen how to change the DOM in the console, and these changes are known to be temporary; every time the page is refreshed, all changes are lost. In you updated the background color of the page in the console. Try combining what you learned in this tutorial with what you already know to create an interactive button that changes the background color.

Go back to your index.html file and add a button element with an id. You also need to add a link to the new file in the new js directory js / scripts.js.

Document Object Model

Change background color

An event in JavaScript is an action that a user takes. The user hovers the mouse over an element, clicks on it or on a certain key on the keyboard - these are all events. In this particular case, the button should take an action when the user clicks on it. To do this, you need to add an event listener. Create a scripts.js file and save it in a new js directory. In the file, you need to define a button element and assign it to a variable.

Using the addEventListener () method, the button will listen for clicks and execute its function after the click.

...
button.addEventListener ("click", () \u003d\u003e (
// action will go here
});

Inside the function, you need to put the code from the previous manual to change the background color to fuchsia.

...

This is what the script looks like:

let button \u003d document.getElementById ("changeBackground");
button.addEventListener ("click", () \u003d\u003e (
document.body.style.backgroundColor \u003d "fuchsia";
});

Save and close the file. Refresh the index.html page in your browser. Click on the new button and the background color of the page will change.

Tags:,

In this tutorial, we'll look at what the DOM is, why it's needed, and how it's built.

What is DOM?

When a browser requests a page and receives its HTML source in response from the server, it must first parse it. In the process of analyzing and parsing HTML code, the browser builds a DOM tree based on it.

After completing this action and a number of others, the browser starts rendering the page. In this process, of course, he already uses the DOM tree he created, not the original HTML code.

DOM is a document object model that the browser creates in computer memory based on the HTML code it receives from the server.

In simple terms, HTML is the text of the page, and the DOM is a set of related objects created by the browser when parsing its text.

In Chrome, the source code of the page that the browser receives can be viewed in the Source tab of the Web Developer Tools panel.

Chrome does not have a tool to view the DOM tree it has created. But there is a representation of this DOM-tree in the form of HTML-code, it is available on the "Elements" tab. This DOM representation is, of course, much more convenient for a web developer to work with. Therefore, there is no tool that would represent the DOM as a tree structure.

Objects in this model are formed from almost everything in HTML (tags, text content, comments, etc.), including the document itself. The connections between these objects in the model are formed based on how HTML elements are located in the code relative to each other.

In this case, the DOM of the document after its formation can be changed. When the DOM changes, the browser redraws the page image almost instantly. As a result, we have page rendering always matches the DOM.

To read and modify the DOM programmatically, the browser provides us with the DOM API or, in other words, the programmatic interface. In a simple way, the DOM API is a set of a huge number of different objects, their properties and methods that we can use to dOM reads and changes.

In most cases, JavaScript is used to work with the DOM. today it is the only programming language that can be scripted in a browser.

Why do we need the DOM API? We need it so that we can change the page on the fly using JavaScript, ie. make it dynamic and interactive.

The DOM API provides us (developers) with a huge number of methods with which we can change everything on the page, as well as interact with the user. Those. this programming interface allows us to create complex interfaces, forms, process user actions, add and remove various elements on the page, change their content, properties (attributes), and much more.

Nowadays there are practically no sites on the web in scripts that would not work with the DOM.

What does the HTML of the page consist of?

Before moving on to the study of the document object model, you must first remember what the source code of a web page (HTML document) is.

The source code of a web page consists of tags, attributes, comments, and text. Tags are the basic HTML syntax. Most of them are paired. In this case, one of them is the opening one, and the other is the closing one. One such pair of tags forms an HTML element. HTML elements can have additional parameters - attributes.

In a document, to create a certain markup, some elements are inside others. As a result, an HTML document can be thought of as a set of nested HTML elements.

As an example, consider the following HTML code:

Article title

In this code, the root element is html. It has nested head and body elements. The head element contains the title, and the body contains the h1 and div. The div element in turn contains h2 and p.

Now let's look at how a browser builds a DOM tree based on HTML code.

How is the DOM tree of a document built?

As described above, the browser builds a tree based on HTML elements and other entities of the page's source code. When performing this process, it takes into account the nesting of elements within each other.

As a result, the browser uses the resulting DOM tree not only in its work, but also provides us with an API for convenient work with it through JavaScript.

When constructing the DOM, the browser creates objects (nodes of the DOM tree) from HTML elements, text, comments and other entities of this language.

In most cases, web developers are only interested in objects (nodes) formed from HTML elements.

At the same time, the browser does not just create objects from HTML elements, but also connects them to each other with certain links, depending on how each of them relates to the other in the code.

Elements that are directly in some element are children in relation to it. And he is a parent for each of them. In addition, all these elements in relation to each other are siblings (brothers).

Moreover, in HTML, any element always has one parent (the HTML element in which it is directly located). In HTML, an element cannot have multiple parents. The only exception is the html element. He has no parent.

To get the DOM tree as the browser builds it, you just need to "line up" all the elements depending on their relationship to each other.

DOM tree creation is done from top to bottom.

In this case, the root of the DOM tree is always the document itself (the document node). Further, the tree is built depending on the structure of the HTML code.

For example, the HTML code we looked at above will have the following DOM tree:

At the very top of this tree is the document node. This node is related to html, it is its child. The html node is formed by the html element ( ...). Head nodes ( ...) and body ( ...) have a parent link to html. In relation to each other, they are siblings, because have one parent. The head node is associated with title (lt; title\u003e ...), he is his child. The h1 and div nodes are associated with the body, for which it is the parent. The div node is linked to h2 (

...

) and p (), they are his children.

The tree begins, as noted above, from the document object (node). It, in turn, has one child node, formed by the html element ( ...). Head elements ( ...) and body ( ...) are in html and are therefore its children. Further, the head node is the parent of title (lt; title\u003e ...). The h1 and div elements are nested within the body, so they are its children. The div directly contains h2 elements (

...

) and p (). This means that the div node for each of them is the parent.

This is how easy it is to build a DOM tree in a browser based on HTML code.

Why do you need to know how a DOM tree is built? First, it is an understanding of the environment in which you want to change something. Secondly, most of the actions when working with the DOM boils down to finding (selecting) the required elements. Not knowing how the DOM tree works and the connections between nodes, it will be rather difficult to find a specific element in it.

The task

Based on the DOM tree shown in the figure, create HTML code.

The topic is really complex. But, as they say, the devil is not so terrible as he is painted. This is where the tough nut to crack comes to me: a sort of super-task of “painting” is as digestible as possible, but not entirely primitive. So far, all the materials I have read tend to be either zaum or primitive.

What is DOM

Abbreviation DOM stands for Document Object Model (document object model).

DOM is a programming interface for accessing HTML, XHTML and XML documents, that is, the presentation of HTML, XHTML and XML tags and attributes, as well as CSS styles as programming objects. Both JavaScript and other web programming languages \u200b\u200bwork with this model.

A bit of history

There are 4 levels DOM (0, 1, 2 and 3).

Level 0(1996) included models DOMwhich existed before level 1. These are mainly collections: document.images, document.forms, document.layers and document.all. These models are not formally specifications. DOMpublished W3C... Rather, they provide information about what existed before the standardization process began.

Level 1 (1997) also included basic functionality for processing XML documents: multiple ways of working with individual nodes, working with XML processing instructions, etc.

Besides, DOM Level 1 contains a number of special interfaces that can handle individual HTML elements. For example, you can work with HTML tables, forms, select lists, and more.

IN DOM level 2 (2002) added several new features.

If in DOM level 1 lacked namespace support, the interfaces DOM Level 2 contains methods for managing namespaces associated with the requirements for composing and processing XML documents.

Besides, DOM level 2 supports events.

Level 2 is the current specification level DOM, However W3C recommends some sections of the Level 3 specification.

DOM level 3 is a working draft of a specification that extends functionality DOM level 2. One of the most important features of this version of the specification is the ability to work with multiple extensions DOM.

What does software interface mean?

English word interface can be translated as "contact area". A computer, roughly speaking, understands only two things: an empty bit and a filled bit. The language spoken by a computer can be thought of as an endless string of zeros and ones, giving an infinite number of different combinations.

Any program code is an intelligible for the programmer interpretation of these "zeros and ones" with which the computer works. Thus, any programming language is a human-machine interface.

Browsers work the same way as other computer applications. They interpret HTML, XML, CSS, JavaScript, PHP, Perl, etc. into "zeros and ones". To work with this multilingualism, you need a common platform. This platform is DOM - a specification that is independent of a particular programming language or markup. It is an interface that can be used in many popular programming languages \u200b\u200brelated to the creation of web pages and is able to understand and interpret objects. DOM.

DOM and browsers

DOM and JavaScript

In JavaScript, the top of the hierarchical ladder of objects DOM, a kind of "conductor" to this interface is the object documentand objects DOM become its properties, properties of its properties, etc. They are also called dOM nodes.

DOM nodes

IN DOM level 2 has 12 types of nodes. Behind each type of node DOM fixed constant with unique name. Most of the nodes are designed to work with XML... In assembly HTML - JavaScriptthat we are dealing with, only 5 types can be used. But even this “tip of the iceberg” is a very “spreading tree” that cannot be covered in one or two sessions.

Complete set of node type constants defined in the specification W3C DOM (nodes available for HTML - JavaScript):

Constant name	Value	Description
Node.ELEMENT_NODE		Element node (returns the root element of the document, for HTML documents this is the HTML element)
Node.ATTRIBUTE_NODE		Attribute node (returns an attribute of an element in an XML or HTML document)
		Text node (#text)
Node.CDATA_SECTION_NODE		CDATA Section Node (XML: Alternative Syntax for Displaying Character Data)
Node.ENTITY_REFERENCE_NODE
Node.ENTITY_NODE		Section node
Node.PROCESSING_INSTRUCTION_NODE		XML Directive Node
Node.COMMENT_NODE		Comment node
Node.DOCUMENT_NODE		Document node (the basis for accessing the content of the document and creating its components)
Node.DOCUMENT_TYPE_NODE		Document type node (returns the type of the given document, i.e. the value of the DOCTYPE tag)
Node.DOCUMENT_FRAGMENT_NODE		Document fragment node (extracting a part of the document tree, creating a new document fragment, inserting a fragment as a child element of a node, etc.)
Node.NOTATION_NODE		Notation node *

* Notations are names that identify the format of unparsed sections, the format of elements that have a notation attribute, or the application to which a directive is addressed. (Not clear? I'm not very good at it either.)

Document structure in the DOM

All document objects are DOM nodes. Consider an elementary document:

< title>DOM

"center"\u003e Title

Paragraph text

Here's a diagram of its DOM tree:

Each node can have child nodes (arrows lead to them in the diagram). The document object - the base of the document tree - is also a node, but it does not have a parent node and has a number of properties and methods that other nodes do not have. It has one child node: element .

Element two child nodes: and , for which all the elements they contain become children.

Attention!

"Element" and "tag" are not synonyms. A tag is a markup sign: they are two different tags. An element is an object marked with these tags:

Paragraph text

.

The elements