{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"436ec"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":156}],"inlineStyleRanges":[{"length":193,"offset":0,"style":"ITALIC"},{"length":10,"offset":0,"style":"BOLD"}],"text":"От автора: в этой статье мы узнаем все о том, как обходить элементы DOM в JavaScript, а также вносить в них изменения. Мы продолжаем тему, начатую в статье Изучаем DOM! (Часть 1). Итак, начнем!","type":"unstyled","key":"37efl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обход DOM","type":"header-three","key":"93fd8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда мы проходим DOM, мы по сути перемещаемся по нему. Мы работаем с родительскими дочерними и одноуровневыми свойствами, чтобы применить JavaScript к элементам DOM. Мы будем использовать новый пример, который приведен ниже:","type":"unstyled","key":"6oo89"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\n Traversing the DOM\n\n\n\n

Traversing the DOM

Let's work with this example to MASTER the DOM!

List of Items..

Pizza
Burgers
Doritos

\n\n\n\n\n","type":"unstyled","key":"9l81q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наш файл выглядит в браузере так:","type":"unstyled","key":"bo77a"},{"data":{"image":{"id":"5c9a661d82fd5400b32a1cab"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9d3qj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Корневые узлы","type":"header-three","key":"17ai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объект document является корнем каждого узла в DOM. Следующий уровень — это объект window, который включает в себя такие элементы, как вкладки браузера, панели инструментов, командные строки и оповещения. Мы будем работать с DOM и, следовательно, с объектом document, который состоит из того, что находится внутри window.","type":"unstyled","key":"421k1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По умолчанию каждый документ содержит элементы html, head и body. Проверьте содержимое каждого из них, запустив в консоли следующее:","type":"unstyled","key":"9chmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.head; // ► ...\ndocument.body; // ► ...","type":"unstyled","key":"e24p8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Родительские узлы","type":"header-three","key":"5tl4c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как упоминалось ранее, узлы в DOM называются родительскими, дочерними и одноуровневыми, в зависимости от их отношения к другим узлам. Родителем любого конкретного узла является узел, который находится на один уровень выше его в иерархии DOM. В нашем примере:","type":"unstyled","key":"1f3o5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f3b2p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html является родителем head, body и script.","type":"unstyled","key":"4fdhd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body является родителем h1, h2, p и ul, а не li так как li на два уровня ниже от body.","type":"unstyled","key":"7geen"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы можем проверить родителя элемента p, например, с помощью свойства parentNode. Поскольку мы присвоили p переменной, все что нам нужно сделать, это набрать:","type":"unstyled","key":"6jip4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"p.parentNode; // ► ...","type":"unstyled","key":"4dg6i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы можем даже подняться на два уровня:","type":"unstyled","key":"71g1m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"p.parentNode.parentNode; // ► ...","type":"unstyled","key":"4dpk4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дочерние узлы","type":"header-three","key":"243k2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дочерними узлами являются узлы, которые находятся на один уровень ниже. Любые узлы за пределами одного уровня вложенности обычно называются дочерними. Есть целый ряд таких свойств, с которыми мы часто работаем: childNodes, firstChild, lastChild, children, firstElementChildи lastElementChild. Начнем со свойства childNodes, оно возвращает список всех дочерних элементов данного узла:","type":"unstyled","key":"f03sp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ul.childNodes // ► NodeList(7) [text, li, text, li, text, li, text]","type":"unstyled","key":"8t9u8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возможно, вы ожидаете, что будут возвращены только три li? Узлы text фактически являются пробелами для установки отступов между элементами — которые DOM рассматривает в качестве узлов. Вы не можете видеть их на вкладке Элементы, так как Dev Tools автоматически удаляет эти узлы.","type":"unstyled","key":"eitjp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По этой причине, если мы попытаемся изменить цвет фона, например, первого дочернего узла, произойдет сбой, так как первый дочерний элемент является текстом.","type":"unstyled","key":"fph3h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ul.firstChild.style.background = \"purple\";\n\n// output:\n\nUncaught TypeError: Cannot set property 'background' of undefined","type":"unstyled","key":"45l5o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда мы хотим работать только с узлами элементов, нам нужно использовать свойства children, firstElementChild и lastElementChild. ul.children вернул бы только три элемента li. И чтобы изменить только первый li, нам нужно использовать:","type":"unstyled","key":"8fn03"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ul.firstElementChild.style.background = 'purple';","type":"unstyled","key":"fqtts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот наша обновленная страница:","type":"unstyled","key":"csre5"},{"data":{"image":{"id":"5c9a661d5e29d000b3872122"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ckl4j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если мы хотим изменить все элементы children, мы могли бы использовать цикл for…of следующим образом:","type":"unstyled","key":"852cv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"for (let element of ul.children) {\n element.style.background = 'purple';\n}","type":"unstyled","key":"au8if"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь для всех дочерних элементов цвет фона изменен:","type":"unstyled","key":"3labc"},{"data":{"image":{"id":"5c9a661d923be2390e3cf094"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2hsc3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если мы посмотрим на элемент p, то увидим, что он содержит как текст, так и другие элементы (тег strong).","type":"unstyled","key":"6k0ua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"for (let element of p.childNodes) {\n console.log(element);\n}\n\n// output:\n\n\"Let's work with this example to \" \nMASTER \n\" the DOM!\"","type":"unstyled","key":"ctrrd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Свойство childNodes полезно, когда мы хотим получить доступ к этой информации. И childNodes, и children не возвращают стандартные массивы JavaScript (со всеми связанными с ними свойствами и методами), а скорее объекты, подобные массивам. Однако, как и в случае с массивом, вы можете получить доступ к узлам по номеру индекса или даже найти их свойство length.","type":"unstyled","key":"b702q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.body.children[3].lastElementChild.style.background = 'pink';","type":"unstyled","key":"817q3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С помощью этого кода мы найдем последний элемент четвертого дочернего li элемента ul из body и применим стиль…","type":"unstyled","key":"8hkqj"},{"data":{"image":{"id":"5c9a661d98af35323c1f289f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dssi5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используя свойства parent и child, вы можете получить любой узел в DOM!","type":"unstyled","key":"5kgmo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Узлы одного уровня","type":"header-three","key":"f00ou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте теперь рассмотрим одноуровневые узлы. Одноуровневый узел — это любой узел на одном уровне дерева в DOM. Они не обязательно должны быть одного и того же типа — узлы текста, элементы и комментарии могут быть одноуровневыми. Свойства, которые часто используются — nextSibling, previousSibling, nextElementSibling и previousElementSibling.","type":"unstyled","key":"68nbf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Свойства одноуровневого узла работают так же, как и для дочерних узлов: previousSibling и nextSibling получат узел, который непосредственно предшествует или следует за указанным узлом, previousElementSibling и nextElementSibling получат только узлы элемента. Давайте выберем средний элемент из нашего ul:","type":"unstyled","key":"1e7jr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const burger = ul.children[1];","type":"unstyled","key":"9n4ih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И давайте используем свойства Sibling для доступа к следующему и предыдущему элементам (не включая пробелы):","type":"unstyled","key":"63dtn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"burger.nextElementSibling.style.background = 'orange';\nburger.previousElementSibling.style.background = 'green';","type":"unstyled","key":"ehuma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эти изменения в действии:","type":"unstyled","key":"d6pvi"},{"data":{"image":{"id":"5c9a661d5c89e200b37af35a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ahvar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внесение изменений в DOM","type":"header-three","key":"84aan"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте теперь посмотрим, как мы можем добавлять, изменять, заменять и удалять узлы из DOM. Мы рассмотрим конкретные методы createElement() и createTextNode(), а также node.textContentи node.innerHTML.","type":"unstyled","key":"9nf99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание новых узлов","type":"header-three","key":"a1g7r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом разделе мы будем работать со следующим HTML:","type":"unstyled","key":"d5tia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\n Master the DOM!\n \n\n\n

Master the DOM!

\n \n\n","type":"unstyled","key":"clpoa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте вкладку Консоль в Инструментах разработчика. Давайте используем метод createElement() объекта document для создания нового элемента p.","type":"unstyled","key":"562mu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const paragraph = document.createElement('p');\nconsole.log(paragraph); //

","type":"unstyled","key":"1mj51"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отлично! Переменная paragraph дает нам элемент p. Теперь мы можем добавить текст к элементу с помощью свойства textContent:","type":"unstyled","key":"aqc09"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"paragraph.textContent = \"I'm a paragraph!\";\nconsole.log(paragraph); //

I'm a paragraph!

","type":"unstyled","key":"6jqtf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таким образом, комбинируя createElement() и textContent мы можем создать узел элемента. Мы также можем использовать свойство innerHTML для добавления содержимого в элемент. С помощью этого свойства мы можем добавить как текст, так и HTML:","type":"unstyled","key":"7jcvv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"paragraph.innerHTML = \"I'm a bold paragraph!\";","type":"unstyled","key":"eav5t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Из двух методов textContent лучше — он отображается немного быстрее, чем innerHTML. Также возможно создать текстовый узел, используя метод createTextNode():","type":"unstyled","key":"dvqvm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const text = document.createTextNode(\"I'm a text node!\");\nconsole.log(text); // \"I'm a text node!\"","type":"unstyled","key":"fk79j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все эти методы создали новые элементы и текстовые узлы, однако они не видны во front-end веб-сайта до тех пор, пока не будут вставлены в документ!","type":"unstyled","key":"4caou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вставка узлов в DOM","type":"header-three","key":"3vorf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы увидеть новые текстовые узлы и элементы, которые мы создаем во front end, нам нужно вставить их в document. Методы appendChild() и insertBefore() используются для добавления элементов в начало, середину или конец родительского элемента, а replaceChild() используются для замены старого узла новым. Давайте продемонстрируем это, добавив в HTML список:","type":"unstyled","key":"c5ttv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Get pizza
Get burgers
Get Doritos

","type":"unstyled","key":"6p1vv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И вот наша страница:","type":"unstyled","key":"bl8t3"},{"data":{"image":{"id":"5c9a661d5e29d000b3872123"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7c5fr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скажем, мы хотим добавить новый элемент в конец списка, нам нужно сначала создать элемент и добавить к нему текст, как мы это делали ранее:","type":"unstyled","key":"99mi8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Get the ul element\nconst list = document.querySelector('ul');\n\n// Create new list item\nconst newItem = document.createElement('li');\nnewItem.textContent = 'Get nice cheese';","type":"unstyled","key":"3argt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь у нас есть полный элемент для нового элемента списка! Таким образом, мы можем добавить его в конец списка, используя appendChild():","type":"unstyled","key":"fgat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Add our new item to the end of the list\nlist.appendChild(newItem);","type":"unstyled","key":"4ta4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И наш новый элемент li был добавлен в конец ul:","type":"unstyled","key":"dob1f"},{"data":{"image":{"id":"5c9a66200d867100b20b5f70"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7fest"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы добавить элемент в начало списка, давайте создадим еще один элемент (мы должны снова создать новый элемент, поскольку createElement() не может использовать его повторно):","type":"unstyled","key":"9m7dk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Create a new list item\nconst anotherNewItem = document.createElement('li');\nanotherNewItem.textContent = 'Get Party Whistles';","type":"unstyled","key":"8h4pe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы используем метод insertBefore(), чтобы добавить пункт в начало списка. Он будет принимать два аргумента, первый из которых будет новым дочерним узлом, который будет добавлен, а второй — это дочерний узел, который будет следовать сразу же за ним.","type":"unstyled","key":"fnrm7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"parentNode.insertBefore(newNode, nextSibling);","type":"unstyled","key":"901gb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таким образом для нашего примера мы добавим в начало списка новый элемент anotherNewItem:","type":"unstyled","key":"1p8s6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Add new item to the beginning of the list\nlist.insertBefore(anotherNewItem, list.firstElementChild);","type":"unstyled","key":"d4k80"},{"data":{"image":{"id":"5c9a6621e37d0600b354ad50"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"eqmfi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И теперь наш новый узел был добавлен в начало списка! Давайте также рассмотрим, как мы можем заменить существующий узел новым, используя replaceChild(). Сначала мы создаем новый элемент:","type":"unstyled","key":"4d6uq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const modifiedItem = document.createElement('li');\nmodifiedItem.textContent = \"Get Poppin' Jalapeno Doritos\";","type":"unstyled","key":"4offj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"replaceChild() также принимает два аргумента: сначала новый узел, а затем заменяемый узел.","type":"unstyled","key":"tq7k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"parentNode.replaceChild(newNode, oldNode);","type":"unstyled","key":"e7945"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В нашем примере мы заменяем третий дочерний элемент в списке:","type":"unstyled","key":"rl8p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Replace list item\nlist.replaceChild(modifiedItem, list.children[3])","type":"unstyled","key":"5hsar"},{"data":{"image":{"id":"5c9a662198af35323c1f28a1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"433gi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используя комбинацию appendChild(), insertBefore() и replaceChild() мы можем вставлять узлы и элементы в любом месте DOM!","type":"unstyled","key":"8d95h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Удаление узлов из DOM","type":"header-three","key":"61pi1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы удалить узлы из DOM, мы можем использовать removeChild(), чтобы удалить дочерние узлы из их родителя, или remove() чтобы удалить сам узел. Возвращаясь к нашему примеру, давайте удалим последний элемент в списке:","type":"unstyled","key":"a52mq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Remove the last list item\nlist.removeChild(list.lastElementChild);","type":"unstyled","key":"3ov0f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И результат:","type":"unstyled","key":"4ch1n"},{"data":{"image":{"id":"5c9a6621c56eea00b263a8fa"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f37kb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В качестве альтернативы, мы могли бы использовать remove(), чтобы удалить сам узел:","type":"unstyled","key":"aide8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Remove the third element from our list\nlist.children[2].remove();","type":"unstyled","key":"54j92"},{"data":{"image":{"id":"5c9a6622d86ddb31cbd66ea9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"carh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используя removeChild() и remove(), вы можете удалить любой узел из DOM.","type":"unstyled","key":"87qib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменение атрибутов, классов и стилей в DOM","type":"header-three","key":"ctdg0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом последнем разделе мы рассмотрим, как мы можем изменить атрибуты, классы и стили узлов HTML-элементов.","type":"unstyled","key":"26lee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменение атрибутов","type":"header-three","key":"9lvvm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибуты часто используются в HTML для предоставления дополнительной информации об элементе. Некоторые примеры — атрибут src тега img, атрибут href тега a, а также class, id и style. Возможно, вы также видели атрибуты, начинающиеся с data — это пользовательские атрибуты, которые мы также можем изменять.","type":"unstyled","key":"132q7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Методы, которые мы используем в JavaScript для изменения атрибутов элемента:","type":"unstyled","key":"1855h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9om1d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"hasAttribute() - возвращает логическое значение.","type":"unstyled","key":"8uo22"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"getAttribute() - возвращает значение определенного атрибута.","type":"unstyled","key":"fvdmd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"setAttribute() - добавляет или обновляет значение определенного атрибута.","type":"unstyled","key":"bsmhv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"removeAttribute() - удаляет атрибут из элемента.","type":"unstyled","key":"emlch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте используем следующий HTML в качестве примера:","type":"unstyled","key":"3sjn0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\n

\n\n\n\n","type":"unstyled","key":"d1sb0"},{"data":{"image":{"id":"5c9a6622460d9300b2fbefba"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"377t9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте консоль и проверьте методы атрибутов:","type":"unstyled","key":"bmn1a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Assign image element\nconst image = document.querySelector('img');\n\nimage.hasAttribute('src'); // true\nimage.getAttribute('src'); // returns the src link\nimage.removeAttribute('src'); // removes the src","type":"unstyled","key":"7g9mv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И давайте используем setAttribute(), чтобы назначить новое изображение для src:","type":"unstyled","key":"1dgvp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"image.setAttribute('src', 'https://res.cloudinary.com/trobes/image/upload/c_scale,w_400/v1549941322/after.png');","type":"unstyled","key":"288ck"},{"data":{"image":{"id":"5c9a662582fd5400b32a1cad"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fi9pv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Методы hasAttribute() и getAttribute() часто используются с условными операторами, в то время как setAttribute() и removeAttribute() чаще используются для непосредственного изменения в DOM.","type":"unstyled","key":"24nm3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменение классов","type":"header-three","key":"6tt9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При работе с CSS мы используем классы для применения стилей к нескольким элементам. Давайте посмотрим, как мы можем работать с атрибутом класса в JavaScript, используя className и classList.","type":"unstyled","key":"17un2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"44qvg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"className - получает или задает значение класса.","type":"unstyled","key":"f2r19"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"classList.add() - добавляет значения класса.","type":"unstyled","key":"4l419"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"classList.toggle() - включение или выключение класса.","type":"unstyled","key":"5a4tl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"classList.contains() - проверяет, существует ли значение.","type":"unstyled","key":"hkeq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"classList.replace() - заменяет старое значение новым.","type":"unstyled","key":"d2h6v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"classList.remove() - удаляет значение.","type":"unstyled","key":"nsen"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте рассмотрим каждый из этих методов на следующем примере:","type":"unstyled","key":"d25s6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\n

Div #1

Div #2

\n\n","type":"unstyled","key":"99e7c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И вот начальный вывод HTML:","type":"unstyled","key":"57gro"},{"data":{"image":{"id":"5c9a66254a191400b3f972b1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fkcpu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы используем className для присвоения значений классам:","type":"unstyled","key":"896p8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Select div #1\nconst div = document.querySelector('div');\n\n// Assign the alert class to div #1\ndiv.className = 'alert';","type":"unstyled","key":"2nvfa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь класс alert, определенный в HTML, был присвоен первому div:","type":"unstyled","key":"5js3"},{"data":{"image":{"id":"5c9a6626da4c4d00b4a174ea"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8025v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это переопределяет любые существующие классы элемента. Вы можете добавить несколько классов, используя className, если разделите имена классов пробелами. Другой способ изменить классы — это свойство classList, оно содержит несколько очень полезных методов:","type":"unstyled","key":"9qot6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Select div #2 by its class name\nconst activeDiv = document.querySelector('.active');\n\n// Add the hidden class\nactiveDiv.classList.add('hidden'); \n \n// Remove the hidden class\nactiveDiv.classList.remove('hidden'); \n \n// Switch between hidden true and false\nactiveDiv.classList.toggle('hidden');\n\n// Replace active class with alert class\nactiveDiv.classList.replace('active', 'alert');","type":"unstyled","key":"5hodc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После выполнения этих методов наш HTML будет выглядеть так:","type":"unstyled","key":"d0gn4"},{"data":{"image":{"id":"5c9a662661fcd2300032aee1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"er90m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Примечание: classList.add() добавляет новый класс в список существующих классов (не забывайте className переопределять любые существующие классы). Вы также можете добавить несколько классов в виде строк через запятую.","type":"unstyled","key":"ca3i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменение стилей","type":"header-three","key":"1mi65"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обычно стили добавляются с помощью отдельных таблиц стилей CSS, однако бывают случаи, когда нам нужно использовать встроенный стиль — и полезно знать, как мы можем изменить его напрямую с помощью JavaScript! Давайте продемонстрируем это с помощью следующего HTML:","type":"unstyled","key":"a5e93"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n

Style me!

\n\n","type":"unstyled","key":"4i43"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наш начальный вывод:","type":"unstyled","key":"jcev"},{"data":{"image":{"id":"5c9a662698af35323c1f28a2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7h5k2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При работе со свойствами CSS в DOM мы используем camelCase. Таким образом, вместо использования черточек, как это было бы с CSS, например border-radius, мы используем camelCase, например borderRadius. Где первое слово указывается в нижнем регистре, а все последующие слова указываются с большой буквы.","type":"unstyled","key":"falqf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Select the div\nconst div = document.querySelector('div');\n\n// Make div into a circle, change color and font size\ndiv.style.borderRadius = '50%';\ndiv.style.backgroundColor = 'lightgreen';\ndiv.style.fontSize = '30px';","type":"unstyled","key":"1e3sv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Примечание: мы могли бы использовать для изменения стилей setAttribute(), например. div.setAttribute(‘style’, ‘border-radius: 50%’); однако это удалит все существующие встроенные стили. Так что гораздо лучше использовать атрибут style напрямую. Наш вывод после добавления новых стилей:","type":"unstyled","key":"1q6b9"},{"data":{"image":{"id":"5c9a66275c89e200b37af35b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e8gbj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конечно, если нам нужно применить несколько изменений стиля, лучше применить их к классу в CSS и просто добавить новый класс к элементу через JavaScript.","type":"unstyled","key":"c5jd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-three","key":"114bb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И это все. Мы рассмотрели работу с деревом DOM и узлами все о получении доступа, обходе и изменении элементов. Если вы продержались так долго — вы молодец! Вы на пути к освоению DOM! Я надеюсь, что вы нашли эту статью полезной!","type":"unstyled","key":"cso0f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"eTmnbmjXTcoPTyHwpvAi"}],"entityMap":{"0":{"data":{"href":"https://webformyself.com/javascript-izuchaem-rabotu-s-dom-1/","url":"https://webformyself.com/javascript-izuchaem-rabotu-s-dom-1/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}