What is the element tree of an html document. WDH: DHTML - Document Object Model

Document tree(document tree) is a scheme for constructing an HTML document that shows the relationships between various elements of a page: the order and nesting of elements. This diagram helps you navigate this seemingly chaotic mess of HTML tags.

As a web developer, the document tree helps with writing CSS rules and Javascript scripts.

The note

Don't confuse the document tree with the Document Object Model (DOM). DOM is a more complex concept (it will be written about a little later).

In order not to go into long and tedious explanations why the tree of documents is called a tree, let's look at an example - let's take a simple HTML code:

This is how the unenlightened natives see the HTML code, who accidentally clicked view the page code. But the trained eye of a web developer will take it apart, see all the levels of nesting and interconnection. It will build a clear hierarchical structure out of chaos in the form of a tree (because the scheme is similar to the outlines of a tree):

Family ties

There are certain relationships between the elements of the document tree. Let's consider them.

Ancestors and descendants

From the schematic representation of the tree, and from the HTML code itself, it is clear that some elements are nested within others. Elements that contain others are ancestors(ancestor) in relation to everything invested in it. Nested in turn are his descendants(descendent).

For clarity, consider one branch of our tree:

Each ancestor can have an unlimited number of descendants. Each child will have a number of ancestors depending on the structure of the tree and in which branch it will be located, but in any case there will be at least one ancestor.

Parents and daughters

Parent(parent) is the immediate ancestor (first-level ancestor) of the element. Conversely, the immediate child (first-level child) is called child element(child).

Each parent can have an unlimited number of children. A child element will have only one parent.

The parent element is also called direct ancestor, and the child element is direct descendant. It is something like semantic names.

sister elements

Siblings are a group of two or more elements that have a common parent. The elements don't have to be of the same type, they just need to have a common parent.

Adjacent elements

Adjacent elements(adjacent) are sister elements that are located "next door".

Previous sister and next sister

Everything should be clear from the names of the terms themselves. Previous sister (preceding sibling) - the previous sister element in the code. In our example branch for

This will

For

—

, and for

there will be no previous sisterhood.

Similarly, the following sister (following sibling): for

—

For

—

, for
- No.

Previous and next

The previous element (preceeding) is the same previous element by code, only without the sister relationship restrictions. For our branch: for

This will

For

—

, for

—

.

Similarly, the next element (preceding) has no sister relationship constraints: for

—

For

First child and last

The first child (first child) is the first child of the parent in the document tree, and the last (last child) is the last.



Root element

The root element (root) is the ancestor of all ancestors, it is the "root" of our document tree, it is the only element that does not have a parent, this is .

HTML Basics contain the basic rules of the HTML language, a description of the structure of an HTML page, relationships in the structure of an HTML document between HTML elements.

An HTML document is a plain text document, it can be created in the same way as in a regular text editor. (Notebook), and in a specialized one, with code highlighting (Notepad++, Visual Studio Code, etc.). An HTML document has the .html extension.

An HTML document consists of a tree of HTML elements and text. Each element is identified in the source document by a start (opening) and end (closing) tag (with rare exceptions).

Start tag shows where the element begins, end - where it ends. Closing tag formed by adding a slash / before the tag name:<имя тега> … . Between the start and end tags is the content of the tag - the content.

Single tags cannot store content directly, it is written as an attribute value, for example, a tag will create a button with text Button inside.

Tags can be nested within each other, for example,

Text

. When investing, you must follow the order of their closing (principle of "matryoshka"), for example, the following entry would be incorrect:

Text

.

HTML elements can have attributes (global, applied to all HTML elements, and their own). Attributes are written in the opening tag of an element and contain a name and value specified in the format attribute name="value" . Attributes allow you to change the properties and behavior of the element for which they are set.

Each element can have multiple class values ​​and only one id value. Multiple class values ​​are written with a space,

. The class and id values ​​must contain only letters, numbers, hyphens, and underscores, and must begin with letters or numbers only.

The browser views (interprets) an HTML document, building its structure (DOM) and displaying it in accordance with the instructions included in this file (style sheets, scripts). If the markup is correct, then the browser window will display an HTML page containing HTML elements - headings, tables, images, and so on.

Interpretation process (parsing) starts before the web page is fully loaded into the browser. Browsers process HTML documents sequentially from the very beginning, while processing CSS and relating style sheets to page elements.

An HTML document consists of two sections - the heading - between the tags … and content - between tags … .

Web page structure

1. The structure of the HTML document

The HTML language follows the rules contained in the document type declaration file. (Document Type Definition, or DTD). A DTD is an XML document that defines which tags, attributes, and their values ​​are valid for a particular HTML type. Each version of HTML has its own DTD.

DOCTYPE responsible for the correct display of the web page by the browser. DOCTYPE defines not only the HTML version (e.g. html), but also the corresponding DTD file on the web.

Elements within a tag , form a document tree, the so-called document object model, DOM (document object model). At the same time, the element is the root element.


Rice. 1. The simplest structure of a web page

To understand the interaction of the elements of a web page, it is necessary to consider the so-called "family relationship" between elements. Relationships between multiple nested elements are classified into parent, child, and sibling relationships.

Ancestor An element that contains other elements. In Figure 1, the ancestor for all elements is . At the same time, the element is the ancestor of all the tags it contains:

,

, ,