Document Object Model & Browser Object Model

Прежде чем приступить к изучению DOM и BOM познакомимся с консолью разработчика.

`Console API`

Console API добавляет глобальную переменную JavaScript под названием console для всех веб-страниц. Этот объект содержит набор удобных функций для выполнения общих задач: выбора и проверки DOM элементов, отображение данных в удобном для чтения формате, а также мониторинг событий DOM.

Консоль можно открыть нажав на меню Console Панели разработчика, либо по нажатию клавиши ESC.

`console.clear()`

Пожалуй одна из самых простых в понимании команд. Очистка консоли.

`console.log(object[, object, ...])`

Метод применяется для вывода сообщений на консоль(иными словами процесс протоколирования). В качестве параметров может принимать один или более аргументов.

Первым аргументом для вывода может быть строка, содержащая один или несколько спецификаторов формата. Спецификатор формата состоит из символа %, за которым следует буква, указывающая на тип выводим данных.

Вот не полный набор спецификаторов формата, которые можно использовать для подстановки строк:

Спецификаторы формата
`%s`	Строка
`%d или %i`	Целые числа
`%f / %.xf`	Число с плавающей точкой; `х` обозначает число знаков после запятой, до которого число должно быть округлено (если неуказывается `х`, то число не будет округленно). Округление доступно в Firefox.
`%O`	Вывод объектов JavaScript

`console.info(object[, object, ...])`

Так же как и console.log() выводит сообщения на консоль, но в сообщение добавляется круглая иконка с символом "i" внутри.

`console.warn(object[, object, ...])`

Так же как и console.log() выводит сообщения на консоль, но в сообщение добавляется треугольная иконка с восклицательным знаком внутри.

`console.error(object[, object, ...])`

Так же как и console.log() выводит сообщения на консоль. В начале сообщения добавляется иконка с крестиком внутри. Далее идёт текс сообщения и ссылка на номер строки, вызвавщий метод console.error().

`console.group*`

Методы console.group(), console.groupEnd(), console.groupCollapsed() служат для группировки выводимой информации на консоль в виде списка.

Все следующие выводы на консоль после метода console.group() будут группироваться в один список. console.groupEnd() закрывает список.

Метод console.groupCollapsed() похож на console.group() за одним лишь исключением. Группа созданая с помощью console.groupCollapsed() по умолчанию находится в закрытом состоянии("свёрнутой").

`console.table`

console.table выводит информацию на консоль в виде таблицы.

Данный метод обеспечивает простой способ просмотра объектов и массивов, которые содержат и данные. При вызове, он будет принимать свойства объекта и создать заголовки на основе их имён.

`console.time*`

Методы console.time() и console.timeEnd() служат для запуска и остоновки таймера. При создания таймер необходимо обязательно указать его имя.

Вызов метода console.timeEnd() останавливает работу указаного таймера и выводит прошедшее время с его запуска.

`console.count([name])`

console.count() выводит на консоль число, равное количеству вызовов строки, где указан данный метод. Так же необходимо указать имя счётчика. Это имя будет отображаться при выводи значения счётчика. Если имя не задано, то в качестве имени берётся номер строки.

`console.dir(object)`

Метод console.dir() выводит список всех свойств объекта. Входное значение для отображения свойств должно быть объектом.

Были рассмотрены не все возможности Console API. Больше информации по данному API можно найти ознакомившись с Chrome Console API и Firebug Console API.

Объектная модель документа `DOM`

Cтандарт W3C DOM

W3schools

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

Это API обеспечивает структурированное представление документа (дерева), и определяет способ, по которому структура может быть доступна для программы, для изменения структуры документа, его стиля и содержания.

Любой документ известной структуры с помощью DOM может быть представлен в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текстовый, графический или любой другой объект. Узлы связаны между собой отношениями «родительский-дочерний».

По сути, DOM связывает веб-страницы со скриптами или языками программирования.

Возможности `DOM`

DOM - не является языком программирования, но без него, JavaScript не имел бы никакого представления о веб-странице и её элементах. По сути объектная модель документа является основным инструментом для динамического изменения веб-страниц.

При создании динамических веб-страниц разработчик работает не с HTML разметкой страницы, а с объектами DOM, которые браузер создаёт на основе этой разметки.

Фактически, DOM предоставляет возможность делать со страницей всё, что угодно: чтение информации из элементов, создание, добавление, удаление и измение элементов.

Дерево `DOM`

