What is domhtml. DOM manipulation in pure JavaScript

The DOM is often referred to as 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, and we also learned the difference between HTML source code and DOM.

In this tutorial, you'll find the HTML terminology you need to work with JavaScript and the DOM, learn about tree and DOM nodes, and learn 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 HTML and JavaScript terms is critical to working with the DOM. Let's take a quick look at the main terms.

Look at this HTML element:

Home

It has 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 is 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 the index.html file with id="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 type in 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 = document.getElementById("nav");

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

navLink.href = "https://www.wikipedia.org";

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

navLink.textContent = "Navigate to Wikipedia";

Now, if you view this element in the console or check the Elements tag, you will see how it has been updated.

navlink;
Navigate to Wikipedia

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 ​​on an element.

Tree and DOM 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 an element is a text node, and HTML comment– a comment node. Apart from these three types of nodes, the document object itself is the 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 - it is a schematic representation of family ties, which consists of parents, children and immediate family. Nodes in the DOM are also called parent and child nodes based on their relationship to other nodes.

For example, create a nodes.html file. 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 html child nodes. body contains three child nodes, and they are all at the same level - the type of the node does not affect the level of nesting.

Note: When working with DOM generated by HTML, padding source code HTML creates a lot of empty text nodes that won't be visible in the DevTools Elements tab. More about this at the link.

Node type definition

Each 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 of the Developer Tools, you may notice that whenever you click and select any line in the DOM, the value == $0 appears next to it. This is a very convenient way to access the currently active element.

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

Using the console, 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, which refers to ELEMENT_NODE. Do the same with 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 get the value of a text or comment node, and nodeName to get the element tag.

Changing the DOM with Events

So far, you've seen how to change the DOM in the console, and such 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 to combine what you've learned in this tutorial with what you already know to create an interactive button that changes the background color.

Go back to the 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 the user performs. The user hovers over an element, clicks on it, or presses a certain key on the keyboard - these are all events. In this particular case, the button needs to perform 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. You need to define a button element in the file 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", () => (
// action will go here
});

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

...

This is what the script looks like:

let button = document.getElementById("changeBackground");
button.addEventListener("click", () => (
document.body.style.backgroundColor = "fuchsia";
});

Save and close the file. Refresh the index.html page in the browser. Press new button, and the background color of the page will change.

Tags: ,

When opening any HTML document the browser first parses its content and, based on this parsing, creates the HTML Document Object Model or shorter DOM.

The DOM is made up of hierarchically nested objects called knots. Each node in the structure represents an HTML element located on the page.

Using the DOM you can interact ( read, modify, delete) with the content of HTML documents from scripts.

Below is the HTML code of the document and the DOM that would be created by the browser based on this code:

HTML DOM.

Hi all.

All the rectangles shown in the picture are objects (or nodes). The nodes of different type.

The Document node is marked in red. Any call to the DOM must begin with a call to this node.

Marked in green element nodes. For each HTML element on the page, the browser creates a corresponding element node.

The content of the elements is stored in text nodes. The text nodes are marked in blue in our diagram.

For everybody HTML attribute element is created attribute node. The attribute node is marked in pink in the diagram.

Note: don't forget that text is always stored in text nodes, not a property of the element. Those. in order to access the content of an HTML element, you must access the property of its text node.

Relationships between nodes

Nodes in an object structure are related to each other. There are several special terms to describe relationships between nodes:

parent node ( parent node) - the parent node in relation to the considered object is the node in which the considered object is nested. On our scheme in relation to the nodes

and

is parent. For Node

Название статьи

В этом коде корневым элементом является html . В него вложены элементы head и body . Элемент head содержит title , а body – h1 и div . Элемент div в свою очередь содержит h2 и p .

Теперь рассмотрим, как браузер на основании HTML-кода строит DOM-дерево.

Как строится DOM-дерево документа?

Как уже было описано выше браузер строит дерево на основе HTML-элементов и других сущностей исходного кода страницы. При выполнении этого процесса он учитывает вложенность элементов друг в друга.

