diff --git a/2-ui/1-document/7-basic-dom-node-properties/article.md b/2-ui/1-document/7-basic-dom-node-properties/article.md index 1418f4d7..11dc99a5 100644 --- a/2-ui/1-document/7-basic-dom-node-properties/article.md +++ b/2-ui/1-document/7-basic-dom-node-properties/article.md @@ -442,6 +442,33 @@ chatDiv.innerHTML += "Как дела?"; Впрочем, при записи значения `innerText` работает так же, как и `textContent`. [/warn] +## Свойство hidden + +Как правило, видим или невидим узел, определяется через CSS, свойствами `display` или `visibility`. + +В стандарте HTML5 предусмотрен специальный атрибут (он же свойство) для этого: `hidden`. + +Его поддерживают все современные браузеры, кроме старых IE. + +В примере ниже второй и третий `
` скрыты: + +```html + +
Текст
+ +
Со свойством hidden
+ + +``` + +Технически, атрибут `hidden` работает так же, как `style="display:none"`. Но его проще поставить через JavaScript (меньше букв), и могут быть преимущества для скринридеров и прочих нестандартных браузеров. + +Для старых IE тоже можно сделать, чтобы свойство поддерживалось, мы ещё вернёмся к этому далее в учебнике. + + ## Исследование элементов У DOM-узлов есть и другие свойства, зависящие от типа, например: diff --git a/2-ui/1-document/8-dom-polyfill/article.md b/2-ui/1-document/8-dom-polyfill/article.md index a8dce9d6..c2a8a373 100644 --- a/2-ui/1-document/8-dom-polyfill/article.md +++ b/2-ui/1-document/8-dom-polyfill/article.md @@ -163,9 +163,10 @@ alert( document.body.lowerTag ); // body В IE6,7 геттеры/сеттеры совсем не работают. Когда-то для них использовалась особая "IE-магия" при помощи `.htc`-файлов, которые [более не поддерживаются](http://msdn.microsoft.com/en-us/library/ie/hh801216.aspx). Если нужно поддерживать и эти версии, то рекомендуется воспользоваться фреймворками. К счастью, для большинства проектов эти браузеры уже стали историей. [/warn] -## А есть ли поддержка? -А нужен ли вообще полифилл? Какие браузеры поддерживают свойство или метод? +## Какова поддержка свойства? + +А нужен ли вообще полифилл? Какие браузеры поддерживают интересное нам свойство или метод? Зачастую такая информация есть в справочнике MDN, например для метода `remove()`: [](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode.remove) -- табличка совместимости внизу. diff --git a/2-ui/1-document/9-attributes-and-custom-properties/article.md b/2-ui/1-document/9-attributes-and-custom-properties/article.md index 02115f47..f97879ff 100644 --- a/2-ui/1-document/9-attributes-and-custom-properties/article.md +++ b/2-ui/1-document/9-attributes-and-custom-properties/article.md @@ -111,7 +111,7 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
  • Коллекция `attributes` содержит все атрибуты в виде объектов со свойствами `name` и `value`.
    • -## Зачем полезны атрибуты? +## Когда полезен доступ к атрибутам? Когда браузер читает HTML и создаёт DOM-модель, то он создаёт свойства для всех *стандартных* атрибутов. @@ -119,11 +119,11 @@ document.body.sayHi(); // BODY, выполнилась с правильным t Например, у него есть свойство `"href"`. Кроме того, он имеет `"id"` и другие свойства, общие для всех элементов, которые описаны в спецификации в HTMLElement. -В большинстве случаев стандартные свойства DOM синхронизируются с атрибутами. Но не всегда такая синхронизация происходит 1-в-1, поэтому иногда нам нужно значение именно из HTML. +Все стандартные свойства DOM синхронизируются с атрибутами, однако не всегда такая синхронизация происходит 1-в-1, поэтому иногда нам нужно значение именно из HTML, то есть атрибут. -В этом случае мы берём его через атрибут. +Рассмотрим несколько примеров. -### Значения могут быть разными: href +### Ссылка "как есть" из атрибута href Синхронизация не гарантирует одинакового значения в атрибуте и свойстве. @@ -173,11 +173,11 @@ document.body.sayHi(); // BODY, выполнилась с правильным t ``` [/smart] -### Свойство не всегда обновляет атрибут: value +### Исходное значение value Изменение некоторых свойств обновляет атрибут. Но это скорее исключение, чем правило. -**Обычно синхронизация -- односторонняя: свойство зависит от атрибута.** +**Чаще синхронизация -- односторонняя: свойство зависит от атрибута, но не наоборот.** Например, при изменении свойства `input.value` атрибут `input.getAttribute('value')` не меняется: @@ -195,7 +195,7 @@ document.body.sayHi(); // BODY, выполнилась с правильным t ``` -То есть, изменение свойства на атрибут не влияет, он остаётся таким же. +То есть, изменение DOM-свойства `value` на атрибут не влияет, он остаётся таким же. А вот изменение атрибута обновляет свойство: @@ -219,7 +219,7 @@ document.body.sayHi(); // BODY, выполнилась с правильным t Например, можно взять изначальное значение из атрибута и сравнить со свойством, чтобы узнать, изменилось ли значение. А при необходимости и перезаписать свойство атрибутом, отменив изменения. -### Атрибут class -- className +## Классы в виде строки: className Атрибуту `"class"` соответствует свойство `className`. @@ -242,7 +242,7 @@ document.body.sayHi(); // BODY, выполнилась с правильным t Кстати, есть и другие атрибуты, которые называются иначе, чем свойство. Например, атрибуту `for` (`