Браузер, получая код HTML из интернета, сначала строит дерево узлов (объектов) в своей памяти. А уже потом на основе этого дерева "рисует" картинку этой страницы в своём окне или вкладке.

Условный процесс отображения страницы в браузере

Постороим дерево DOM для следующего примера

<html>
    <head>
        <title>Title window</title>
        <meta charset="utf-8">
    </head>
	
    <body>
        <h1>Big main title page</h1>
        <div>
            <h2>Small title</h2>
            <p>Text on article. Hello, world!!</p>
        </div>
    </body>
	
</html>

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

Связи между узлами определяются на основе того что каждый элемент в HTML документе вложен в какой-то другой элемент. Элемент, который содержит другие элементы, по отношению к ним является родителем. У любого элемента в HTML коде есть свой родитель и притом только один. Если элемент содержит другие элементы, то для него они являются дочерними (детьми, прямыми потомками). Один элемент может содержать сколько угодно много дочерних элементов.

Дерево DOM строится браузером сверху вниз.

Дерево `DOM` по разметки из примера выше

В самом верху этого дерева находится узел document. Данный узел имеет один дочерний узел html, который образован элементом <html>. В свою очередь узел html имеет уже два дочерних элемента head и body, и т.д.

Теги образуют узлы-элементы (ELEMENT_NODE). Естественным образом одни узлы вложены в другие. Структура дерева образована исключительно за счет них. Текст же внутри элементов образует текстовые узлы(TEXT_NODE). И то и другое - равноправные узлы дерева DOM.

Текстовый узел содержит исключительно строку текста и не может иметь потомков, то есть он всегда на самом нижнем уровне.

Типы узлов (NODE) документа

В предыдущем примере, дерево DOM состоит только из узлов, образованных элементами. Но, узлы в дереве образуются не только на основе элементов, но и на основе текста, комментариев и вообще на основе всего, что есть в HTML разметке.

Например, текст, заключённый между открывающим и закрывающим тегом <p>, тоже является узлом. Но он является не узлом элемента, а текстовым узлом. Данный текстовый узел будет являться дочерним по отношению к узлу, образованным элементом <p>.

Пример не учитывает текст, состоящий из одних пробельных символов, перевода на новую строку, пустые строки. И такие текстоые узлы должны идти практически после каждого тэга(если взять предыдущий пример).

Пробелы, знаки табуляции и другие управляющие символы, которые например, располагаются между элементами, тоже образуют текстовые узлы.

DOM, в котором отсутствуют пустые текстовые узлы, а также смежные текстовые узлы называют нормализованным.

<html><head><title>Title window</title></head><body><h1>Big main title page</h1>...</html>

Всего различают 12 типов узлов, но в основном используются узлы, образованные на основе HTML элементов и текста. Рекомендуется использовать только 7 из них(остальные считаются устаревшыми), но на практике в основном работают с 4.

Типы узлов (NODE) документа
Тип узла	Код типа (nodeType)	Описание
`ELEMENT_NODE`	1	Узел элемента
`ATTRIBUTE_NODE`	2	Вообще говоря, атрибуты тоже считаются узлами в DOM-модели, родителем которых является элемент DOM, у которого они указаны. Однако, в веб-программировании в эти дебри обычно не лезут, и считают атрибуты просто свойствами DOM-узла, которые можно устанавливать и менять.
`TEXT_NODE`	3	Текстовый узел
`CDATA_SECTION_NODE`	4	Узел CDATA-раздела(символьных данных)
`ENTITY_REFERENCE_NODE`	5
`ENTITY_NODE`	6
`PROCESSING_INSTRUCTION_NODE`	7	Узел инструкции обработки
`COMMENT_NODE`	8	Узел комментария
`DOCUMENT_NODE`	9	Узел документа
`DOCUMENT_TYPE_NODE`	10	Узел типа документа
`DOCUMENT_FRAGMENT_NODE`	11	Узел фрагмента документа
`NOTATION_NODE`	12

Всё, что есть в HTML разметке, находится и в DOM.

Даже директива <!DOCTYPE>, которая ставится в начале HTML, тоже является DOM-узлом, и находится в дереве DOM непосредственно слева от <html>. На иллюстрациях этот факт скрыт, поскольку с этим узлом мало кто работает.

У каждого узла есть определённый тип, который определяется числом от 1 до 12. Определить тип узла в JavaScript можно с помощью свойства nodeType.

Для манипуляций с DOM используется объект document.