В результате браузер полученное DOM-дерево использует не только в своей работе, но также предоставляет нам API для удобной работы с ним через JavaScript.

При строительстве DOM браузер создаёт из HTML-элементов, текста, комментариев и других сущностей этого языка объекты (узлы DOM-дерева).

В большинстве случаев веб-разработчиков интересуют только объекты (узлы), образованные из HTML-элементов.

При этом браузер не просто создаёт объекты из HTML-элементов, а также связывает их между собой определёнными связями в зависимости от того, как каждый из них относится к другому в коде.

Элементы, которые находятся непосредственно в некотором элементе являются по отношению к нему детьми. А он для каждого из них является родителем. Кроме этого, все эти элементы по отношению друг к другу являются сиблингами (братьями).

При этом в HTML любой элемент всегда имеет одного родителя (HTML-элемент, в котором он непосредственно расположен). В HTML у элемента не может быть несколько родителей. Исключение составляет только элемент html . У него нет родителя.

Чтобы получить DOM-дерево так как его строит браузер, необходимо просто «выстроить» все элементы в зависимости от их отношения друг к другу.

Создание DOM-дерева выполняется сверху вниз.

При этом корнем DOM-дерева всегда является сам документ (узел document). Далее дерево строится в зависимости от структуры HTML кода.

Например, HTML-код, который мы рассматривали выше будет иметь следующее DOM-дерево:

В самом верху этого дерева находится узел document . Данный узел связан с html , он является его ребёнком. Узел html образован элементом html (...). Узлы head (...) и body (...) имеют родительскую связь с html . По отношению друг ту другу они являются сиблингами, т.к. имеют одного родителя. Узел head связан с title (lt;title>...), он является его ребёнком. Узлы h1 и div связаны с body , для них он является родителем. Узел div связан с h2 (

...

) и p (), они являются его детьми.

Начинается дерево как было уже отмечено выше с объекта (узла) document . Он в свою очередь имеет один дочерний узел, образованный элементом html (...). Элементы head (...) и body (...) находятся в html и, следовательно, являются его детьми. Далее узел head является родительским для title (lt;title>...). Элементы h1 и div вложены в body , значит они являются его детьми. В div непосредственно расположены элементы h2 (

...

) и p (). Это значит, что узел div для каждого из них является родительским.

Вот так просто строится DOM-дерево в браузере на основании HTML-кода.

Зачем нужно знать, как строится DOM дерево? Во-первых, это понимание той среды, в которой вы хотите что-то изменять. Во-вторых, большинство действий при работе с DOM сводится к поиску (выбору) нужных элементов. Не зная как устроено DOM-дерево и связи между узлами найти какой-то определенный элемент в нём будет достаточно затруднительно.

Задание

На основе DOM-дерева, представленного на рисунке, создайте HTML-код.

Работа с DOM-моделью

Каждый объект Window имеет свойство document , ссылающееся на объект Document. Этот объект Document не является автономным объектом. Он является центральным объектом обширного API, известного как объектная модель документа (DOM), который определяет порядок доступа к содержимому документа.

Обзор модели DOM

Объектная модель документа (Document Object Model, DOM) - это фундаментальный прикладной программный интерфейс, обеспечивающий возможность работы с содержимым HTML и XML-документов. Прикладной программный интерфейс (API) модели DOM не особенно сложен, но в нем существует множество архитектурных особенностей, которые вы должны знать.

Прежде всего, следует понимать, что вложенные элементы HTML или XML-документов представлены в виде дерева объектов DOM. Древовидное представление HTML-документа содержит узлы, представляющие элементы или теги, такие как и

И узлы, представляющие строки текста. HTML-документ также может содержать узлы, представляющие HTML-комментарии. Рассмотрим следующий простой HTML-документ:

Это HTML-документ

Пример простого текста.

DOM-представление этого документа приводится на следующей диаграмме:

Тем, кто еще не знаком с древовидными структурами в компьютерном программировании, полезно узнать, что терминология для их описания была заимствована у генеалогических деревьев. Узел, расположенный непосредственно над данным узлом, называется родительским по отношению к данному узлу. Узлы, расположенные на один уровень ниже другого узла, являются дочерними по отношению к данному узлу. Узлы, находящиеся на том же уровне и имеющие того же родителя, называются сестринскими . Узлы, расположенные на любое число уровней ниже другого узла, являются его потомками. Родительские, прародительские и любые другие узлы, расположенные выше данного узла, являются его предками.

Каждый прямоугольник на этой диаграмме является узлом документа, который представлен объектом Node . Обратите внимание, что на рисунке изображено три различных типа узлов. Корнем дерева является узел Document, который представляет документ целиком. Узлы, представляющие HTML-элементы, являются узлами типа Element, а узлы, представляющие текст, - узлами типа Text. Document, Element и Text - это подклассы класса Node. Document и Element являются двумя самыми важными классами в модели DOM.

Тип Node и его подтипы образуют иерархию типов, изображенную на диаграмме ниже. Обратите внимание на формальные отличия между обобщенными типами Document и Element, и типами HTMLDocument и HTMLElement. Тип Document представляет HTML и XML-документ, а класс Element представляет элемент этого документа. Подклассы HTMLDocument и HTMLElement представляют конкретно HTML-документ и его элементы:

На этой диаграмме следует также отметить наличие большого количества подтипов класса HTMLElement, представляющих конкретные типы HTML-элементов. Каждый из них определяет JavaScript-свойства, отражающие HTML-атрибуты конкретного элемента или группы элементов. Некоторые из этих специфических классов определяют дополнительные свойства или методы, которые не являются отражением синтаксиса языка разметки HTML.

Выбор элементов документа

Работа большинства клиентских программ на языке JavaScript так или иначе связана с манипулированием элементами документа. В ходе выполнения эти программы могут использовать глобальную переменную document, ссылающуюся на объект Document. Однако, чтобы выполнить какие-либо манипуляции с элементами документа, программа должна каким-то образом получить, или выбрать, объекты Element, ссылающиеся на эти элементы документа. Модель DOM определяет несколько способов выборки элементов. Выбрать элемент или элементы документа можно:

по значению атрибута id;

по значению атрибута name;

по имени тега;

по имени класса или классов CSS;

по совпадению с определенным селектором CSS.

Все эти приемы выборки элементов описываются в следующих подразделах.

Выбор элементов по значению атрибута id

Все HTML-элементы имеют атрибуты id. Значение этого атрибута должно быть уникальным в пределах документа - никакие два элемента в одном и том же документе не должны иметь одинаковые значения атрибута id. Выбрать элемент по уникальному значению атрибута id можно с помощью метода getElementById() объекта Document:

Var section1 = document.getElementById("section1");

Это самый простой и самый распространенный способ выборки элементов. Если сценарию необходимо иметь возможность манипулировать каким-то определенным множеством элементов документа, присвойте значения атрибутам id этих элементов и используйте возможность их поиска по этим значениям.

В версиях Internet Explorer ниже IE8 метод getElementById() выполняет поиск значений атрибутов id без учета регистра символов и, кроме того, возвращает элементы, в которых будет найдено совпадение со значением атрибута name.

Выбор элементов по значению атрибута name

HTML-атрибут name первоначально предназначался для присваивания имен элементам форм, и значение этого атрибута использовалось, когда выполнялась отправка данных формы на сервер. Подобно атрибуту id, атрибут name присваивает имя элементу. Однако, в отличие от id, значение атрибута name не обязано быть уникальным: одно и то же имя могут иметь сразу несколько элементов, что вполне обычно при использовании в формах радиокнопок и флажков. Кроме того, в отличие от id, атрибут name допускается указывать лишь в некоторых HTML-элементах, включая формы, элементы форм и элементы