- По улице прошёлся слон. Весьма красив и толст был он.
-
-
-```
-
-[Стандарт HTML5](http://www.w3.org/TR/2010/WD-html5-20101019/elements.html#embedding-custom-non-visible-data-with-the-data-attributes) специально разрешает атрибуты `data-*` и резервирует их для пользовательских данных.
-
-При этом во всех браузерах, кроме IE10-, к таким атрибутам можно обратиться не только как к атрибутам, но и как к свойствам, при помощи специального свойства `dataset`:
-
-```html run
-
- По улице прошёлся слон. Весьма красив и толст был он.
-
-
-```
-
-Обратим внимание -- название `data-user-location` трансформировалось в `dataset.userLocation`. Дефис превращается в большую букву.
-
-## Полифилл для атрибута hidden
-
-Для старых браузеров современные атрибуты иногда нуждаются в полифилле. Как правило, такой полифилл включает в себя не только JavaScript, но и CSS.
-
-Например, свойство/атрибут hidden не поддерживается в IE11.
-
-Этот атрибут должен прятать элемент, действие весьма простое, для его поддержки в HTML достаточно такого CSS:
-
-```html run height="80" no-beautify
-
-
-` будет скрыт, а вот последний `div`, которому поставили свойство `hidden` в JavaScript -- по-прежнему виден.
-
-Это потому что CSS "не видит" присвоенное свойство, нужно синхронизировать его в атрибут.
-
-Вот так -- уже работает:
-
-```html run height="80" no-beautify
-
-
-
-
-
Текст
-
С атрибутом hidden
-
Со свойством hidden
-
-
-```
-
-## "Особенности" IE8
-
-Если вам нужна поддержка этих версий IE -- есть пара нюансов.
-
-1. Во-первых, версии IE8- синхронизируют все свойства и атрибуты, а не только стандартные:
-
- ```js run
- document.body.setAttribute('my', 123);
-
- alert( document.body.my ); // 123 в IE8-
- ```
-
- При этом даже тип данных не меняется. Атрибут не становится строкой, как ему положено.
-2. Ещё одна некорректность IE8-: для изменения класса нужно использовать именно свойство `className`, вызов `setAttribute('class', ...)` не сработает.
-
-Вывод из этого довольно прост -- чтобы не иметь проблем в IE8, нужно использовать всегда только свойства, кроме тех ситуаций, когда нужны именно атрибуты. Впрочем, это в любом случае хорошая практика.
-
-## Итого
-
-- Атрибуты -- это то, что написано в HTML.
-- Свойство -- это то, что находится в свойстве DOM-объекта.
-
-Таблица сравнений для атрибутов и свойств:
-
-
-
-
-| Свойства |
-Атрибуты |
-
-
-
-
-| Любое значение |
-Строка |
-
-
-| Названия регистрозависимы |
-Не чувствительны к регистру |
-
-
-Не видны в innerHTML |
-Видны в innerHTML |
-
-
-
-
-Синхронизация между атрибутами и свойствами:
-
-- Стандартные свойства и атрибуты синхронизируются: установка атрибута автоматически ставит свойство DOM. Некоторые свойства синхронизируются в обе стороны.
-- Бывает так, что свойство не совсем соответствует атрибуту. Например, "логические" свойства вроде `checked`, `selected` всегда имеют значение `true/false`, а в атрибут можно записать произвольную строку.Выше мы видели другие примеры на эту тему, например `href`.
-
-Нестандартные атрибуты:
-
-- Нестандартный атрибут (если забыть глюки старых IE) никогда не попадёт в свойство, так что для кросс-браузерного доступа к нему нужно обязательно использовать `getAttribute`.
-- Атрибуты, название которых начинается с `data-`, можно прочитать через `dataset`. Эта возможность не поддерживается IE10-.
-
-Для того, чтобы избежать проблем со старыми IE, а также для более короткого и понятного кода старайтесь везде использовать свойства, а атрибуты -- только там, где это *действительно* нужно.
-
-А *действительно* нужны атрибуты очень редко - лишь в следующих трёх случаях:
-
-1. Когда нужно кросс-браузерно получить нестандартный HTML-атрибут.
-2. Когда нужно получить "оригинальное значение" стандартного HTML-атрибута, например, `
`.
-3. Когда нужно получить список всех атрибутов, включая пользовательские. Для этого используется коллекция `attributes`.
-
-Если вы хотите использовать собственные атрибуты в HTML, то помните, что атрибуты с именем, начинающимся на `data-` валидны в HTML5 и современные браузеры поддерживают доступ к ним через свойство `dataset`.
diff --git a/2-ui/1-document/9-attributes-and-properties/1-get-user-attribute/solution.md b/2-ui/1-document/9-attributes-and-properties/1-get-user-attribute/solution.md
new file mode 100644
index 00000000..5d3fe241
--- /dev/null
+++ b/2-ui/1-document/9-attributes-and-properties/1-get-user-attribute/solution.md
@@ -0,0 +1,20 @@
+
+```html run height=100
+
+
+
+
+
Choose the genre
+
+
+
+
+```
diff --git a/2-ui/1-document/9-attributes-and-properties/1-get-user-attribute/task.md b/2-ui/1-document/9-attributes-and-properties/1-get-user-attribute/task.md
new file mode 100644
index 00000000..9d0e7fd8
--- /dev/null
+++ b/2-ui/1-document/9-attributes-and-properties/1-get-user-attribute/task.md
@@ -0,0 +1,21 @@
+importance: 5
+
+---
+
+# Get the attribute
+
+Write the code to select the element with `data-widget-name` attribute from the document and to read its value.
+
+```html run
+
+
+
+
+
Выберите жанр
+
+
+
+
+```
diff --git a/2-ui/1-document/9-attributes-and-properties/2-set-class-links/solution.md b/2-ui/1-document/9-attributes-and-properties/2-set-class-links/solution.md
new file mode 100644
index 00000000..e1c6e8d0
--- /dev/null
+++ b/2-ui/1-document/9-attributes-and-properties/2-set-class-links/solution.md
@@ -0,0 +1,36 @@
+
+First, we need to find all external references.
+
+There are two ways.
+
+The first is to find all links using `document.querySelectorAll('a')` and then filter out what we need:
+
+```js
+let links = document.querySelectorAll('a');
+
+for (let link of links) {
+*!*
+ let href = link.getAttribute('href');
+*/!*
+ if (!href) continue; // no attribute
+
+ if (!href.includes('://')) continue; // no protocol
+
+ if (href.startsWith('http://internal.com')) continue; // internal
+
+ link.classList.add('external');
+}
+```
+
+Please note: we use `link.getAttribute('href')`. Not `link.href`, because we need the value from HTML.
+
+...Another, simpler way would be to add the checks to CSS selector:
+
+```js
+// look for all links that have :// in href
+// but href doesn't start with http://internal.com
+let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
+let links = document.querySelectorAll(selector);
+
+links.forEach(link => link.classList.add('external'));
+```
diff --git a/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.view/index.html b/2-ui/1-document/9-attributes-and-properties/2-set-class-links/solution.view/index.html
similarity index 69%
rename from 2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.view/index.html
rename to 2-ui/1-document/9-attributes-and-properties/2-set-class-links/solution.view/index.html
index 28f0790f..871cc1ce 100644
--- a/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.view/index.html
+++ b/2-ui/1-document/9-attributes-and-properties/2-set-class-links/solution.view/index.html
@@ -9,11 +9,9 @@
}
-
-
-
список
+
the list
-
-
-
\ No newline at end of file
+