Кроме определения типа узла (nodeType) с помощью JavaScript можно также узнать его имя и значение:

nodeName - возвращает имя узла. Если узел является элементом, то свойство nodeName возвращает имя тега. Для других типов узлов данное свойство будет возвращать различные имена: "#text" (для текстовых узлов), "#comment" для комментариев, "#document" для документа и .т.д.
nodeValue — строка, представляющая значение узла. Возвращает следующие значения в зависимости от типа узла:
- возвращает null для узла элемента и узла документа
- возвращает содержимое для текстового узла
- возвращает контент для узла комментария.

Навигация по DOM-элементам

DOM позволяет делать что угодно с HTML-элементом и его содержимым, но для этого нужно сначала его получить.

Доступ к DOM начинается с объекта document. Из него можно добраться до любого узла.

Начнем с вершины дерева. Самый верхний тег. В случае корректной HTML-страницы, это будет <html>.

    //получаем объект хранящий структуру,свойства, дочерние элементы html
    var html = document.documentElement;
	
    //соответствует тэгу body
    var body = document.body;
	
    //также можем получить head
    var head = document.head;

Так же с вершины дерева можно пойти дальше вниз. Для этого каждый DOM-узел содержит массив всех детей(childNodes), отдельно - ссылки на первого(firstChild) и последнего ребенка(lastChild) и еще ряд полезных свойств.

    //вывод на консоль всех дочерних элементов body
    for(var i=0; i < document.body.childNodes.length; ++i) {
        console.log(document.body.childNodes[i]);
    }

Свойства firstChild и lastChild показывают на первый и последний дочерние элементы и равны null, если детей нет.

    //вывод на консоль первого и последнего элементы head
    //лучше всего head привести в нормализованный вид
    var last = document.head.lastChild;
    var first =  document.head.firstChild;

    /* ************************************************** */
    elem.childNodes[0] === elem.firstChild
    elem.childNodes[elem.childNodes.length - 1] === elem.lastChild

Родитель доступен через parentNode. Если долго идти от одного элемента к другому, то рано или поздно можно дойти до корня DOM, то есть до document.documentElement, а затем и document.

    var parent = document.body.parentNode;//мама BODY
    var parentParent = parent.parentNode;//бабушка BODY

Кроме как двигаться сверху вниз и снизу вверх по дереву, JavaScript также позволяет двигаться в горизонтальном направлении между соседними узлами, т.е. узлами, которые имеют одного родителя.

Доступ к элементам слева и справа данного можно получить по ссылкам previousSibling / nextSibling.

nextSibling - для перемещения слева направо, т.е. к следующему соседу (сиблингу). Если соседа справа нет, то данное свойство возвращает значение null.

previousSibling - для перемещения справа налево, т.е. к предыдущему соседу (сиблингу). Если соседа слева нет, то данное свойство возвращает значение null.

    var body = document.body.childNodes;//список дочерних элементов BODY
    var main = body[1];//должны получить MAIN
	
    console.log("Сосед справа \n %O",main.nextSibling);
    console.log("Сосед слева \n %O",main.previousSibling);

Навигационные ссылки, описанные выше, равно касаются всех узлов в документе. В частности, в childNodes сосуществуют и текстовые узлы и узлы-элементы и узлы-комментарии, если есть. Но для большинства задач текстовые узлы нам не интересны.

Поэтому существует дополнительный набор ссылок, которые могут перемещаться по узлам дерева, образованными только элементами.

Ссылки на узлы дерева образованные элементами

Эти ссылки похожи на предыдущие, но только в ряде мест стоит слово Element:

children - возвращает коллекцию дочерних элементов (детей); только соответствующие тегам
firstElementChild, lastElementChild - возвращает первый и последний дочерний узел
previousElementSibling, nextElementSibling - следующий и предыдущий соседний узел
parentElement - родительский узел

Зачем parentElement? Неужели бывают родители не-элементы?
Свойство elem.parentNode возвращает родитель элемента. Оно всегда равно parentElement, кроме одного исключения:
    alert( document.documentElement.parentNode );//document
    alert( document.documentElement.parentElement );//null
				
Иногда это имеет значение, если хочется перебрать всех предков и вызвать какой-то метод, а на документе его нет.

Поиск элементов

Прямая навигация от родителя к потомку удобна, если элементы рядом. А если нет? По поиск становиться не эффективным.

Поэтому, чтобы найти узлы в дереве, веб-разработчики используют специально предназначенные для поиска методы объекта document или узла (node).

