A div
```
-We can try to insert invalid HTML, the browser will fix our errors:
+Ми можемо спробувати вставити невалідний HTML, браузер виправить наші помилки:
```html run
```
-```smart header="Scripts don't execute"
-If `innerHTML` inserts a `
```
-**Beware: unlike `innerHTML`, writing to `outerHTML` does not change the element. Instead, it replaces it in the DOM.**
+**Остерігайтеся: на відміну від `innerHTML`, написання до `outerHTML` не змінює елемент. Замість цього він замінює його в DOM.**
-Yeah, sounds strange, and strange it is, that's why we make a separate note about it here. Take a look.
+Так, це звучить дивно, так воно і є, ось тому ми робимо окрему примітку про це тут. Поглянь.
-Consider the example:
+Розглянемо приклад:
```html run
-Hello, world!
+Привіт, світ!
```
-Looks really odd, right?
+Виглядає дуже дивно, вірно?
-In the line `(*)` we replaced `div` with `A new element
`. In the outer document (the DOM) we can see the new content instead of the ``. But, as we can see in line `(**)`, the value of the old `div` variable hasn't changed!
+У рядку `(*)` ми замінили `div` на `
Новий елемент
`. У зовнішньому документі (DOM) ми можемо побачити новий вміст замість ``. Але, як ми можемо бачити в рядку `(**)`, значення старого `div` не змінилося!
-The `outerHTML` assignment does not modify the DOM element (the object referenced by, in this case, the variable 'div'), but removes it from the DOM and inserts the new HTML in its place.
+Присвоєння `outerHTML` не змінює елемент DOM (об’єкт, на який посилається, у цьому випадку змінний 'div'), але його видаляє з DOM та вставляє новий HTML у своєму місці.
-So what happened in `div.outerHTML=...` is:
-- `div` was removed from the document.
-- Another piece of HTML ``.
+`textContent` надає доступ до *тексту* всередині елемента: тільки текст, мінус всі `<теги>`.
-For instance:
+Наприклад:
```html run
` were cut out, but the text in them remained.
+Як ми бачимо, повертається лише текст, як ніби всі `` були вирізані, але текст у них залишився.
-In practice, reading such text is rarely needed.
+На практиці читання такого тексту рідко потрібне.
-**Writing to `textContent` is much more useful, because it allows to write text the "safe way".**
+**Запис в `textContent` набагато корисніше, тому що це дозволяє записати текст "безпечним способом".**
-Let's say we have an arbitrary string, for instance entered by a user, and want to show it.
+Скажімо, у нас є довільний рядок, наприклад той, що ввів користувач, і який він хочете показати.
-- With `innerHTML` we'll have it inserted "as HTML", with all HTML tags.
-- With `textContent` we'll have it inserted "as text", all symbols are treated literally.
+- З `innerHTML` ми його вставили "як HTML", з усіма HTML-тегами.
+- З `textContent` ми вставимо це "як текст", всі символи обробляються буквально.
-Compare the two:
+Порівняйте ці два підходи:
```html run
```
-1. The first `
A new element
` was inserted in its place. -- `div` still has its old value. The new HTML wasn't saved to any variable. +Отже, в `div.outerHTML=...` сталося наступне: +- `div` був видалений з документа. +- Інший шматок HTML `Новий елемент
` був вставлений на його місце. +- `div` ще має своє старе значення. Новий HTML не був збережений для будь-якої змінної. -It's so easy to make an error here: modify `div.outerHTML` and then continue to work with `div` as if it had the new content in it. But it doesn't. Such thing is correct for `innerHTML`, but not for `outerHTML`. +Тут так легко зробити помилку: змініть `div.outerHTML`, а потім продовжуйте працювати з `div` так, наче від має новий вміст у собі. Але це не так. Така річ є правильною для `innerHTML`, але не для `outerHTML`. -We can write to `elem.outerHTML`, but should keep in mind that it doesn't change the element we're writing to ('elem'). It puts the new HTML in its place instead. We can get references to the new elements by querying the DOM. +Ми можемо записати в `elem.outerHTML`, але слід пам’ятати, що це не змінює елемент, в який ми пишемо ('elem'). Це вставить замість цього новий HTML. Ми можемо отримати посилання на нові елементи, запитуючи DOM. -## nodeValue/data: text node content +## nodeValue/data: вміст тексту вузла -The `innerHTML` property is only valid for element nodes. +Властивість `innerHTML` існує лише для вузлів-елементів. -Other node types, such as text nodes, have their counterpart: `nodeValue` and `data` properties. These two are almost the same for practical use, there are only minor specification differences. So we'll use `data`, because it's shorter. +Інші типи вузлів, такі як текстові вузли, мають свій аналог: `nodeValue` і `data` властивості. Ці дві властивості майже однакові для практичного використання, є лише незначні відмінності в специфікації. Таким чином, ми будемо використовувати `data`, тому що це коротше. -An example of reading the content of a text node and a comment: +Приклад читання вмісту текстового вузла та коментаря: ```html run height="50" - Hello - + Привіт + ``` -For text nodes we can imagine a reason to read or modify them, but why comments? +Для текстових вузлів ми можемо уявити собі причину читати або змінити їх, але чому коментарі? -Sometimes developers embed information or template instructions into HTML in them, like this: +Іноді розробники вбудовують інформацію або інструкції в шаблон HTML, як наприклад: ```html -Welcome, Admin!
+ Ласкаво просимо, Адмін!
```
-...Then JavaScript can read it from `data` property and process embedded instructions.
+...Тоді JavaScript може прочитати його з `data` властивості та обробити вбудовані інструкції.
-## textContent: pure text
+## textContent: чистий текст
-The `textContent` provides access to the *text* inside the element: only text, minus all `
-
```
-As we can see, only text is returned, as if all `Headline!
-Martians attack people!
+Заголовок!
+Марсіанці нападають на людей!
` gets the name "as HTML": all tags become tags, so we see the bold name.
-2. The second `
` gets the name "as text", so we literally see `Winnie-the-Pooh!`.
+1. Перший `
` отримує назву "як HTML": всі теги стають тегами, тому ми бачимо назву жирним шрифтом.
+2. Другий `
` отримує назву "як текст", тому ми буквально бачимо `Вінні Пух!`.
-In most cases, we expect the text from a user, and want to treat it as text. We don't want unexpected HTML in our site. An assignment to `textContent` does exactly that.
+У більшості випадків ми очікуємо отримати текст від користувача, і хочем працювати з ним як з текстом. Ми не хочемо несподіваного HTML на нашому сайті. Присвоєння в `textContent` робить саме це.
-## The "hidden" property
+## Властивість "hidden"
-The "hidden" attribute and the DOM property specifies whether the element is visible or not.
+Атрибут "hidden" та властивість DOM визначає, чи видно елемент чи ні.
-We can use it in HTML or assign it using JavaScript, like this:
+Ми можемо використовувати її в HTML або призначити її за допомогою JavaScript, як наприклад:
```html run height="80"
-
Both divs below are hidden
+Обидва div нижче приховані
-With the attribute "hidden"
+За допомогою атрибуту "hidden"
-JavaScript assigned the property "hidden"
+JavaScript призначив властивість "hidden"
```
-Technically, `hidden` works the same as `style="display:none"`. But it's shorter to write.
+Технічно, `hidden` працює так само, як `style="display:none"`. Але це коротше писати.
-Here's a blinking element:
+Ось блимаючий елемент:
```html run height=50
-A blinking element
+Блимаючий елемент
```
-## More properties
+## Більше властивостей
-DOM elements also have additional properties, in particular those that depend on the class:
+Елементи DOM також мають додаткові властивості, зокрема, ті, які залежать від класу:
-- `value` -- the value for ``, `