`document.getElementById(elementID)`

Метод возвращает элемент в документе, имеющий указанный идентификатор, в виде объекта(узла). Если элемента с указанным идентификатором не существует, то данный метод возвращает значение null.

`getElementsByTagName(tagname)`

Метод ищет все элементы с заданным тегом внутри элемента(или внутри document) и возвращает их в виде списка.

    document.getElementsByTagName(tagname);
    node.getElementsByTagName(tagname);

Обратим внимание: в отличие от getElementById, который существует только в контексте document, метод getElementsByTagName может искать внутри любого элемента.

getElementsByTagName(tagname) возвращает все найденные элементы в виде объекта NodeList (коллекции узлов). Получение определённого узла в коллекции осуществляется по индексу.

Данный метод имеет один обязательный параметр tagname, представляющий собой строку, содержащую имя тега, которое указывается прописными буквами. Если в качестве параметра указать строку, содержащую звёздочку ("*"), то мы получим все элементы в документе (для объекта document) или все дочерние элементы узла.

`document.getElementsByName(name)`

В HTML5 атрибут name признан устаревшим. Рекомендуется заменить его атрибутом id.

Метод getElementsByName(name) возвращает все найденные элементы в документе, имеющих указанное имя (значение атрибута name), в виде коллекции узлов.

Элементы (узлы) добавляются в коллекцию в том порядке, в котором они встречаются в дереве. Получение определённого узла в коллекции осуществляется по индексу.

    document.getElementsByName(name);

Данный метод имеет один обязательный параметр name, представляющий собой строку, содержащую значение атрибута name.

`getElementsByClassName(className)`

Метод возвращает коллекцию элементов имеющих имя класса className. Находит элемент и в том случае, если у него несколько классов, а искомый – один из них.

Как и getElementsByTagName, этот метод может быть вызван и в контексте DOM-элемента, и в контексте документа.

    document.getElementsByClassName(className);
    node.getElementsByClassName(className);

`querySelectorAll(cssSelector)`

Метод возвращает все найденные элементы внутри документе (для document) или среди дочерних узлов (для node), которые соответствуют CSS селектору, указанному в качестве параметра данного метода, в виде коллекции узлов.

    document.querySelectorAll(cssSelector);
    node.querySelectorAll(cssSelector);

`querySelector(cssSelector)`

Данные метод возвращает не все, а только первый элемент, соответствующий CSS-селектору.

Другими словами, результат – такой же, как и при elem.querySelectorAll(cssSelector)[0], но в последнем вызове сначала ищутся все элементы, а потом берётся первый, а в elem.querySelector(cssSelector) ищется только первый, то есть он эффективнее.

Этот метод часто используется, когда мы заведомо знаем, что подходящий элемент только один, и хотим получить в переменную сразу его.

    document.querySelector(cssSelector);
    node.querySelector(cssSelector);

`matches(cssSelector)`

Этот метод ничего не ищет, а проверяет, удовлетворяет ли элемент селектору.

Метод elem.matches(cssSelector) вернет true или false, в зависимости от того, соответствует ли элемент указаному css-селектору.

Ранее в спецификации он назывался matchesSelector, и большинство браузеров поддерживают его под этим старым именем, либо с префиксами ms/moz/webkit.
Поддержка в браузерах

`closest(cssSelector)`

Метод возвращает ближайшего предка текущего элемента (или сам текущий элемент), который соответствует указанному селектору. Если нет такого предка, он возвращается null.

Иначе говоря, метод closest бежит от текущего элемента вверх по цепочке родителей и проверяет, подходит ли элемент под указанный CSS-селектор. Если подходит – останавливается и возвращает его.

Свойства узлов

До этого были рассмотрены следующие свойства: nodeType, nodeName, nodeValue, которые содержат тип узла, имя узла и значение узла.

Теперь мы рассмотрим ещё пару основных свойств узла(но не все), некоторые из них понадобятся нам для добавления узов в дерево DOM.

`tagName`

Свойство возвращает HTML-тег элемента.

    var elementName = element.tagName;

Например

    <span id="born">Text on article. Hello, world!!</p>

    var span = document.getElementById("born");
    console.log(span.tagName);//SPAN

Разница между tagName и nodeName неочевидно, но она отражена в названиях свойств.

    document.body.nodeName;//BODY
    document.body.tagName;//BODY

Свойство tagName есть только у элементов.

Свойство nodeName определено для любых узлов, для элементов оно равно tagName, а для не-элементов обычно содержит строку с типом узла.

Таким образом, при помощи tagName мы можем работать только с элементами, а nodeName может что-то сказать и о других типах узлов.

`innerHTML`

Свойство позволяет получить или задать HTML-содержимое элемента. Значение, возвращаемое innerHTML - всегда валидный HTML-код. При записи можно попробовать записать что угодно, но браузер исправит ошибки.

`outerHTML`

Свойство возвращает HTML элемент целиком в виде строки, содержащей сам элемент и его дочерние элементы.

Изменить outerHTML элемента невозможно.

Пример свойств `innerHTML` и `outerHTML`

`data`

Свойство innerHTML есть только у узлов-элементов, а содержимое других узлов, например, текстовых или комментариев, доступно на чтение и запись через свойство data.

`textContent`

Позволяет задавать или получать текстовое содержимое элемента и его потомков.

Свойство textContent возвращает конкатенацию свойств textContent всех дочерних узлов, исключая комментарии и строки кода. Если узел не имеет дочерних узлов, будет возвращена пустая строка.

Установка данного значения удаляет все дочерние узлы и заменяет их единичным текстовым узлом с указанным значением.

Другие свойства узлов

У DOM-узлов есть и другие свойства, зависящие от типа, например: value, id, href, src и т.д.

Чтобы узнать какие свойства есть у конкретного типа элемента достаточно посмотреть список элементов HTML5 и найти в нём интересующий вас элемент и прочитать секцию с interface.

Самый простой способо - это вывести в консоль элемент вызовом console.dir(element).

Работа с атрибутами

У любого элемента (узла) есть свойство attributes, с помощью которого Вы можете получить коллекцию его атрибутов, в виде объекта NamedNodeMap. Каждый атрибут в этой коллекции имеет имя, который совпадает с именем атрибута. Доступ к атрибуту (узлу) в этой коллекции осуществляется по его индексу или с помощью метода item(). Отсчёт атрибутов (узлов) в этой коллекции начинается с 0.

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

У каждого элемента (узла) есть методы (getAttribute(), setAttribute(), removeAttribute(), hasAttribute()), которые позволяют работать с его атрибутами более просто.

`getAttribute(attributeName)`

Метод возвращает значение атрибута, указанного в качестве параметра. Если данного атрибута у элемента нет, то данный метод возвращает пустую строку ("") или null.

`setAttribute(name, value)`

Метод добавляет указанный атрибут к элементу и присваивает ему указанное значение. Если указанный атрибут у элемента уже есть, то данный метод изменяет только его значение.

`removeAttribute(attributeName)`

Метод удаляет указанный атрибут у элемента. Данный метод имеет один обязательный параметр - это строка, содержащая имя атрибута, который Вы хотите удалить у элемента. Данный метод в качестве результата ничего не возвращает.

`hasAtrribute(attributeName)`

Метод возвращает true, если указанный атрибут существует у элемента. В противном случае данный метод возвращает false. Данный метод имеет один обязательный параметр - это строка, содержащая имя атрибута, который Вы хотите проверить на существование у элемента.

Работа с классами элементов

Работа с классами элемента(узла) с помощью методов getAttribute(), setAttribute() и removeAttribute() представляется затруднительной, когда например Вам необходимо добавить, переключить или удалить какой-то один определённый класс у элемента. Данные методы позволяют работать со значением атрибута class только целиком и не позволяют управлять его отдельными классами.

Для того чтобы управлять отдельными классами элемента необходимо использовать свойство classList. Данное свойство представляет значение атрибута class в виде объекта DOMTokenList. Само свойство classList доступно только для чтения, а управление классом (классами) элемента осуществляется с помощью методов объекта DOMTokenList.

`elem.classList.contains(class)`

Возвращает true или false в зависимости от того имеет ли элемент указанный класс.

`elem.classList.add(class1,class2,...)`

Добавляет один или несколько к элементу классов. Если указанный класс уже есть у элемента, то он не будет добавлен.

`elem.classList.remove(class1,class2,...)`

Удаляет один или несколько указанных у элемента классов. Если Вы указали класс, который не существует у элемента, то это не приведёт к ошибке в работе метода.

`elem.classList.toggle(class, true|false)`

Переключает указанное имя класса у элемента. Если класса class нет, добавляет его, если есть – удаляет.

Метод toggle имеет 2 параметра: class (обязательный) - указывается имя класса, который надо переключить; true|false (необязательный) - логическое значение, которое принудительно заставляет включить или выключить указанный класс у элемента.

При использовании метода toogle с 2 параметрами, он переключает класс в зависимости от значения 2 параметра. Если 2 параметр имеет значение true, то данный метод добавляет класс к элементу. А если 2 параметр имеет значение false, то данный метод удаляет указанный класс у элемента.

Нестандартные атрибуты(`data`-атрибуты)

С помощью нестандартных атрибутов можно привязать к элементу данные, которые будут доступны в JavaScript. Как правило, это делается при помощи атрибутов data-*

Стандарт HTML5 специально разрешает атрибуты data-* и резервирует их для пользовательских данных.

К таким атрибутам можно обратиться не только как к атрибутам, но и как к свойствам, при помощи специального свойства dataset

Пример использования атрибутов

Обратим внимание(в примере выше) – название атрибута data-count-default трансформировалось в dataset.countDefault. Дефис превращается в большую букву.

Добавление и удаление узлов

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

Добавление нового узла к дереву обычно осуществляется в 2 этапа:

Создание необходимого узела
Указать место в дереве, куда необходимо вставить узел.

`document.createElement(tagname)`

Метод создаёт элемент (узел) с указанным тегом. Имеет один обязательный параметр tagname - это строка, содержащая имя создаваемого элемент(тега). В качестве результата данный метод возвращает элемент, который был создан.

    var newElem = document.createElement("div");

`document.createTextNode(data)`

Создаёт текстовый узел с указанным текстом. Метод имеет один обязательный параметр text - это строка, содержащая текст текстового узла. В качестве результата данный метод возвращает текстовый узел, который был создан.

    var textElem = document.createTextNode("Hello, world!!");

Это пока что пустой пример. Так сказать заготовка.

Давайте создадит новый элемент. Добавим к нему уже заготовленый класс и укажем текст.

После этого у нас есть готовый DOM-элемент. Пока что он присвоен в переменную, но не виден, так как никак не связан со страницей.

`parentElem.appendChild(elem)`

Метод добавляет узел в конец списка дочерних элементов указанного родительского узла. В качестве результата данный метод возвращает добавленный узел.

    var newElem = document.createElement("div");
    var parentElement = document.body;
	
    parentElement.appendChild(newElement);//будет последним элементом в body

`parentElem.insertBefore(elem, nextSibling)`

Вставляет elem в коллекцию детей parentElem, перед элементом nextSibling. nextSibling (не обязательный) - это дочерний узел элемента перед которым, необходимо вставить узел. Если второй параметр не указать, то данный метод вставит его в конец, т.е. в качестве последнего дочернего узла элемента для которого вызывается данный метод. В качестве результата метод insertBefore(elem, nextSibling) возвращает вставленный узел.

    var newElem = document.createElement("div");
    var parentElement = document.body;
	
    parentElement.insertBefore(newElement, parentElement.firstChild);//новый элемент будет первым

Теперь добавим наш новый элементв в DOM

`node.cloneNode(deep)`

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

Вызов node.cloneNode(true) создаст «глубокую» копию элемента – вместе с атрибутами, включая подэлементы. Если же вызвать с аргументом false, то копия будет сделана без дочерних элементов. Это нужно гораздо реже.

`parentElem.removeChild(child)`

Метод удаляет дочерний узел из писка детей родительского элемента parentElem. Метод removeChild(child) возвращает в качестве значения удалённый узел или null, если узел, который мы хотели удалить, не существовал.

`parentElem.replaceChild(newChild, oldChild)`

Метод удаляет дочерний узел oldChild из писка детей родительского элемента parentElem и вставляет на его место newChild.

Document Object Model & Browser Object Model

Console API

console.clear()

console.log(object[, object, ...])

console.info(object[, object, ...])

console.warn(object[, object, ...])

console.error(object[, object, ...])

console.group*

console.table

console.time*

console.count([name])

console.dir(object)

Объектная модель документа DOM

Возможности DOM

Дерево DOM

Типы узлов (NODE) документа

Навигация по DOM-элементам

Поиск элементов

document.getElementById(elementID)

getElementsByTagName(tagname)

document.getElementsByName(name)

getElementsByClassName(className)

querySelectorAll(cssSelector)

querySelector(cssSelector)

matches(cssSelector)

closest(cssSelector)

Свойства узлов

tagName

innerHTML

outerHTML

data

textContent