diff options
Diffstat (limited to 'files/ru/web/api/element')
45 files changed, 5161 insertions, 0 deletions
diff --git a/files/ru/web/api/element/accesskey/index.html b/files/ru/web/api/element/accesskey/index.html new file mode 100644 index 0000000000..8ba1a39596 --- /dev/null +++ b/files/ru/web/api/element/accesskey/index.html @@ -0,0 +1,73 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +translation_of: Web/API/HTMLElement/accessKey +--- +<div>{{APIRef("DOM")}}</div> + +<div> </div> + +<h2 id="Описание">Описание</h2> + +<p>Свойство <font face="Consolas, Monaco, Andale Mono, monospace"><strong>accessKey</strong></font> позволяет перейти к элементу с помощью сочетания клавиш - заданной им и тех, что назначит браузер.</p> + +<div class="note"> +<p>По сути, <strong>accessKey </strong>задает значение для <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/accesskey">одноименного атрибута</a>...</p> +</div> + +<div class="warning"> +<p>Данное свойство использовать не рекоммендуется, поскольку в браузерах уже заданы подобные привязки и неосторожное обращение может привести к жестокому конфликту.</p> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre>var key = elem.accessKey; +elem.accessKey = key; +</pre> + +<h2 id="sect2"> </h2> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">var elem = document.getElementById("id"); +elem.accessKey = "w"; +</pre> + +<h2 id="Немного_информации">Немного информации</h2> + +<p>Фокусировка на элемент произойдет при нажатии следующих клавиш (,где<strong> acesskey</strong> - значение свойства<code><strong> acessKey).</strong></code></p> + +<table class="standard-table" style="height: 252px; width: 388px;"> + <tbody> + <tr> + <td> + <h3 id="Браузер"><strong> Браузер</strong></h3> + </td> + <td> + <h3 id="Сочетание"> Сочетание</h3> + </td> + </tr> + <tr> + <td>Firefox</td> + <td>[Alt] [Shift] + <em>accesskey</em></td> + </tr> + <tr> + <td>Internet Explorer</td> + <td>[Alt] + <em>accesskey</em></td> + </tr> + <tr> + <td>Chrome</td> + <td>[Alt] + <em>accesskey</em></td> + </tr> + <tr> + <td>Safari</td> + <td>[Alt] + <em>accesskey</em></td> + </tr> + <tr> + <td>Opera</td> + <td>[Shift] [Esc] + <em>accesskey</em></td> + </tr> + </tbody> +</table> diff --git a/files/ru/web/api/element/animate/index.html b/files/ru/web/api/element/animate/index.html new file mode 100644 index 0000000000..04f7a3bad6 --- /dev/null +++ b/files/ru/web/api/element/animate/index.html @@ -0,0 +1,117 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +tags: + - API + - Animation + - Element + - Experimental + - Method + - Reference + - web animation +translation_of: Web/API/Element/animate +--- +<div>{{APIRef('Web Animations')}} {{SeeCompatTable}}</div> + +<p>Метод <strong><code>animate()</code> </strong>интерфейса<strong> </strong>{{domxref("Element")}} это быстрый способ создания {{domxref("Animation")}}, которая сразу применяется к элементу, а затем проигрывает эту анимацию. Метод возвращает созданный экземпляр класса {{domxref("Animation")}}.</p> + +<div class="note"> +<p>Элементы могут иметь несколько, прикреплённых к ним, анимаций. Вы можете получить список анимаций, которые влияют на элемент, вызвав {{domxref("Element.getAnimations()")}}.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <em>animation</em> = element.animate(<em>keyframes</em>, <em>options</em>); </pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>keyframes</code></dt> + <dd> + <p>Массив объектов ключевых кадров, <strong>либо </strong>объект ключевого кадра, свойства которого являются массивами значений для итерации. Смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Formats</a> для получения подробной информации.</p> + </dd> + <dt><code>options</code></dt> + <dd>Целое число<strong>, представляющее продолжительность анимации </strong>(в миллисекундах), <strong>или</strong> объект, содержащий одно или более временных свойств.</dd> + <dd> + <dl> + <dt><code>id {{optional_inline}}</code></dt> + <dd>Свойство уникальное для <code>animate()</code>: <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.">DOMString</a></code>, с помощью которого можно ссылаться на анимацию.</dd> + </dl> + {{Page("ru/docs/Web/API/EffectTiming", "Свойства")}}</dd> +</dl> + +<h4 id="Будущие_возможности">Будущие возможности</h4> + +<p>Следующие возможности в настоящее <strong>нигде не поддерживаются</strong>, но будут добавлены в <strong>ближайшем будущем </strong>.</p> + +<dl> + <dt><code>composite {{optional_inline}}</code></dt> + <dd>Определяет, как значения объединяются между этой анимацией и другими отдельными анимациями, которые не задают свою собственную конкретную составную операцию. По умолчанию <code>replace</code>. + <ul> + <li><code>add</code> диктует аддитивный эффект, где каждая последующая итерация строится на последней. Пример с <code>transform</code>, <code>translateX(-200px)</code> не будут переопределять ранний вариант со значением <code>rotate(20deg)</code>, поэтому результат будет <code>translateX(-200px) rotate(20deg)</code>.</li> + <li><code>accumulate</code> схоже, но немного умнее: <code>blur(2)</code> и <code>blur(5)</code> станет <code>blur(7)</code>, а не <code>blur(2) blur(5)</code>.</li> + <li><code>replace</code> переписывает предыдущие значения на новые.</li> + </ul> + </dd> + <dt><code>iterationComposite {{optional_inline}}</code></dt> + <dd>Определяет как значения строятся от итерации к итерации в этой анимации. Может быть установлено как <code>accumulate</code> или <code>replace</code> (смотрите выше). По умолчанию <code>replace</code>.</dd> + <dt><code>spacing {{optional_inline}}</code></dt> + <dd>Определяет как ключевые кадры, без временных смещений, должны распределяться по всей длительности анимации. По умолчанию <code>distribute</code>. + <ul> + <li><code>distribute</code> позиционирует ключевые кадры так, чтобы разница между последующими смещениями ключевых кадров была равна, то есть без каких-либо смещений, ключевые кадры будут равномерно распеределены по всему времени проигрыша анимации.</li> + <li><code>paced</code> позиционирует ключевые кадры так, чтобы расстояние между последующими значениями заданного темпового свойства было равным, то есть, чем больше разница в значениях свойств ключевых кадров, тем на большем расстоянии они расположены друг от друга.</li> + </ul> + + <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p> + </dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>Возвращает {{domxref("Animation")}}.</p> + +<h2 id="Пример">Пример</h2> + +<p>В демо <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a>, мы используем удобный метод <code>animate()</code>, чтобы сразу создать и проиграть анимацию на элементе <code>#tunnel</code>, чтобы заставить его крутиться в падении, бесконечно. Обратите внимание на массив объектов, в котором переданы ключевые кадры, а также блок временных параметров.</p> + +<pre class="brush: js">document.getElementById("tunnel").animate([ + // keyframes + { transform: 'translate3D(0, 0, 0)' }, + { transform: 'translate3D(0, -300px, 0)' } +], { + // timing options + duration: 1000, + iterations: Infinity +}) +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}</td> + <td>{{Spec2('Web Animations')}}</td> + <td>Первоначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице генерируется на основе структурированных данных. Если вы хотите внесим свой вклад в эти данные, пожалуйста, перейдите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div> + +<p>{{Compat("api.Element.animate")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li> + <li>{{domxref("Element.getAnimations()")}}</li> + <li>{{domxref("Animation")}}</li> +</ul> diff --git a/files/ru/web/api/element/attachshadow/index.html b/files/ru/web/api/element/attachshadow/index.html new file mode 100644 index 0000000000..39d19a42ef --- /dev/null +++ b/files/ru/web/api/element/attachshadow/index.html @@ -0,0 +1,151 @@ +--- +title: Element.attachShadow() +slug: Web/API/Element/attachShadow +translation_of: Web/API/Element/attachShadow +--- +<p>{{APIRef('Shadow DOM')}} {{SeeCompatTable}}</p> + +<p>Метод <strong><code>Element.attachShadow()</code></strong> добавляет<span id="result_box" lang="ru"><span> теневое DOM дерево к указанному элементу и возвращает ссылку на его </span></span><a href="https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot" title="Use Element.attachShadow to create an instance of shadow DOM. When shadow DOM is created, it is always attached to an existing element. After the shadow DOM is created, the element that it is attached to is called the shadow root."><code>ShadowRoot</code></a>( корневой элемент созданного дерева).</p> + +<h4 id="Элементы_которые_можно_добавить_в_тенейвой_DOM">Элементы которые можно добавить в тенейвой DOM</h4> + +<p>Обратите внимание, что не каждый элемент можно добавить в корень теневого дерева. Некоторые типы исключены по соображениям безопасности(например {{htmlelement("a")}}), и некоторые другие. Вот список разрешенных элементов:</p> + +<ul> + <li>Любой пользовательский элемент с <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name">валидным именем</a></li> + <li>{{htmlelement("article")}}</li> + <li>{{htmlelement("aside")}}</li> + <li>{{htmlelement("blockquote")}}</li> + <li>{{htmlelement("body")}}</li> + <li>{{htmlelement("div")}}</li> + <li>{{htmlelement("footer")}}</li> + <li>{{htmlelement("h1")}}</li> + <li>{{htmlelement("h2")}}</li> + <li>{{htmlelement("h3")}}</li> + <li>{{htmlelement("h4")}}</li> + <li>{{htmlelement("h5")}}</li> + <li>{{htmlelement("h6")}}</li> + <li>{{htmlelement("header")}}</li> + <li>{{htmlelement("main")}}</li> + <li>{{htmlelement("nav")}}</li> + <li>{{htmlelement("p")}}</li> + <li>{{htmlelement("section")}}</li> + <li>{{htmlelement("span")}}</li> +</ul> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">var <em>shadowroot =</em><em> element</em>.attachShadow(<em>shadowRootInit</em>); +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>shadowRootInit</code></dt> + <dd><code>ShadowRootInit</code> содержит следующие поля: + <p><code>mode</code>: Строка указывающая на режим инкапсуляции для shadowDOM:</p> + + <ul> + <li><code>open. </code>Указывает на открытие режима инкапсуляции.<br> + Это означает что элементы shadowRoot доступны для внешнего мира <em>element.shadowRoot</em><br> + + <pre>element.shadowRoot === shadowroot; // returns true</pre> + </li> + <li><code>closed.</code> Указывает на закрытие режима инкапсуляции.<br> + Этот режим запрещает доступ к узлам node(s) и закрыват теневой корень для внешнего мира<br> + + <pre>element.shadowRoot === shadowroot; // returns false +element.shadowRoot === null; // returns true +</pre> + </li> + </ul> + </dd> +</dl> + +<h3 id="Возвращает">Возвращает</h3> + +<p>Вернёт a {{domxref("ShadowRoot")}} или null.</p> + +<h3 id="Исключения">Исключения</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td>Исключение</td> + <td>Описание</td> + </tr> + <tr> + <td>InvalidStateError</td> + <td>Элемент уже является хостом теневого DOM</td> + </tr> + <tr> + <td>NotSupportedError</td> + <td>Вы пытаетесь прикрепить shadow DOM к HTML элементу с некоректным именем, или к запрещенному элементу. (см. выше)</td> + </tr> + </tbody> +</table> + +<h2 id="Примеры">Примеры</h2> + +<p>Пример взят из демо компонента <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a>, так-же доступно <a href="https://mdn.github.io/web-components-examples/word-count-web-component/">live demo</a>. Вы можете найти метод attachShadow() примерно в середине кода. Метод создает корневой элемент теневого DOM к которому потом добавляется содержимое шаблона элемента.</p> + +<pre class="brush: js"><code>//Create a class for the element +class WordCount extends HTMLParagraphElement { + constructor() { + // Always call super first in constructor + super();</code> + + // count words in element's parent element + var wcParent = this.parentNode; + + function countWords(node){ + var text = node.innerText || node.textContent + return text.split(/\s+/g).length; + } + + var count = 'Words: ' + countWords(wcParent); + + // Create a shadow root + var shadow = this.attachShadow({mode: 'open'}); + + // Create text node and add word count to it + var text = document.createElement('span'); + text.textContent = count; + + // Append it to the shadow root + shadow.appendChild(text); + + // Update count when element content changes + setInterval(function() { + var count = 'Words: ' + countWords(wcParent); + text.textContent = count; + }, 200) + } +} + +// Define the new element +customElements.define('word-count', WordCount, { extends: 'p' }); +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> + +<p>{{Compat("api.Element.attachShadow")}}</p> + +<div id="compat-mobile"> </div> diff --git a/files/ru/web/api/element/attributes/index.html b/files/ru/web/api/element/attributes/index.html new file mode 100644 index 0000000000..24564c8e24 --- /dev/null +++ b/files/ru/web/api/element/attributes/index.html @@ -0,0 +1,157 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +translation_of: Web/API/Element/attributes +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Свойство <strong><code>Element.attributes</code></strong> возвращает группу атрибутов всех узлов, зарегистрированных в указанном узле. Это {{domxref("NamedNodeMap")}}, тоесть полученные данные не являются массивом <code>Array</code>, не содержат {{jsxref("Array")}} методы и {{domxref("Attr")}} индекс узлов может отличаться в различных браузерах. Если сказать более точно, атрибуты <font face="Courier New, Andale Mono, monospace"><strong>(</strong></font><strong style="font-family: courier new,andale mono,monospace; font-weight: bold;">attributes</strong><font face="Courier New, Andale Mono, monospace"><strong>)</strong></font> это строка, пара ключ/значение которая представляет собой информацию относительно этого атрибута.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes; +</pre> + +<h2 id="Example" name="Example">Пример</h2> + +<h3 id="Базовые_примеры">Базовые примеры</h3> + +<pre class="brush: js">// Получить первый элемент <p> содержащийся в документе +var para = document.getElementsByTagName("p")[0]; +var atts = para.attributes;</pre> + +<h3 id="Notes" name="Notes">Перечисление атрибутов элементов</h3> + +<p>Числовое индексирование полезно для прохождения всех атрибутов элемента.<br> + Следующий пример проходит через узлы атрибутов для элемента в документе с идентификатором «p1» и печатает значение каждого атрибута. </p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + + <head> + <title>Attributes example</title> + <script type="text/javascript"> + function listAttributes() { + var paragraph = document.getElementById("paragraph"); + var result = document.getElementById("result"); + + // Во-первых, давайте убедимся, что в абзаце есть какие-то атрибуты + if (paragraph.hasAttributes()) { + var attrs = paragraph.attributes; + var output = ""; + for(var i = attrs.length - 1; i >= 0; i--) { + output += attrs[i].name + "->" + attrs[i].value; + } + result.value = output; + } else { + result.value = "No attributes to show"; + } + } + </script> + </head> + +<body> + <p id="paragraph" style="color: green;">Sample Paragraph</p> + <form action=""> + <p> + <input type="button" value="Show first attribute name and value" + onclick="listAttributes();"> + <input id="result" type="text" value=""> + </p> + </form> +</body> +</html></pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} to {{domxref("Element")}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No change from {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>No change from {{SpecName('DOM1')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>6.0 [2]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Before Firefox 22, this attribute was implemented in the {{domxref("Node")}} interface (inherited by {{domxref("Element")}}). It has been moved to this interface to conform to the specification and the usage of other browsers.</p> + +<p>[2] Internet Explorer 5.5 returns a map containing the values rather than the attribute objects.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("NamedNodeMap")}}, the interface of the returned object</li> + <li>Cross-browser compatibility considerations: on <a class="external" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a></li> +</ul> diff --git a/files/ru/web/api/element/classlist/index.html b/files/ru/web/api/element/classlist/index.html new file mode 100644 index 0000000000..2ad0ee938f --- /dev/null +++ b/files/ru/web/api/element/classlist/index.html @@ -0,0 +1,237 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +translation_of: Web/API/Element/classList +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Описание">Описание</h2> + +<p>Свойство<strong> <code>classList</code></strong> возвращает псевдомассив {{domxref("DOMTokenList")}}, содержащий все классы элемента.</p> + +<div class="note"> +<p>У <strong>classList </strong>есть примитивная альтернатива - свойство <strong>className, </strong>которое содержит значение атрибута <strong>class</strong> элемента.</p> +</div> + +<h2 id="Syntax" name="Syntax"> </h2> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <var>elementClasses</var> = elem.classList; +</pre> + +<ul> + <li>Результат - псевдомассив {{domxref("DOMTokenList")}}, содержащий все классы узла<strong> elem</strong></li> +</ul> + +<p> </p> + +<h2 id="Методы">Методы</h2> + +<p><strong>ClassList </strong>является геттером. Возвращаемый им объект имеет несколько методов:</p> + +<dl> + <dt> add( String<strong> [,String] )</strong> </dt> + <dd> Добавляет элементу указанные классы</dd> + <dt><strong> remove</strong>( String [,String]<strong> )</strong></dt> + <dd><strong> </strong>Удаляет у элемента указанные классы</dd> + <dd><strong>item</strong> ( Number )<br> + Результат аналогичен вызову <code><strong>сlassList[Number]</strong></code></dd> + <dd><strong>toggle</strong> ( String [, Boolean])<br> + Если класс у элемента отсутствует - добавляет, иначе - убирает. Когда вторым параметром передано false - удаляет указанный класс, а если true - добавляет.</dd> + <dd> Если вторым параметром передан undefined или переменная с typeof == 'undefined', поведение будет аналогичным передаче только первого параметра при вызове toggle.</dd> + <dd><strong>contains</strong> ( String )<br> + Проверяет, есть ли данный класс у элемента (вернет true или false)</dd> +</dl> + +<div class="note"> +<p>И, конечно же, у <strong>ClassList</strong> есть заветное свойство<strong> length</strong>, которое возвращает количество классов у элемента.</p> +</div> + +<dl> + <dt> </dt> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: js" dir="rtl"><div id="clock" class="example for you"> </div> +</pre> + +<pre class="brush: js" dir="rtl">var elem = document.querySelector("#clock") + +//Выведем классы +console.log(elem.classList); //DOMTokenList ["example", "for", "you"] + +//Добавим классы +elem.classList.add("ok", "understand"); +console.log(elem.classList); //DOMTokenList ["example", "for", "you", "ok", "understand"] + +//Переключим классы +elem.classList.toggle("you"); +elem.classList.toggle("he"); +console.log(elem.classList); //DOMTokenList ["example", "for", "ok", "understand", "he"] + +//Проверим класс +console.log(elem.classList.contains("example")); //true +console.log(elem.classList.contains("lol")); //false + +//И удалим классы +elem.classList.remove("example", "for", "understand", "he"); +console.log(elem.classList); //DOMTokenList ["ok"]</pre> + +<p dir="rtl"> </p> + +<div class="warning"> +<p>В Firefox 25- в методах add, remove и toggle возможно указать только один аргумент. Смотрите: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a> </p> +</div> + +<h2 id="Полифилл">Полифилл</h2> + +<pre class="brush:js">// Источник: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca +;(function() { + // helpers + var regExp = function(name) { + return new RegExp('(^| )'+ name +'( |$)'); + }; + var forEach = function(list, fn, scope) { + for (var i = 0; i < list.length; i++) { + fn.call(scope, list[i]); + } + }; + + // class list object with basic methods + function ClassList(element) { + this.element = element; + } + + ClassList.prototype = { + add: function() { + forEach(arguments, function(name) { + if (!this.contains(name)) { + this.element.className += ' '+ name; + } + }, this); + }, + remove: function() { + forEach(arguments, function(name) { + this.element.className = + this.element.className.replace(regExp(name), ''); + }, this); + }, + toggle: function(name) { + return this.contains(name) + ? (this.remove(name), false) : (this.add(name), true); + }, + contains: function(name) { + return regExp(name).test(this.element.className); + }, + // bonus.. + replace: function(oldName, newName) { + this.remove(oldName), this.add(newName); + } + }; + + // IE8/9, Safari + if (!('classList' in Element.prototype)) { + Object.defineProperty(Element.prototype, 'classList', { + get: function() { + return new ClassList(this); + } + }); + } + + // replace() support for others + if (window.DOMTokenList && DOMTokenList.prototype.replace == null) { + DOMTokenList.prototype.replace = ClassList.prototype.replace; + } +})(); +</pre> + +<p> </p> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p> </p> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Особенность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>8.0</td> + <td>{{ CompatGeckoDesktop("1.9.2") }}</td> + <td>10</td> + <td>11.50</td> + <td>5.1<br> + {{Webkitbug("20709")}}</td> + </tr> + <tr> + <td>toggle method's second argument</td> + <td>24</td> + <td>{{CompatGeckoDesktop("24")}}</td> + <td><a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">not supported</a></td> + <td>15</td> + <td>yes<br> + {{Webkitbug("99375")}} + <p> </p> + </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Особенность</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td><span style="line-height: 1.572;">{{CompatGeckoMobile("1.9.2")}}</span></td> + <td>10</td> + <td>11.10</td> + <td>5.0</td> + </tr> + <tr> + <td>toggle method's second argument</td> + <td>?</td> + <td>{{CompatGeckoMobile("24")}}</td> + <td>?</td> + <td>?</td> + <td>?</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Спецификация">Спецификация</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist">http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist</a></li> + <li><a href="https://dom.spec.whatwg.org/#interface-domtokenlist">https://dom.spec.whatwg.org/#interface-domtokenlist</a></li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/DOM/element.className" title="DOM/element.className">element.className</a></li> +</ul> diff --git a/files/ru/web/api/element/classname/index.html b/files/ru/web/api/element/classname/index.html new file mode 100644 index 0000000000..2492c08bb0 --- /dev/null +++ b/files/ru/web/api/element/classname/index.html @@ -0,0 +1,108 @@ +--- +title: Element.className +slug: Web/API/Element/className +translation_of: Web/API/Element/className +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Summary" name="Summary">Описание</h2> + +<p>Свойство<strong> className</strong> отвечает за значение атрибута <strong>class</strong> элемента.</p> + +<div class="note"> +<p>Кстати, у <strong>className</strong> есть большой брат. Его зовут {{domxref("element.classList")}} - более мощный и функциональный метод для работы с классами элемента.</p> +</div> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><var>var cName</var> = <var>elem</var>.className; +<var>elem</var>.className = <var>cName</var>;</pre> + +<ul> + <li><strong><var>cName</var></strong> - строка. Если нужно указать несколько классов, они указываются через пробел.</li> +</ul> + +<h2 id="Example" name="Example">Пример</h2> + +<pre><div class="booble example"> </div> +</pre> + +<pre class="brush: js">var elm = document.querySelector("div"); + +alert(elm.className); //"booble example" + +elm.className = "class1 class2 class3"; +alert(elm.className); //"class1 class2 class3" +</pre> + +<div class="note"> +<h5 id="Notes" name="Notes"><strong>Заметка:</strong></h5> + +<p> Свойство получило необычное название <strong><code>className</code></strong> из-за того, что во многих языках, работающих с DOM, слово <em>class </em>является зарезервированным<em>.</em></p> +</div> + +<h2 id="Поддержка_браузерами" style="line-height: 24px;">Поддержка браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th style="line-height: 16px;">Особенность</th> + <th style="line-height: 16px;">Chrome</th> + <th style="line-height: 16px;">Firefox (Gecko)</th> + <th style="line-height: 16px;">Internet Explorer</th> + <th style="line-height: 16px;">Opera</th> + <th style="line-height: 16px;">Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th style="line-height: 16px;">Особенность</th> + <th style="line-height: 16px;">Android</th> + <th style="line-height: 16px;">Chrome for Android</th> + <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> + <th style="line-height: 16px;">IE Mobile</th> + <th style="line-height: 16px;">Opera Mobile</th> + <th style="line-height: 16px;">Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification"> </h2> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176">DOM Level 2 HTML: className</a></li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("element.classList")}}</li> +</ul> diff --git a/files/ru/web/api/element/clientheight/index.html b/files/ru/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..5e7f55f8ff --- /dev/null +++ b/files/ru/web/api/element/clientheight/index.html @@ -0,0 +1,114 @@ +--- +title: Element.clientHeight +slug: Web/API/Element/clientHeight +translation_of: Web/API/Element/clientHeight +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code><strong>Element.clientHeight</strong></code> - свойство, доступное только для чтения. Для элементов без CSS-стилей, или элементов каркаса строчной разметки - значение равно нулю. Для остальных элементов - значение равно внутренней высоте элемента в пикселах, включая пространство между содержимым элемента и его границей (padding), но исключая высоту полосы горизонтальной прокрутки, и ширину отступа от границы элемента до родительского элемента (margin).</p> + +<p><code>Значение <strong>clientHeight</strong></code><strong> </strong>может быть вычислено по формуле CSS <code>height</code> + CSS <code>padding</code> - высота горизонтального скролла (если присутствует).</p> + +<div class="note"> +<p><strong>Внимание:</strong> При вычислении значения свойства, результат округляется до ближайшего целого. Если требуется дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.</p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Синтакс</h2> + +<pre class="syntaxbox">var <var>h</var> = <var>element</var>.clientHeight;</pre> + +<p><code><var>h</var></code> - целочисленное значение высоты элемента в пикселях.</p> + +<h2 id="Example" name="Example">Пример</h2> + +<p> </p> + +<p> <img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> + + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Примечание</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-clientheight', 'clientHeight')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Notes" name="Notes">К сведению</h3> + +<p>Свойство <code>clientHeight</code> впервые было представлено в объектной модели Internet Explorer.</p> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>6</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">Смотрите также</h2> + +<ul> + <li>{{domxref("HTMLElement.offsetHeight")}}</li> + <li>{{domxref("Element.scrollHeight")}}</li> + <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li> +</ul> diff --git a/files/ru/web/api/element/clientleft/index.html b/files/ru/web/api/element/clientleft/index.html new file mode 100644 index 0000000000..28ac7b7def --- /dev/null +++ b/files/ru/web/api/element/clientleft/index.html @@ -0,0 +1,68 @@ +--- +title: Element.clientLeft +slug: Web/API/Element/clientLeft +translation_of: Web/API/Element/clientLeft +--- +<div>{{ APIRef("DOM") }}</div> + +<div>Ширина от левого края элемента в пискелях. При наличии overflow заключает в себя ширину от ветикального scrollbar для письма справа налево.</div> + +<p><code>clientLeft</code> не включает в себя ни левый padding ни margin с той же стороны. <code>clientLeft</code> только для чтения.</p> + +<p><a href="en/Gecko">Gecko</a>-based applications support <code>clientLeft</code> starting with Gecko 1.9 (<a href="en/Firefox_3">Firefox 3</a>, implemented in {{ Bug(111207) }}). This property is not supported in Firefox 2 and earlier.</p> + +<p>Когда <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> </a>значение установлено от 1 до 3 и направление текста справа налево, <strong>то вертикальный scrollbar будет спозиционирован слева</strong> и как следствие будет вычислен сlientLeft.</p> + +<div class="note"> +<p><strong>Внимание:</strong> Это свойство округлит значение к целому числу. Если нужно дробное значение используйте {{ domxref("element.getBoundingClientRect()") }}.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>left</var> = <var>element</var>.clientLeft; +</pre> + +<h2 id="Example">Example</h2> + +<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> + +<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-clientleft', 'clientLeft')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("api.Element.clientLeft")}}</p> + +<h2 id="Notes">Notes</h2> + +<p><code>clientLeft</code> был впервые введен MS IE DHTML object model.</p> + +<p>Расположени вертикального scrollbar для письма справа налево применненного для элемента будет назначатся вледующим свойством <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> preference</a></p> + +<p>Когда установлены стили элемента <code>display: inline</code>, то <code>clientLeft</code> вернет <code>0</code> несмотря на границы элемента.</p> diff --git a/files/ru/web/api/element/clienttop/index.html b/files/ru/web/api/element/clienttop/index.html new file mode 100644 index 0000000000..e3c1521657 --- /dev/null +++ b/files/ru/web/api/element/clienttop/index.html @@ -0,0 +1,70 @@ +--- +title: Element.clientTop +slug: Web/API/Element/clientTop +translation_of: Web/API/Element/clientTop +--- +<div>{{ APIRef("DOM") }}</div> + +<p>Толщина верхней границы элемента в пикселях. Не включает в себя margin и padding. Свойство только для чтения.</p> + +<p>Всё, что лежит между двумя местами (<code>offsetTop</code> и верх клиентской области) является границей элемента, потому что <code>offsetTop</code> показывает местоположение верха border элемента (не margin), в то время как верх клиентской области начинается сразу под border (клиентская область включает padding). Поэтому значение <strong>clientTop</strong> всегда будет равно значению <code>.getComputedStyle()</code> для "border-top-width". Например, если значение "border-top-width" равно нулю, то и <strong>clientTop</strong> тоже равно нулю.</p> + +<div class="blockIndicator note"> +<p><strong>Примечание:</strong> Это свойство округляет значение до целого. Если вам нужно дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.</p> +</div> + +<p>Основанные на <a href="en/Gecko">Gecko</a> приложения поддерживают <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">clientTop начиная с </span>Gecko 1.9 (<a href="en/Firefox_3">Firefox 3</a>, реализованно в {{ Bug(111207) }}). Это свойство не поддерживается в Firefox 2 и более ранних.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="eval">var<em>top</em> = <var>element</var>.clientTop; +</pre> + +<h2 id="Example" name="Example">Пример</h2> + +<p>В следующей иллюстрации клиентская область показана белым (части под названиями "Top", "Right" и т. д. не имеют никакого отношения к клиентской области). Значение <strong>clientTop</strong> - расстояние между окончением области margin (жёлтый) или padding и началом области контента (белый)</p> + +<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> + +<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="">Left</strong> <strong style="">Top</strong> <strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 190px;">Bottom</strong></div> + +<h2 id="Notes" name="Notes">Примечание</h2> + +<p><code>clientTop</code> был впервые введен в MS IE DHTML object model.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-clienttop', 'clientTop')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("api.Element.clientTop")}}</p> + +<h2 id="References" name="References">Смотрите также</h2> + +<ul> + <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></li> +</ul> diff --git a/files/ru/web/api/element/clientwidth/index.html b/files/ru/web/api/element/clientwidth/index.html new file mode 100644 index 0000000000..927ef1e1cb --- /dev/null +++ b/files/ru/web/api/element/clientwidth/index.html @@ -0,0 +1,59 @@ +--- +title: Element.clientWidth +slug: Web/API/Element/clientWidth +translation_of: Web/API/Element/clientWidth +--- +<div>{{APIRef("DOM")}}</div> + +<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Свойство </span></font><code><strong>Element.clientWidth</strong></code> равно 0 для инлайн элементов и элементов без CSS; для всех остальных равняется ширине элемента в пикселях, включая padding, но исключая ширину рамки (border), внешние отступы (margin), и вертикальную полосу прокрутки (если она есть).</p> + +<div class="note"> +<p><strong>Note:</strong> Это свойство округляет реальное значение до целого. Если вам нужно дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre> + +<p><code><var>intElemClientWidth</var></code> - целое число, соответствующее значению <code>clientWidth</code> элемента <code><var>element</var></code> в пикселях. Свойство <code>clientWidth</code> только для чтения.</p> + +<h2 id="Пример">Пример</h2> + +<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецфикация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="Примечание">Примечание</h3> + +<p><code>clientWidth</code> был впервые предствлен в объектной модели MS IE DHTML.</p> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.Element.clientWidth")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("HTMLElement.offsetWidth")}}</li> + <li>{{domxref("Element.scrollWidth")}}</li> + <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li> +</ul> diff --git a/files/ru/web/api/element/closest/index.html b/files/ru/web/api/element/closest/index.html new file mode 100644 index 0000000000..5ca79dbcc0 --- /dev/null +++ b/files/ru/web/api/element/closest/index.html @@ -0,0 +1,124 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Element + - Method + - Reference +translation_of: Web/API/Element/closest +--- +<div>{{APIRef("DOM")}}</div> + +<p>Метод <code><strong>Element.closest()</strong></code> возвращает ближайший родительский элемент (или сам элемент), который соответствует заданному CSS-селектору или null, если таковых элементов вообще нет.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox notranslate">var <em>elt =</em><em> element</em>.closest(<em>selectors</em>); +</pre> + +<ul> + <li><strong><code>selectors</code><em> - </em></strong>строка, а точнее {{domxref("DOMString")}}<code><em>, </em></code>содержащая CSS-селектор, к примеру: <em><strong>"#id", ".class", "div"</strong>...</em></li> + <li>Результат - элемент DOM ({{domxref("Element")}}), либо null.</li> +</ul> + +<h2 id="Исключения">Исключения</h2> + +<dl> + <dt><code>SYNTAX_ERR</code></dt> + <dd>Указаный css-селектор не является допустимым<em> ("/=21=1", "&@*#", "%'54523" и т.п. приведут к ошибке).</em></dd> +</dl> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="notranslate"><div id="block" title="Я - блок"> + <a href="#">Я ссылка в никуда</a> + <a href="http://site.ru">Я ссылка на сайт</a> + <div> + <div id="too"></div> + </div> +</div> +</pre> + +<p>Думаю, стоит рассмотреть несколько примеров:</p> + +<pre class="brush: js notranslate">var div = document.querySelector("#too"); //Это элемент от которого мы начнем поиск + +div.closest("#block"); //Результат - самый первый блок древа выше +div.closest("div"); //Сам блок #too и будет результатом, так как он подходит под селектор "div" +div.closest("a"); //null - В предках #too нет ни одного тега "a"! +div.closest("div[title]") //#block - так как ближе нет блоков с атрибутом title. + +</pre> + +<h2 id="Полифилл_1_рекурсивный_метод">Полифилл #1 (рекурсивный метод)</h2> + +<p>Для браузеров не поддерживающих Element.closest(), но позволяющих использовать element.matches() (или префиксный эквивалент) есть полифилл:</p> + +<pre class="brush: js notranslate">(function(ELEMENT) { + ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector; + ELEMENT.closest = ELEMENT.closest || function closest(selector) { + if (!this) return null; + if (this.matches(selector)) return this; + if (!this.parentElement) {return null} + else return this.parentElement.closest(selector) + }; +}(Element.prototype));</pre> + +<h2 id="Specification" name="Specification">Полифилл #2 (через цикл)</h2> + +<p>Тем не менее, если вам требуется поддержка IE 8, вы можете использовать следующий полифилл. Имейте ввиду - этот способ позволяет использовать CSS селекторы только уровня 2.1 и может жутко тормозить.</p> + +<pre class="brush: js notranslate">(function(e){ + e.closest = e.closest || function(css){ + var node = this; + <code class="language-javascript"><span class="keyword token"> + while</span> <span class="punctuation token">(</span>node<span class="punctuation token">)</span> <span class="punctuation token">{</span> +<span class="keyword token"> if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span><span class="function token">matches</span><span class="punctuation token">(</span>css<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> node<span class="punctuation token">;</span> + <span class="keyword token">else</span> node <span class="operator token">=</span> node<span class="punctuation token">.</span>parentElement<span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="keyword token"> return</span> <span class="keyword token">null</span><span class="punctuation token">;</span></code> + } +})(Element.prototype);</pre> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> + +<div>{{Compat("api.Element.closest")}}</div> + +<div> +<h3 id="Заметки_совместимости">Заметки совместимости</h3> + +<ul> + <li>В Edge <code>document.createElement(tagName).closest(tagName)</code> возвращает <code>null</code>, если элемент ещё не привязан в DOM.</li> +</ul> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>Интерфейс {{domxref("Element")}}.</li> + <li> + <p><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/Introduction_to_CSS/Selectors">Синтаксис селекторов</a></p> + </li> + <li> + <p>Другие методы, принимающие селекторы: {{domxref("element.querySelector()")}} и {{domxref("element.matches()")}}.</p> + </li> +</ul> +</div> diff --git a/files/ru/web/api/element/createshadowroot/index.html b/files/ru/web/api/element/createshadowroot/index.html new file mode 100644 index 0000000000..26c80f8497 --- /dev/null +++ b/files/ru/web/api/element/createshadowroot/index.html @@ -0,0 +1,91 @@ +--- +title: Element.createShadowRoot() +slug: Web/API/Element/createShadowRoot +translation_of: Web/API/Element/createShadowRoot +--- +<p>{{draft}}</p> + +<p>{{deprecated_header()}}</p> + +<p>Используйте <code>Element.createShadowRoot</code> чтобы создать экземпляр <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a>. После создания shadow DOM, он всегда будет привязан к существующему элементу. После создания shadowDOM, элемент к которому он привязан будет называться Теневой корень (shadowRoot) {{glossary("shadow root")}}.</p> + +<div class="note"> +<p>This method has been deprecated in favor of <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow">attachShadow</a>.</p> +</div> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">var <em>shadowroot =</em><em> element</em>.createShadowRoot(); +</pre> + +<h3 id="Параметры">Параметры</h3> + +<p>Отсутствуют</p> + +<h3 id="Значение_результата">Значение результата</h3> + +<p>Возвращает {{domxref("ShadowRoot")}}.</p> + +<h2 id="Спецификация">Спецификация</h2> + +<p>Эта функция больше не определяется никакими спецификациями</p> + +<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(35.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>22</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div class="note"> +<p>В Chrome 45, возможность иметь несколько теневых корней устарела.</p> +</div> diff --git a/files/ru/web/api/element/currentstyle/index.html b/files/ru/web/api/element/currentstyle/index.html new file mode 100644 index 0000000000..3df9fd524a --- /dev/null +++ b/files/ru/web/api/element/currentstyle/index.html @@ -0,0 +1,52 @@ +--- +title: Element.currentStyle +slug: Web/API/Element/currentStyle +tags: + - API + - NeedsExample + - Non-standard + - Property +translation_of: Web/API/Element/currentStyle +--- +<p>{{Non-standard_header}}</p> + +<p class="summary"><span class="seoSummary"><strong><code>Element.currentStyle</code></strong> является собственностью, похожей на стандартизированную {{DOMxRef("window.getComputedStyle()")}} method.</span> Он доступен в старых версиях Microsoft Internet Explorer. Однако, он возвращает единицы, установленные в CSS в то время как <code>window.getComputedStyle()</code>возвращает значения в пикселях.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<div class="note"> +<p>Эта polyfill возвращает значения в пикселях и, скорее всего, будет довольно медленным, так как оно должно называться {{domxref("window.getComputedStyle()")}} каждый раз, когда читается его значение.</p> +</div> + +<pre class="brush: js">/* Любое авторское право посвящено Общественному достоянию. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +if (!("currentStyle" in Element.prototype)) { + Object.defineProperty(Element.prototype, "currentStyle", { + get: function() { + return window.getComputedStyle(this); + } + }); +} +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<p>Не входит ни в какие спецификации.</p> + +<p>Microsoft <a href="https://web.archive.org/web/20150629144515/https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">had a description on MSDN</a>.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div> + +<p>{{Compat("api.Element.currentStyle")}}</p> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>{{DOMxRef("Element.runtimeStyle")}}</li> + <li>{{DOMxRef("window.getComputedStyle()")}}</li> +</ul> + +<div>{{APIRef("DOM")}}</div> diff --git a/files/ru/web/api/element/getattribute/index.html b/files/ru/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..a60d2fcdcd --- /dev/null +++ b/files/ru/web/api/element/getattribute/index.html @@ -0,0 +1,49 @@ +--- +title: Element.getAttribute() +slug: Web/API/Element/getAttribute +tags: + - API + - DOM + - Method + - метод +translation_of: Web/API/Element/getAttribute +--- +<p>{{ ApiRef("DOM") }}</p> + +<h2 id="Summary" name="Summary">Описание</h2> + +<p><code>getAttribute()</code> возвращает значение указанного атрибута элемента. Если элемент не содержит данный атрибут, могут быть возвращены <code>null</code> или <code>""</code> (пустая строка); подробнее {{ Anch("Notes") }}.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="eval"><em>var attribute</em> = element.getAttribute(<em>attributeName</em>); +</pre> + +<p>где</p> + +<ul> + <li><code><em>attribute</em></code> - переменная, которой будет присвоено значение <code><em>attributeName</em></code>.</li> + <li><code><em>attributeName</em></code> - имя атрибута, значение которого необходимо получить.</li> +</ul> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="eval">var div1 = document.getElementById("div1"); +var align = div1.getAttribute("align"); +alert(align); // отобразит значение атрибута align элемента с id="div1" +</pre> + +<h2 id="Notes" name="Notes">Примечания</h2> + +<p>Когда метод <code>getAttribute</code> вызывается применительно к HTML-элементу, в DOM HTML-документа, значение аргумента приводится к нижнему регистру.</p> + +<p>В действительности все браузеры (Firefox, Internet Explorer, последние версии Opera, Safari, Konqueror, iCab и т.д.) возвращают <code>null</code>, когда выбранный элемент не содержит атрибута с переданным именем. Спецификация DOM определяет, что корректное возвращаемое значение в данном случае - <em>пустая строка</em> и некоторые реализации DOM придерживаются такого поведения. Реализация getAttribute в XUL (Gecko) в настоящее время следует спецификации и возвращает пустую строку. Следовательно, имеет смысл использовать <a href="/en/DOM/element.hasAttribute" title="en/DOM/element.hasAttribute">hasAttribute</a>, чтобы проверять наличие атрибутов перед вызовом <code>getAttribute()</code>, если может быть такое, что выбранный элемент не будет содержать искомого атрибута.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Specification" name="Specification">Спецификации</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (представлено в <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> +</ul> diff --git a/files/ru/web/api/element/getboundingclientrect/index.html b/files/ru/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..2a53575049 --- /dev/null +++ b/files/ru/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,102 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - DOM + - JavaScript + - getBoundingClientRect + - Позиция + - Прямоугольник + - Самый маленький + - Справка + - Элемент + - метод +translation_of: Web/API/Element/getBoundingClientRect +--- +<div>{{APIRef("DOM")}}</div> + +<p>Метод <code><strong>Element.getBoundingClientRect()</strong></code> возвращает размер элемента и его позицию относительно viewport (часть страницы, показанная на экране, и которую мы видим).</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><em>domRect</em> = <em>element</em>.getBoundingClientRect();</pre> + +<h3 id="Returns" name="Returns">Возвращаемое значение</h3> + +<p>Данный метод возвращает объект {{domxref("DOMRect")}}, который является объединением прямоугольников, возвращаемых методом {{domxref("Element.getClientRects", "getClientRects()")}} для данного элемента, т. е. CSS border-boxes (css-коробок в рамках), связанных с этим элементом. Результатом является самый маленький прямоугольник, в котором содержится весь элемент с read-only <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code> и <code>height</code> свойствами, описывающие это в пикселях. Все свойства, кроме <code>width</code> и <code>height</code>, являются относительными к верхнему левому углу viewport-а.</p> + +<p style="display: block;"><img alt="Explanation of DOMRect values" src="https://mdn.mozillademos.org/files/15087/rect.png" style="float: right; height: 300px; width: 300px;" title="Explanation of DOMRect values"></p> + +<p>Пустые border-box полностью игнорируются. Если border-box элемента пуст, прямоугольник возвращается с нулевыми <code>width</code> и <code>height</code>, а <code>top</code> и <code>left</code> берутся у следующего CSS элемента (в порядке контента).</p> + +<p>После каждого скролла значения <code>left</code>, <code>top</code>, <code>right</code> и <code>bottom</code> изменяются, так как эти значения относительны к viewport и не абсолютные.</p> + +<p>Если вам нужны значения, описывающие прямоугольник относительно к верхнему левому углу документа, просто добавьте к свойствам <code>top</code> и <code>left</code> текущую позицию прокрутки, используя {{domxref("window.scrollX")}} и {{domxref("window.scrollY")}}), чтобы получить прямоугольник, положение которого не зависит от текущей позиции прокрутки.</p> + +<h3 id="Про_кроссбраузерность">Про кроссбраузерность</h3> + +<p>Скрипты, требующих высокую кроссбраузерность, могут использовать {{domxref("window.pageXOffset")}} и {{domxref("window.pageYOffset")}} вместо <code>window.scrollX</code> and <code>window.scrollY</code>. Скрипты без доступа к этим свойствам могут использовать код, наподобие этого:</p> + +<pre class="brush: js"><code>// Для scrollX +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft +// Для scrollY +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.scrollTop == 'number' ? t : document.body).scrollTop</code></pre> + +<h2 id="Пример"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.33333rem; letter-spacing: -0.00278rem;'>Пример</span></h2> + +<pre class="brush: js"><code>// rect - DOMRect объект с 8-ми свойствами: left, top, right, bottom, x, y, width, height +var rect = obj.getBoundingClientRect();</code></pre> + +<h2 id="Спецификация">Спецификация</h2> + +<table> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h3 id="Notes" name="Notes">Примечания</h3> + +<p>Возвращаемый <code>DOMRect</code> объект может быть модифицирован в современных браузерах. Это не так со старыми версиями, которые возвращали <code>DOMRectReadOnly</code>. У IE и Edge, не имея возможности добавить пропущенные свойства к возращаемым ими <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx"><code>ClientRect</code></a>, объект не позволял добавить <code>x</code> и <code>y</code>.</p> + +<p>Для кроссбраузерности надежно использовать только <code>left</code>, <code>top</code>, <code>right</code>, и <code>bottom</code>.</p> + +<p>Свойства у <code>DOMRect</code> не являются собственными. <code>in</code> оператор и <code>for...in</code> найдут возвращенные значение, но другие APIs, <code>Object.keys()</code>, — нет. А еще <code>Object.assign()</code> и spread оператор не копируют их.</p> + +<pre><code>rect = elt.getBoundingClientRect() +// emptyObj всегда {} +emptyObj = Object.assign({}, rect) +emptyObj = { ...rect } +{width, ...emptyObj} = rect</code></pre> + +<p><code>DOMRect</code> свойства <code>top</code>, <code>left</code>, <code>right</code> и <code>bottom</code> вычисляются, используя значения других свойств объекта.</p> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<div> +<p>{{Compat("api.Element.getBoundingClientRect")}}</p> +</div> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li> + <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li> + <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, более ранняя версия <code>DOMRect</code></li> + <li></li> + <li>{{DOMxRef("Element.getClientRects()")}}</li> +</ul> diff --git a/files/ru/web/api/element/getelementsbyclassname/index.html b/files/ru/web/api/element/getelementsbyclassname/index.html new file mode 100644 index 0000000000..08cacea20e --- /dev/null +++ b/files/ru/web/api/element/getelementsbyclassname/index.html @@ -0,0 +1,117 @@ +--- +title: Element.getElementsByClassName() +slug: Web/API/Element/getElementsByClassName +tags: + - API + - Класс + - Коллекция + - Элемент +translation_of: Web/API/Element/getElementsByClassName +--- +<p>{{APIRef("DOM")}}</p> + +<p><strong><code>Element.getElementsByClassName()</code></strong> метод возвращает объект {{domxref("HTMLCollection")}}, содержащий в себе все дочерние элементы, которые имеют заданные имена классов. Если вызван на объекте document, будут возвращены все элементы, содержащиеся в документе.</p> + +<p>Так же, как метод {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} действует на весь документ; это вернет элементы, которые являются потомками корневого элемента, содержащие в себе указанные классы.</p> + +<p>Syntax</p> + +<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre> + +<ul> + <li><em><var>elements</var></em> — {{ domxref("HTMLCollection") }} содержащий найденные элементы</li> + <li><em><var>names</var></em> — строка, содержащая в себе имена классов; имена разделяются пробелами</li> + <li><em>element</em> — любой {{domxref("Element")}} в документе (в котором осуществляется выборка)</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<p>Получить все элементы с классом test:</p> + +<pre class="brush: js">element.getElementsByClassName('test');</pre> + +<p>Получить все элементы с классами test и red:</p> + +<pre class="brush: js">element.getElementsByClassName('red test');</pre> + +<p>Получить все элементы с классом test, которые находятся в элементе с id main:</p> + +<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre> + +<p>Мы так же можем использовать все методы из {{jsxref("Array.prototype")}} на любом {{ domxref("HTMLCollection") }} путем передачи <code><var>HTMLCollection</var></code> в метод как значение <var>this</var>. Так мы найдем все {{HTMLElement("div")}} элементы, которые имеют класс test:</p> + +<pre class="brush: js">var testElements = document.getElementsByClassName('test'); +var testDivs = Array.prototype.filter.call(testElements, function(testElement){ + return testElement.nodeName === 'div'; +});</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>9</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [2]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }} [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Prior to Firefox 19, this method was returning a {{domxref("NodeList")}}; it was then changed to reflects the change in the spec.</p> + +<p>[2] Safari on iOS 8 and OS X 10.10 returns a {{domxref("NodeList")}}.</p> diff --git a/files/ru/web/api/element/getelementsbytagname/index.html b/files/ru/web/api/element/getelementsbytagname/index.html new file mode 100644 index 0000000000..dc9dc4fbc7 --- /dev/null +++ b/files/ru/web/api/element/getelementsbytagname/index.html @@ -0,0 +1,134 @@ +--- +title: Element.getElementsByTagName() +slug: Web/API/Element/getElementsByTagName +translation_of: Web/API/Element/getElementsByTagName +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code><strong>Element.getElementsByTagName()</strong></code> метод возвращает живую коллекцию элементов {{domxref("HTMLCollection")}} , учитывая <a href="/en/DOM/element.tagName" title="en/DOM/element.tagName">имя тэга</a>. Поиск осуществляется в поддереве указанного элемента, в результат поиска не попадает сам элемент, в поддереве которого осуществлялся поиск. Возвращает живой список, который автоматически обновляется при изменении DOM. Поэтому не нужно вызывать метод <code>Element.getElementsByTagName()</code> несколько раз с одними и теми же аргументами, содержимое списка обновляется автоматически.</p> + +<p>При вызове на HTML-элементе в HTML-документе метод <code>getElementsByTagName</code> переводит аргумент по которому осуществляется поиск (имя тега) в нижний регистр до того как начать поиск. Это нежелательно, когда необходимо использовать метод для поиска SVG элементов, где в наименовании тега может использоваться верблюжья (camel-cased) нотация. В этом случае правильно использовать метод {{ domxref("Element.getElementsByTagNameNS()") }}.</p> + +<p><code>Element.getElementsByTagName</code> похож на {{domxref("Document.getElementsByTagName()")}}, за исключением того, что поиск осуществляется среди потомков конкретного элемента, а не во всём HTML-документе. </p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre> + +<ul> + <li><code>elements</code> это живая коллекция {{domxref("HTMLCollection")}} найденных элементов в том порядке, в котором они были найдены в дереве. Если не найдено ни одного эелемента, удовлетворяющего условиям поиска, то коллекция будет пустой.</li> + <li><code>element</code> это элемент в котором будет осуществляться поиск. Обратите внимание, что поиск будет осуществляться только в потомках этого элемента. Сам элемент не будет включен в результат поиска. </li> + <li><code>tagName</code> определяет имя тега для поиска. Если значением tagName будет <code>"*", то в результате будут получены все потомки элемента по которому осуществляется поиск</code>. Для совместимости с XHTML следует использовать нижний регистр в имени тега. </li> +</ul> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">// check the alignment on a number of cells in a table. +var table = document.getElementById("forecast-table"); +var cells = table.getElementsByTagName("td"); +for (var i = 0; i < cells.length; i++) { + var status = cells[i].getAttribute("data-status"); + if ( status == "open" ) { + // grab the data + } +} +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Changed the return value from {{domxref("NodeList")}} to {{domxref("HTMLCollection")}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No change from {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>No change from {{SpecName('DOM1')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0 [2]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>5.5</td> + <td>{{ CompatVersionUnknown() }} [2]</td> + <td>{{ CompatVersionUnknown() }} [2]</td> + </tr> + <tr> + <td>getElementsByTagName("*")</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>6.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] До Firefox 19 этот метод возвращал {{domxref("NodeList")}}; и был затем изменен, чтобы соответстовать спецификации.</p> + +<p>[2] Первоначально этот метод возвращал {{domxref("NodeList")}}; и был затем изменен, чтобы соответстовать спецификации.</p> diff --git a/files/ru/web/api/element/hasattribute/index.html b/files/ru/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..12983eff93 --- /dev/null +++ b/files/ru/web/api/element/hasattribute/index.html @@ -0,0 +1,114 @@ +--- +title: Element.hasAttribute() +slug: Web/API/Element/hasAttribute +tags: + - ОМД + - Элемент + - метод +translation_of: Web/API/Element/hasAttribute +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Element.hasAttribute()</code></strong> метод возвращает {{Glossary("Boolean")}} значение указывающее, имеет ли указанный элемент указанный атрибут или нет.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>var <em>result</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>attName</var></em>); +</pre> + +<ul> + <li><code>Переменная result</code> хранит возвращенное значение <code>true</code> или <code>false</code>.</li> + <li><code>attName</code> это {{Glossary("String")}} представляющая имя атрибута.</li> +</ul> + +<h2 id="Пример">Пример</h2> + +<pre class="brush:js">// проверка, существует ли атрибут, перед тем как задать значение +var d = document.getElementById("div1"); + +if (d.hasAttribute("align")) { + d.setAttribute("align", "center"); +}</pre> + +<h2 id="Замечания">Замечания</h2> + +<div>{{DOMAttributeMethods}}</div> + +<div> </div> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>С {{SpecName('DOM3 Core')}}, перемещено с {{domxref("Node")}} к {{domxref("Element")}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-NodeHasAttrs', 'Element.hasAttribute()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Нет изменений с {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-NodeHasAttrs', 'Element.hasAttribute()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Исходное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>8.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ru/web/api/element/hasattributes/index.html b/files/ru/web/api/element/hasattributes/index.html new file mode 100644 index 0000000000..1ab3c40fd8 --- /dev/null +++ b/files/ru/web/api/element/hasattributes/index.html @@ -0,0 +1,122 @@ +--- +title: Element.hasAttributes() +slug: Web/API/Element/hasAttributes +translation_of: Web/API/Element/hasAttributes +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Метод <code><strong>Element</strong></code><strong><code>.hasAttributes()</code></strong> возвращает <strong>Boolean</strong> значение, указывая содержит данный элемент какие-либо атрибуты или нет.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre>var<em><var> result</var></em> = <em><var>element</var></em>.hasAttributes();</pre> + +<dl> + <dt><code>result</code></dt> + <dd>содержит возвращаемое значение <code>true</code> или <code>false</code>.</dd> +</dl> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush:js">var foo = document.getElementById("foo"); +if (foo.hasAttributes()) { + // do something with 'foo.attributes' +} +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush:js">;(function(prototype) { + prototype.hasAttributes = prototype.hasAttributes || function() { + return (this.attributes.length > 0); + } +})(Element.prototype); +</pre> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-element-hasattributes", "Element.hasAttributes()")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Moved from the {{domxref("Node")}} interface to the more specialized {{domxref("Element")}} interface.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No change from {{SpecName("DOM2 Core")}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Initial definition, on the {{domxref("Node")}} interface.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>9</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Before Firefox 35, it was implemented on the {{domxref("Node")}} interface.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("Element.attributes")}}</li> + <li>{{domxref("Element.hasAttribute()")}}</li> +</ul> diff --git a/files/ru/web/api/element/id/index.html b/files/ru/web/api/element/id/index.html new file mode 100644 index 0000000000..62fd77b730 --- /dev/null +++ b/files/ru/web/api/element/id/index.html @@ -0,0 +1,121 @@ +--- +title: Element.id +slug: Web/API/Element/id +tags: + - API + - DOM + - Element + - Property + - Reference +translation_of: Web/API/Element/id +--- +<div>{{ ApiRef("DOM") }}</div> + +<div>Свойство <code><strong>id</strong></code> представляет идентификатор элемента, отражая глобальный аттрибут <strong><a href="/ru/docs/Web/HTML/Global_attributes/id">id</a></strong>.</div> + +<div></div> + +<p>Если значение <code><strong>id</strong></code> не пустое, то оно должно быть уникально в документе.</p> + +<p><code><strong>id</strong></code> часто используется с {{domxref("document.getElementById", "getElementById")}}, чтобы получить нужный элемент. Часто применяют <a href="/ru/docs/Web/CSS/ID_selectors" title="Web/CSS/ID_selectors">ID как селектор</a>, для стилизации документа, с помощью <a href="r u/docs/Web/CSS" title="CSS">CSS</a>.</p> + +<div class="note"> +<p><span style="font-size: 14px; line-height: 21px;"><strong>Замечание</strong></span>: идентификаторы чувствительны к регистру, но вам следует избегать создание id, которых различает регистр (смотрите <a href="/ru/docs/Case_Sensitivity_in_class_and_id_Names" title="Case_Sensitivity_in_class_and_id_Names">Чувствительность к регистру в классах и id'шниках</a>).</p> +</div> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre>var <em>idStr</em> = <em>element</em>.id; // Получаем id. +</pre> + +<pre><em>element</em>.id = <em>idStr</em>;<em> // Применяем id</em> +</pre> + +<p><em><code>idStr</code></em> - идентификатор элемента</p> + +<h2 id="Specification" name="Specification">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификации</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Нет изменений от {{SpecName('DOM2 HTML')}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>Нет отличий от {{SpecName('DOM1')}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Изначальное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Глобальный атрибут <a href="/ru/docs/Web/HTML/Global_attributes/id"><strong>id</strong></a></li> +</ul> diff --git a/files/ru/web/api/element/index.html b/files/ru/web/api/element/index.html new file mode 100644 index 0000000000..3f95a90be6 --- /dev/null +++ b/files/ru/web/api/element/index.html @@ -0,0 +1,297 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - Element + - Interface + - Reference +translation_of: Web/API/Element +--- +<p>{{ APIRef("DOM") }}</p> + +<p><span class="seoSummary">Интерфейс <code><strong>Element</strong></code> представляет собой один из объектов в {{domxref("Document")}}. Этот интерфейс описывает методы и свойства, общие для всех видов элементов. Конкретные модели поведения описаны в интерфейсах, которые наследуют от <code>Element</code>, и добавляют дополнительную функциональность.</span></p> + +<p>Например, интерфейс {{domxref("HTMLElement")}} является базовым интерфейсом для HTML-элементов, в то время как интерфейс {{domxref("SVGElement")}} является основой для всех SVG-элементов.</p> + +<p>Языки, находящиеся вне области веб-платформы, также используют его. Например, <code>XUL</code> — через <code>интерфейс XULElement</code>.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties" name="Properties">Свойства</h2> + +<p><em>Наследует свойства от родительского узла {{domxref("Node")}} и от собственного родителя {{domxref("EventTarget")}} и реализует свойства {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, </em>and {{domxref("Animatable")}}.</p> + +<dl> + <dt>{{ domxref("Element.assignedSlot")}} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Возвращает {{domxref("HTMLSlotElement")}} интерфейс, связанный с элементом.</dd> + <dt>{{ domxref("Element.attributes") }} {{readOnlyInline}}</dt> + <dd>Возвращает {{ domxref("NamedNodeMap") }}, в котором перечислены все атрибуты связанные с элементом.</dd> + <dt>{{ domxref("Element.classList") }} {{readOnlyInline}}</dt> + <dd>Возвращает {{ domxref("DOMTokenList") }} содержащий список атрибутов класса.</dd> + <dt>{{ domxref("ParentNode.childElementCount") }}</dt> + <dd>Это {{jsxref("Number")}} представляющее число дочерних узлов, представленных в элементе.</dd> + <dt>{{ domxref("ParentNode.children") }}</dt> + <dd>Is a live {{ domxref("HTMLCollection") }}, содержащая все дочерние элементы, в виде коллекции.</dd> + <dt>{{ domxref("Element.className") }}</dt> + <dd>Это {{domxref("DOMString")}}, представляющая класс элемента.</dd> + <dt>{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Возвращает {{jsxref("Number")}}, представляющее внутреннюю высоту элемента.</dd> + <dt>{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Возвращает {{jsxref("Number")}}, предсталяющее ширину левой границы элемента.</dd> + <dt>{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Возвращает {{jsxref("Number")}}, представляющее ширину верхней границы элемента.</dd> + <dt>{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Возвращает {{jsxref("Number")}}, представляющее внутреннюю ширину элемента.</dd> + <dt>{{ domxref("ParentNode.firstElementChild") }}</dt> + <dd>Возвращает {{ domxref("Element") }}, первый дочерний элемент элемента или <code>null</code>, если у элемента нет дочерних элементов.</dd> + <dt>{{ domxref("Element.id") }}</dt> + <dd>Возвращает {{domxref("DOMString")}}, представляющий идентификатор (Id) элемента.</dd> + <dt>{{ domxref("Element.innerHTML") }} {{experimental_inline}}</dt> + <dd>Является {{domxref("DOMString")}}, представляющей разметку контента элемента.</dd> + <dt>{{domxref("Element.namespaceURI")}} {{readonlyInline}}</dt> + <dd>Пространство имён URI элемента или null, если это не пространство имен.</dd> + <dd> + <div class="note"> + <p><strong>Примечание:</strong> В Firefox версии 3.5 и ранее, HTML элементы не находятся в пространстве имен. В более поздних версиях, HTML элементы находятся в пространстве имен <code><a href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> как в деревьях HTML, так и XML. {{ gecko_minversion_inline("1.9.2") }}</p> + </div> + </dd> +</dl> + +<dl> + <dt>{{ domxref("ParentNode.lastElementChild") }}</dt> + <dd>Является {{ domxref("Element") }}, последним непосредственным дочерним элементом данного элемента, или <code>null</code>, если у элемента нет дочерних элементов.</dd> + <dt>{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }}</dt> + <dd>Является {{ domxref("Element") }}, элементом, непосредственно следующим за данным в древе, или <code>null</code>, если соседний элемент отсутствует.</dd> + <dt>{{ domxref("Element.outerHTML") }} {{experimental_inline}}</dt> + <dd>Является {{domxref("DOMString")}}, представляющей разметку элемента, включая его контент. При использовании в качестве сеттера заменяет элемент узлами, структурированными из указанной строки.</dd> + <dt>{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }}</dt> + <dd>Является {{ domxref("Element") }}, элементом, непосредственно предшествующим в древе данному, или <code>null</code>, если соседний элемент отсутствует.</dd> + <dt>{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Возвращает {{jsxref("Number")}}, представляющее высоту прокрутки элемента.</dd> + <dt>{{ domxref("Element.scrollLeft") }} {{experimental_inline}}</dt> + <dd>Является {{jsxref("Number")}}, представляющим количество пикселей, на которые контент элемента прокручен влево.</dd> + <dt>{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt> + <dd>Возвращает {{jsxref("Number")}}, представляющее максимально возможное количество пикселей, на которые можно прокрутить контент элемента влево.</dd> + <dt>{{ domxref("Element.scrollTop") }} {{experimental_inline}}</dt> + <dd>Является {{jsxref("Number")}}, представляющим количество пикселей, на которые контент элемента прокручен от верха.</dd> + <dt>{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt> + <dd>Вовзращает {{jsxref("Number")}}, представляющее максимально возможное количество пикселей, на которые можно прокрутить контент элемента от верха.</dd> + <dt>{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Возвращает {{jsxref("Number")}}, представляющее ширину прокрутки элемента.</dd> + <dt>{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>...</dd> + <dt>{{ domxref("Element.tagName") }} {{readOnlyInline}}</dt> + <dd>Возвращает {{domxref("String")}} с именем тега указанного элемента.</dd> + <dt>{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns the {{domxref("UndoManager")}} associated with the element.</dd> + <dt>{{ domxref("Element.undoScope")}} {{experimental_inline}}</dt> + <dd>Представляет собой {{jsxref("Boolean")}}, указывающим, является элемент undo scope host, или нет.</dd> +</dl> + +<div class="note"> +<p><strong>Примечание:</strong> В DOM3 <code>namespaceURI</code>, <code>localName</code> и <code>prefix</code> определялись в интерфейсе {{domxref("Node")}}. В DOM4 они были перенесены в <code>Element</code>.</p> + +<p>Данное изменение поддерживается в Chrome начиная с версии 46.0 и в Firefox с версии 48.0.</p> +</div> + +<h3 id="Handlers" name="Handlers">Обработчики событий</h3> + +<dl> + <dt>{{ domxref("Element.ongotpointercapture") }}</dt> + <dd>Возвращает обработчик событий для событий типа {{event("gotpointercapture")}}.</dd> + <dt>{{ domxref("Element.onlostpointercapture") }}</dt> + <dd>Возвращает обработчик событий для событий типа {{event("lostpointercapture")}}.</dd> +</dl> + +<h4 id="Устаревшие_обработчики_событий">Устаревшие обработчики событий</h4> + +<dl> + <dt>{{ domxref("Element.onwheel") }} {{ non-standard_inline() }}</dt> + <dd>Возвращает код обработчика для события <code>wheel</code>.<br> + <strong>Сейчас реализован в {{domxref("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.</strong></dd> +</dl> + +<h2 id="Methods" name="Methods">Методы</h2> + +<p><em>Наследует методы от своих родителей {{domxref("Node")}}, и своего собственного родителя {{domxref("EventTarget")}}<em>, и реализует методы {{domxref("ParentNode")}}, {{domxref("ChildNode")}}<em>, {{domxref("NonDocumentTypeChildNode")}}, </em></em>и {{domxref("Animatable")}}.</em></p> + +<dl> + <dt>{{ domxref("EventTarget.addEventListener()") }}</dt> + <dd>Регистрирует обработчик событий для опрделенного типа событий в элементе.</dd> + <dt>{{ domxref("Element.closest()")}} {{experimental_inline}}</dt> + <dd>Возращает {{domxref("Element")}}, потомка этого элемента (или сам этот элемент), который является ближайшим предком элементов, выбраных селекторами, указанными в параметре.</dd> + <dt>{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{ domxref("EventTarget.dispatchEvent()") }}</dt> + <dd>Отправляет событие для этого узла в DOM и возвращает {{jsxref("Boolean")}}, который указывает, что по крайней мере один обработчик не отменил его.</dd> + <dt>{{domxref("Element.find()")}}{{experimental_inline}}</dt> + <dd>...</dd> + <dt>{{domxref("Element.findAll()")}}{{experimental_inline}}</dt> + <dd>...</dd> + <dt>{{domxref("Animatable.getAnimationPlayers()")}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{ domxref("Element.getAttribute()") }}</dt> + <dd>Извлекает значение именованного атрибута из текущего узла и возвращает его в виде{{jsxref("Object")}}.</dd> + <dt>{{ domxref("Element.getAttributeNS()") }}</dt> + <dd>Извлекает значение атрибута с указанным именем и пространством имен из текущего узла и возвращает его как {{jsxref("Object")}}.</dd> + <dt>{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}</dt> + <dd>Извлекает представление узла именованного атрибута из текущего узла и возвращает его в виде {{ domxref("Attr") }}.</dd> + <dt>{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}</dt> + <dd>Извлекает представление узла атрибута с указанным именем и пространством имен из текущего узла и возвращает его в виде {{ domxref("Attr") }}.</dd> + <dt>{{ domxref("Element.getBoundingClientRect()") }}<code> </code>{{experimental_inline}}</dt> + <dd>...</dd> + <dt>{{ domxref("Element.getClientRects()") }} {{experimental_inline}} TYPE of returnvalue????</dt> + <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd> + <dt>{{domxref("Element.getDestinationInsertionPoints()")}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{ domxref("Element.getElementsByClassName()") }}</dt> + <dd>Возвращает коллекцию {{ domxref ("HTMLCollection")}}, которая содержит все элементы, у которых название класса совпадает с тем, что заданно в параметрах функции.</dd> + <dt>{{ domxref("Element.getElementsByTagName()") }}</dt> + <dd>Возвращает коллекцию {{ domxref ("HTMLCollection")}}, которая содержит все элементы, у которых название тега совпадает с тем, что заданно в параметрах функции.</dd> + <dt>{{ domxref("Element.getElementsByTagNameNS()") }}</dt> + <dd>Возвращает коллекцию {{ domxref ("HTMLCollection")}}, которая содержит все элементы, у которых название тега и пространства имён совпадает с тем, что заданно в параметрах функции.</dd> + <dt>{{ domxref("Element.hasAttribute()") }}</dt> + <dd>Вовзращает {{jsxref("Boolean")}}, указывающее, имеет элемент определенный атрибут, или нет.</dd> + <dt>{{ domxref("Element.hasAttributeNS()") }}</dt> + <dd>Возвращает {{jsxref("Boolean")}}, указывающий, имеет элемент определенный атрибут в определенном пространстве имен, или нет.</dd> + <dt>{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}</dt> + <dd>Анализирует текст как HTML или XML и вставляет полученные узлы в указанную позицию дерева элементов.</dd> + <dt>{{ domxref("Element.matches()") }}<code> </code>{{experimental_inline}}</dt> + <dd>Возвращает {{jsxref ("Boolean")}}, указывающий, будет ли элемент выбран указанной строкой селектора.</dd> + <dt>{{ domxref("Element.querySelector()") }}</dt> + <dd>Возвращает первый {{DOMxRef ("Node")}}, который соответствует указанной строке селектора элемента.</dd> + <dt>{{ domxref("Element.querySelectorAll") }}</dt> + <dd>Возвращает список {{DOMxRef ("NodeList")}} узлов, которые соответствуют указанной строке селектора элемента.</dd> + <dt>{{ domxref("Element.releasePointerCapture")}} {{experimental_inline}}</dt> + <dd>Позволяет понять, имеет ли элемент с указанным ID захват указателя для указателя</dd> + <dt>{{domxref("ChildNode.remove()")}}</dt> + <dd>Удаляет элемент из списка дочерних элементов родительского элемента.</dd> + <dt>{{ domxref("Element.removeAttribute()") }}</dt> + <dd>Удаляет именованный атрибут из текущего узла.</dd> + <dt>{{ domxref("Element.removeAttributeNS()") }}</dt> + <dd>Удаляет атрибут с указанным именем и пространством имен, из текущего узла.</dd> + <dt>{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}</dt> + <dd>Удаляет представление узла именованного атрибута из текущего узла.</dd> + <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt> + <dd>Удаляет прослушиватель событий из элемента.</dd> + <dt>{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}</dt> + <dd>Асинхронно запрашивает браузер, чтобы сделать элемент полноэкранным.</dd> + <dt>{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt> + <dd>Позволяет асинхронно запрашивать блокировку указателя для данного элемента.</dd> +</dl> + +<dl> + <dt>{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}</dt> + <dd>Прокручивает страницу до тех пор, пока элемент не попадет в представление.</dd> + <dt>{{ domxref("Element.setAttribute()") }}</dt> + <dd>Устанавливает значение именованного атрибута из текущей узла.</dd> + <dt>{{ domxref("Element.setAttributeNS()") }}</dt> + <dd>Устанавливает значение атрибута с опрделенным именем и пространством имен из текущей узла.</dd> + <dt>{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}</dt> + <dd>Задает представление узла именованного атрибута из текущего узла.</dd> + <dt>{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}</dt> + <dd>Установите представление узла атрибута с указанным именем и пространством имен из текущего узла.</dd> + <dt>{{ domxref("Element.setCapture()") }} {{non-standard_inline}}</dt> + <dd>Настройка захвата событий мыши, перенаправление всех событий мыши на этот элемент.</dd> + <dt>{{domxref("Element.setPointerCapture()")}}</dt> + <dd>Определяет указанный элемент как цель захвата будущих событий указателя.</dd> +</dl> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Web Animations", '', '')}}</td> + <td>{{Spec2("Web Animations")}}</td> + <td>Добавлен метод <code>getAnimationPlayers()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Undo Manager', '', 'Element')}}</td> + <td>{{Spec2('Undo Manager')}}</td> + <td>Добавлены свойства <code>undoScope</code> и <code>undoManager</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Добавлены следующие обработчики событий: <code>ongotpointercapture</code> и <code>onlostpointercapture</code>.<br> + Добавлены следующие методы: <code>setPointerCapture()</code> и <code>releasePointerCapture()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}</td> + <td>{{Spec2('Selectors API Level 2')}}</td> + <td>Добавлены следующие методы:<code> matches()</code> (реализовано как <code>mozMatchesSelector()</code>), <code>find()</code>, <code>findAll()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td>Добавлены следующиен методы: <code>querySelector()</code> и <code>querySelectorAll()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Добавлен метод <code>requestPointerLock()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Добавлен метод <code>requestFullscreen()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Добавлены следующие свойства: <code>innerHTML</code>, и <code>outerHTML</code>.<br> + Добавлен следующий метод: <code>insertAdjacentHTML()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Добавлены следующие свойства: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, и <code>clientHeight</code>.<br> + Добавлены следующие методы: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, и <code>scrollIntoView()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Добавлено наследование интерфейса {{domxref("ElementTraversal")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Удалены следующие методы: <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, и <code>setIdAttributeNode()</code>.<br> + Удалено свойство <code>schemaTypeInfo</code>.<br> + Измененно возращаемое значение <code>getElementsByTag()</code> и <code>getElementsByTagNS()</code>.<br> + Moved <code>hasAttributes()</code> form the <code>Node</code> interface to this one.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br> + Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Мнтод <code>normalize()</code> был перемещён в {{domxref("Node")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Начальное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div>{{Compat("api.Element")}}</div> + +<div id="compat-desktop"></div> diff --git a/files/ru/web/api/element/innerhtml/index.html b/files/ru/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..60af461354 --- /dev/null +++ b/files/ru/web/api/element/innerhtml/index.html @@ -0,0 +1,167 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +translation_of: Web/API/Element/innerHTML +--- +<div>{{APIRef("DOM")}}</div> + +<p>Свойство интерфейса {{domxref("Element")}} <strong><code>innerHTML</code></strong> устанавливает или получает HTML или XML разметку дочерних элементов.</p> + +<div class="note"><strong>Примечание: </strong>Если узлы {{HTMLElement("div")}}, {{HTMLElement("span")}}, или {{HTMLElement("noembed")}} имеют дочерние текстовые узлы, содержащие символы <code>(&), (<),</code> или <code>(>)</code>, <code>innerHTML</code> вернет эти символы как &amp, &lt и &gt соответсвенно. Используйте {{domxref("Node.textContent")}} для получения правильной копии содержимого этих текстовых узлов. </div> + +<p> Чтобы вставить HTML в документ, не меняя содержимое элемента, используйте {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js notranslate">const <var>content</var> = <var>element</var>.innerHTML; + +<var>element</var>.innerHTML = <var>htmlString</var>; +</pre> + +<h3 id="Value">Value</h3> + +<p>Строка {{domxref("DOMString")}}, которая содержит части HTML разметки. Установка значения <code>innerHTML</code> удаляет всё содержимое элемента и заменяет его на узлы, которые были разобраны как HTML, указанными в строке <var>htmlString.</var></p> + +<h3 id="Исключения">Исключения</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>Возникает при попытке установить значение <code>innerHTML</code> строкой, в которой содержится неправильно сформированный HTML.</dd> + <dt><code>NoModificationAllowedError</code></dt> + <dd>Возникает при попытке вставить HTML в узел, у которого родителем является {{domxref("Document")}}.</dd> +</dl> + +<h2 id="Примечания">Примечания</h2> + +<p>Это свойство предоставляет простой способ полностью заменить содержимое элемента. Например, все содержимое элемента body может быть удалено:</p> + +<pre class="brush: js notranslate">document.body.innerHTML = ""; // Заменяет содержимое тела пустой строкой.</pre> + +<p>Свойство innerHTML многих типов элементов, включая {{HTMLElement("body")}} или {{HTMLElement("html")}}, могут быть возвращены или перемещены. Это может так же быть использовано для просмотра кода страницы, которая была изменена динамически:</p> + +<pre class="brush: js notranslate">// Скопируйте и вставьте в адресную строку в виде одной строки. +javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>"; +</pre> + +<p>Это свойство было первоначально реализовано веб браузерами, затем описано WHATWG и W3C в HTML5. Старые реализации могут отличаться от новых. Для примера, когда введен текст в поле ввода <input>, IE меняет значение атрибута <input> свойства innerHTML, но браузеры Gecko не делают этого.</p> + +<h3 id="Соображения_безопасности">Соображения безопасности</h3> + +<p>Не редко можно увидеть использование InnerHTML для вставки текста в веб страницу. Это приводит к рискам безопасности.</p> + +<pre class="brush: js notranslate">const name = "John"; +// предполагая, что 'el' является HTML DOM элементом. +el.innerHTML = name; // безвредный в этом случае + +// ... + +name = "<script>alert('Я Джон в раздражающем alert!')</script>"; +el.innerHTML = name; // безвредный в этом случае</pre> + +<p>Хотя это может выглядеть как атака {{interwiki("wikipedia", "cross-site scripting")}}, результат безопасный. HTML5 указывает на тег {{HTMLElement("script")}} вставленный через InnerHTM <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">должен не выполнится.</a></p> + +<p>Однако, есть способы запустить JavaScript без использования элементов {{HTMLElement("script")}}, так что есть риск безопасности всякий раз, когда вы используете innerHTML для набора строк, над которыми у вас нет контроля. Например:</p> + +<pre class="brush: js notranslate">const name = "<img src='x' onerror='alert(1)'>"; +el.innerHTML = name; // показывает alert</pre> + +<p>По этой причине, рекомендуется не использовать innerHTML при вставке обычного текста; вместо этого, используйте {{domxref("node.textContent")}}. Это не интерпретирует отправленный контент как HTML, но вместо этого он вставляется как не обработанный текст. </p> + +<h2 id="Примеры">Примеры</h2> + +<p>Этот пример использует <code>innerHTML</code> для создания механизма логгирования сообщений внутри элемента на странице.</p> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">function log(msg) { + var logElem = document.querySelector(".log"); + + var time = new Date(); + var timeStr = time.toLocaleTimeString(); + logElem.innerHTML += timeStr + ": " + msg + "<br/>"; +} + +log("Регистрация событий мыши внутри этого контейнера...");</pre> + +<p>Функция <code>log()</code> создаёт сообщение получая текущее время из объекта {{jsxref("Date")}}, используя {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}, и соединяя стороку с временной меткой с текстовым сообщением. Затем сообщение добавляется в элемент с классом <code>"log"</code>.</p> + +<p>Мы добавляем второй метод, который логгирует информацию о событиях на основе {{domxref("MouseEvent")}} (например, {{event("mousedown")}}, {{event("click")}}, и {{event("mouseenter")}}):</p> + +<pre class="brush: js notranslate">function logEvent(event) { + var msg = "Event <strong>" + event.type + "</strong> at <em>" + + event.clientX + ", " + event.clientY + "</em>"; + log(msg); +}</pre> + +<p>Затем мы используем этот обработчик событий на элементе, который содержит наше логгирование, для каждого события мыши:</p> + +<pre class="brush: js notranslate">var boxElem = document.querySelector(".box"); + +boxElem.addEventListener("mousedown", logEvent); +boxElem.addEventListener("mouseup", logEvent); +boxElem.addEventListener("click", logEvent); +boxElem.addEventListener("mouseenter", logEvent); +boxElem.addEventListener("mouseleave", logEvent);</pre> + +<h3 id="HTML">HTML</h3> + +<p>HTML довольно простой для нашего примера.</p> + +<pre class="brush: html notranslate"><div class="box"> + <div><strong>Log:</strong></div> + <div class="log"></div> +</div></pre> + +<p>{{HTMLElement("div")}} c классом <code>"box"</code> – просто контейнер для, который даст содержимому пространство вокруг себя. <code><div></code> с классом <code>"log"</code> является контейнером для логгирования текста внутри себя.</p> + +<h3 id="CSS">CSS</h3> + +<p>Для нашего примера используем следующие CSS стили.</p> + +<pre class="brush: css notranslate">.box { + width: 600px; + height: 300px; + border: 1px solid black; + padding: 2px 4px; + overflow-y: scroll; + overflow-x: auto; +} + +.log { + margin-top: 8px; + font-family: monospace; +}</pre> + +<h3 id="Результат">Результат</h3> + +<p>В результате мы получаем такое содержимое. Вы можете видеть логи наводя мышь на элемент, кликая на него и так далее.</p> + +<p>{{EmbedLiveSample("Example", 640, 350)}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#widl-Element-innerHTML', 'Element.innerHTML')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Первоначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a class="external" href="http://innerdom.sourceforge.net/"><code>innerDOM</code></a> - Для тех, кто хочет придерживаться стандартов, вот один набор функций JavaScript, предлагающий сериализовать или разобрать XML так, чтобы установить содержимое элемента, определенное как строка(и) через DOM или получить содержимое элемента, полученное из DOM как строку.</li> + <li>{{domxref("Element.insertAdjacentHTML")}} - <span id="result_box" lang="ru"><span>Альтернатива для innerHTML, позволяющая добавлять новый HTML</span></span>.</li> + <li><a class="external" href="https://github.com/ndebeiss/jsxmlsaxparser">jssaxparser</a> - Более надежным (хотя и более тяжелым) решением, чем innerDOM (поддерживает парсинг с пространствами имен, однокавычками атрибутов, секциями CDATA и т.д.), является этот SAX2 парсер при использовании с его обработчиком DOM-контента. (Предлагает строку на DOM; DOM на строку <a href="https://app.assembla.com/spaces/brettz9/bize6mebSr3B31ab7jnrAJ/source/DOMToString">значительно проще</a>).</li> + <li>Эффективность соображений: <a class="external" href="http://www.quirksmode.org/dom/innerhtml.html">quirksmode.</a></li> +</ul> diff --git a/files/ru/web/api/element/insertadjacentelement/index.html b/files/ru/web/api/element/insertadjacentelement/index.html new file mode 100644 index 0000000000..a6f23f2aa1 --- /dev/null +++ b/files/ru/web/api/element/insertadjacentelement/index.html @@ -0,0 +1,129 @@ +--- +title: Element.insertAdjacentElement() +slug: Web/API/Element/insertAdjacentElement +tags: + - API + - DOM + - Element + - Gecko + - Method + - Reference + - insertAdjacentElement +translation_of: Web/API/Element/insertAdjacentElement +--- +<p>{{APIRef("DOM")}}</p> + +<p>Метод <strong><code>insertAdjacentElement()</code></strong> добавляет переданный элемент в DOM-дерево относительно элемента, вызвавшего метод.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre><em>targetElement</em>.insertAdjacentElement(<em>position</em>, <em>element</em>);</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt>position</dt> + <dd>{{domxref("DOMString")}} - определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру): + <ul> + <li><code style="color: red;">'beforebegin'</code>: до самого <code>element</code> (до открывающего тега).</li> + <li><code style="color: green;">'afterbegin'</code>: сразу после открывающего тега <code>element </code>(перед первым потомком).</li> + <li><code style="color: blue;">'beforeend'</code>: сразу перед закрывающим тегом <code>element</code> (после последнего потомка).</li> + <li><code style="color: magenta;">'afterend'</code>: после <code>element</code> (после закрывающего тега).</li> + </ul> + </dd> + <dt>element</dt> + <dd>Элемент, добавляемый в DOM-дерево.</dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>Метод возвращает добавляемый элемент, либо <code>null</code>, если добавление элемента завершилось ошибкой.</p> + +<h3 id="Исключения">Исключения</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Исключение</th> + <th scope="col">Пояснение</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>SyntaxError</code></td> + <td>Переданное значение <code>position</code> не соответствует ни одному из допустимых.</td> + </tr> + <tr> + <td><code>TypeError</code></td> + <td>Передаваемый <code>element</code> не является валидным.</td> + </tr> + </tbody> +</table> + +<h3 id="Наглядное_отображение_параметра_position">Наглядное отображение параметра position</h3> + +<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<code style="font-weight: bold;"><p></code> +<!-- <strong><code style="color: green;">afterbegin</code></strong> --> +foo +<!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<code style="font-weight: bold;"></p></code> +<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> + +<div class="note"><strong>Примечаение:</strong> значения <code>beforebegin</code> и <code>afterend</code> работают только если targetElement находится в DOM-дереве и имеет родительский элемент.</div> + +<h2 id="Example" name="Example">Примеры</h2> + +<pre class="brush: js">beforeBtn.addEventListener('click', function() { + var tempDiv = document.createElement('div'); + tempDiv.style.backgroundColor = randomColor(); + if (activeElem) { + activeElem.insertAdjacentElement('beforebegin',tempDiv); + } + setListener(tempDiv); +}); + +afterBtn.addEventListener('click', function() { + var tempDiv = document.createElement('div'); + tempDiv.style.backgroundColor = randomColor(); + if (activeElem) { + activeElem.insertAdjacentElement('afterend',tempDiv); + } + setListener(tempDiv); +});</pre> + +<p>Посмотрите наше демо <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html">insertAdjacentElement.html</a> на Github (так же посмотрите <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html">исходный код</a>). В этом демо мы имеем последовательность {{htmlelement("div")}} элементов внутри контейнера. При выборе одного из них можно нажать кнопку <em>Insert before</em> или <em>Insert after</em> и добавить новые div до или после выбранного элемента используя метод <code>insertAdjacentElement()</code>.</p> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2> + +<p>{{Compat("api.Element.insertAdjacentElement")}}</p> + +<div id="compat-desktop"></div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("Element.insertAdjacentHTML()")}}</li> + <li>{{domxref("Element.insertAdjacentText()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.appendChild()")}} (такой же эффект со значением position <code>beforeend</code>)</li> +</ul> diff --git a/files/ru/web/api/element/insertadjacenthtml/index.html b/files/ru/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..e2750b8f47 --- /dev/null +++ b/files/ru/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,88 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +translation_of: Web/API/Element/insertAdjacentHTML +--- +<div>{{ApiRef("DOM")}}</div> + +<p><strong><code>insertAdjacentHTML()</code></strong> разбирает указанный текст как HTML или XML и вставляет полученные узлы (nodes) в DOM дерево в указанную позицию. Данная функция не переписывает имеющиеся элементы, что предотвращает дополнительную сериализацию и поэтому работает быстрее, чем манипуляции с {{domxref("Element.innerHTML", "innerHTML")}}.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre><em>targetElement</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>position</code></dt> + <dd>{{domxref("DOMString")}} - определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру): + <ul> + <li><code style="color: red;">'beforebegin'</code>: до самого <code>element</code> (до открывающего тега).</li> + <li><code style="color: green;">'afterbegin'</code>: сразу после открывающего тега <code>element </code>(перед первым потомком).</li> + <li><code style="color: blue;">'beforeend'</code>: сразу перед закрывающим тегом <code>element</code> (после последнего потомка).</li> + <li><code style="color: magenta;">'afterend'</code>: после <code>element</code> (после закрывающего тега).</li> + </ul> + </dd> + <dt><code>text</code></dt> + <dd>Строка, которая будет проанализирована как HTML или XML и вставлена в DOM дерево документа.</dd> +</dl> + +<h3 id="Наглядное_отображение_параметра_position">Наглядное отображение параметра position</h3> + +<div class="wp_syntax"> +<div class="code"> +<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<strong><code><p></code></strong> +<!-- <strong><code style="color: green;">afterbegin</code></strong> --> +foo +<!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<strong><code></p></code></strong> +<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> +</div> +</div> + +<div class="note"><strong>Примечание:</strong> позиции <code>beforebegin</code> и <code>afterend</code> работают только если узел имеет родительский элемент.</div> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush: js">// <div id="one">one</div> +var d1 = document.getElementById('one'); +d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); + +// At this point, the new structure is: +// <div id="one">one</div><div id="two">two</div></pre> + +<h2 id="Примечания">Примечания</h2> + +<h3 id="Соображения_безопасности">Соображения безопасности</h3> + +<p>Будьте осторожны при использовании вставки HTML на страницу с помощью <code>insertAdjacentHTML()</code>, не используете пользовательский ввод, который не был экранирован.</p> + +<p>Не рекомендуется использовать <code>insertAdjacentHTML()</code>, когда требуется ввести простой текст. Используйте для этого свойство {{domxref("Node.textContent")}} или метод {{domxref("Element.insertAdjacentText()")}}. Они не будут интерпретировать текст как HTML, а вставят необработанный текст.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2> + +<p>{{Compat("api.Element.insertAdjacentHTML")}}</p> + +<h2 id="Specification" name="Specification"><span style="font-size: 2.33333rem; letter-spacing: -0.00278rem;">Смотрите также</span></h2> + +<p><a class="external" href="http://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.</a></p> diff --git a/files/ru/web/api/element/insertadjacenttext/index.html b/files/ru/web/api/element/insertadjacenttext/index.html new file mode 100644 index 0000000000..fa75df2851 --- /dev/null +++ b/files/ru/web/api/element/insertadjacenttext/index.html @@ -0,0 +1,118 @@ +--- +title: Element.insertAdjacentText() +slug: Web/API/Element/insertAdjacentText +translation_of: Web/API/Element/insertAdjacentText +--- +<p>{{APIRef("DOM")}}</p> + +<p>The <strong><code>insertAdjacentText()</code></strong> <span id="result_box" lang="ru"><span>метод помещает заданный текстовый узел в указанную позицию относительно элемента, который передан в вызове</span></span> метода.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre><em>element</em>.insertAdjacentText(<em>position</em>, <em>element</em>);</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>position</code></dt> + <dd>{{domxref("DOMString")}} позиция для вставки текста относительно элемента <code>element</code>; должна быть указана в следующем виде: + <ul> + <li><code style="color: red;">'beforebegin'</code>: Перед самим <code>element</code>.</li> + <li><code style="color: green;">'afterbegin'</code>: Внутри самого <code>element</code>, перед первым child.</li> + <li><code style="color: blue;">'beforeend'</code>: Внутри самого <code>element</code>, после последнего child.</li> + <li><code style="color: magenta;">'afterend'</code>: После самого <code>element</code>.</li> + </ul> + </dd> + <dt><code>element</code></dt> + <dd>{{domxref("DOMString")}} текст, который будет помещен в заданную позицию.</dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>Void.</p> + +<h3 id="Исключения">Исключения</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Exception</th> + <th scope="col">Explanation</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>SyntaxError</code></td> + <td>Указанная <code>position</code> не может быть распознана.</td> + </tr> + </tbody> +</table> + +<h3 id="Наглядное_отображение_параметра_position">Наглядное отображение параметра position</h3> + +<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<code style="font-weight: bold;"><p></code> +<!-- <strong><code style="color: green;">afterbegin</code></strong> --> +foo +<!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<code style="font-weight: bold;"></p></code> +<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> + +<div class="note"><strong>Примечание:</strong> значения <code>beforebegin</code> и <code>afterend</code> работают только если targetElement находится в DOM-дереве и имеет родительский элемент.</div> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush: js">beforeBtn.addEventListener('click', function() { + para.insertAdjacentText('afterbegin',textInput.value); +}); + +afterBtn.addEventListener('click', function() { + para.insertAdjacentText('beforeend',textInput.value); +});</pre> + +<p>Посмотрите пример <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html">insertAdjacentText.html</a> на GitHub (исходный код <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentText.html">source code</a>.) Вы можете ввести любой текст в поле формы, а затем нажать кнопки <em>Insert before</em> (вставить до) и <em>Insert after</em> (вставить после) для размещения этого текста до или после существующего абзаца, используя <code>insertAdjacentText()</code>. Обратите внимание, что существующий текстовой узел не изменился, а произошло добавление новых текстовых узлов.</p> + +<h2 id="Полифилл">Полифилл</h2> + +<p>Можно создать polyfill для insertAdjacentText<code>() method</code> который будет работать в Internet Explorer 5.5 (возможно и в более ранних версиях) и последующих версиях, с помощью данного кода:</p> + +<pre>if (!Element.prototype.insertAdjacentText) + Element.prototype.insertAdjacentText = function(type, txt){ + this.insertAdjacentHTML( + type, + (txt+'') // convert to string + .replace(/&/g, '&amp;') // embed ampersand symbols + .replace(/</g, '&lt;') // embed greater than symbols + ) + } +</pre> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2> + +<p>{{Compat("api.Element.insertAdjacentText")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("Element.insertAdjacentHTML()")}}</li> +</ul> diff --git a/files/ru/web/api/element/keydown_event/index.html b/files/ru/web/api/element/keydown_event/index.html new file mode 100644 index 0000000000..99dffec68a --- /dev/null +++ b/files/ru/web/api/element/keydown_event/index.html @@ -0,0 +1,91 @@ +--- +title: keydown +slug: Web/API/Element/keydown_event +translation_of: Web/API/Element/keydown_event +--- +<div>{{APIRef}}</div> + +<p>Событие <strong><code>keydown</code></strong> срабатывает, когда клавиша была нажата.</p> + +<p>В отличии от события {{Event("keypress")}}, событие keydown срабатывает на всех клавишах, независимо от того, есть ли у них значение.</p> + +<table class="properties"> + <thead> + </thead> + <tbody> + <tr> + <th>Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th>Cancelable</th> + <td>Yes</td> + </tr> + <tr> + <th>Interface</th> + <td>{{domxref("KeyboardEvent")}}</td> + </tr> + <tr> + <th>Event handler property</th> + <td>{{domxref("GlobalEventHandlers.onkeydown", "onkeydown")}}</td> + </tr> + </tbody> +</table> + +<p>События <code>keydown</code> и <code><a href="/en-US/docs/Web/API/Element/keyup_event">keyup</a></code> показывают то, что клавиша была нажата, в то время как <code>keypress</code> показывает то, какой символ был введён. Например, прописную "a" <code>keydown</code> и <code>keyup</code> сообщат как 65, а <code>keypress</code> сообщит как 97. Заглавную же "A" все события сообщают как 65.</p> + +<p>События клавиатуры генерируются только в <code><inputs></code>, <code><textarea></code> и любых элементах с аттрибутом <code>contentEditable</code> или <code>tabindex="-1"</code>.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Примеры_addEventListener_keydown">Примеры addEventListener keydown</h3> + +<p>Этот пример отображает значение <a href="https://developer.mozilla.org/ru/docs/Web/API/KeyboardEvent/code" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>KeyboardEvent.code</code></a> всякий раз, когда вы нажимаете клавишу внутри <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/input" title="Элемент HTML <input> используется для создания интерактивных элементов управления в веб-формах для принятия данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления."><code><input></code></a> элемента.</p> + +<pre class="brush: html"><input placeholder="Кликните здесь, затем нажмите клавишу." size="40"> +<p id="log"></p></pre> + +<pre class="brush: js">const input = document.querySelector('input'); +const log = document.getElementById('log'); + +input.addEventListener('keydown', logKey); + +function logKey(e) { + log.textContent += ` ${e.code}`; +}</pre> + +<p>{{EmbedLiveSample("addEventListener_keydown_example")}}</p> + +<h3 id="Аналог_onkeydown">Аналог onkeydown</h3> + +<pre class="brush: js">input.onkeydown = logKey;</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("UI Events", "#event-type-keydown")}}</td> + <td>{{Spec2("UI Events")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("api.Element.keydown_event")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></li> + <li><code><a href="/en-US/docs/Web/API/Element/keypress_event">keypress</a></code></li> + <li><code><a href="/en-US/docs/Web/API/Element/keyup_event">keyup</a></code></li> + <li><a href="/en-US/docs/Web/API/Document/keydown_event">Document <code>keydown</code> event</a></li> +</ul> diff --git a/files/ru/web/api/element/keyup_event/index.html b/files/ru/web/api/element/keyup_event/index.html new file mode 100644 index 0000000000..981fcbc7d5 --- /dev/null +++ b/files/ru/web/api/element/keyup_event/index.html @@ -0,0 +1,87 @@ +--- +title: keyup +slug: Web/API/Element/keyup_event +translation_of: Web/API/Element/keyup_event +--- +<div>{{APIRef}}</div> + +<p>Событие <strong><code>keyup</code></strong> срабатывает, когда клавиша была отпущена.</p> + +<table class="properties"> + <thead> + </thead> + <tbody> + <tr> + <th>Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th>Cancelable</th> + <td>Yes</td> + </tr> + <tr> + <th>Interface</th> + <td>{{domxref("KeyboardEvent")}}</td> + </tr> + <tr> + <th>Event handler property</th> + <td>{{domxref("GlobalEventHandlers.onkeyup", "onkeyup")}}</td> + </tr> + </tbody> +</table> + +<p>События <code><a href="/en-US/docs/Web/API/Element/keydown_event">keydown</a></code> и <code>keyup</code> показывают то, что клавиша была нажата, в то время как <code>keypress</code> показывает то, какой символ был введён. Например, прописную "a" <code>keydown</code> и <code>keyup</code> сообщат как 65, а <code>keypress</code> сообщит как 97. Заглавную же "A" все события сообщают как 65.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Примеры_addEventListener_keyup">Примеры addEventListener keyup</h3> + +<p>Этот пример отображает значение {{domxref("KeyboardEvent.code")}} всякий раз, когда вы отпускаете клавишу внутри {{HtmlElement("input")}} элемента.</p> + +<pre class="brush: html"><input placeholder="Кликните здесь, затем нажмите и отпустите клавишу." size="40"> +<p id="log"></p></pre> + +<pre class="brush: js">const input = document.querySelector('input'); +const log = document.getElementById('log'); + +input.addEventListener('keyup', logKey); + +function logKey(e) { + log.textContent += ` ${e.code}`; +}</pre> + +<p>{{EmbedLiveSample("addEventListener_keyup_example")}}</p> + +<h3 id="Аналог_onkeyup">Аналог onkeyup</h3> + +<pre class="brush: js">input.onkeyup = logKey;</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("UI Events", "#event-type-keyup")}}</td> + <td>{{Spec2("UI Events")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("api.Element.keyup_event")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></li> + <li><code><a href="/en-US/docs/Web/API/Element/keydown_event">keydown</a></code></li> + <li><code><a href="/en-US/docs/Web/API/Element/keypress_event">keypress</a></code></li> + <li><a href="/en-US/docs/Web/API/Document/keyup_event">Document <code>keyup</code> event</a></li> +</ul> diff --git a/files/ru/web/api/element/matches/index.html b/files/ru/web/api/element/matches/index.html new file mode 100644 index 0000000000..a8fe49cccb --- /dev/null +++ b/files/ru/web/api/element/matches/index.html @@ -0,0 +1,157 @@ +--- +title: Element.matches() +slug: Web/API/Element/matches +translation_of: Web/API/Element/matches +--- +<p>{{ APIRef("DOM") }}</p> + +<h2 id="Summary" name="Summary">Описание</h2> + +<p>Метод <strong><code>Element.matches()</code></strong> вернёт <code>true</code> или false, в зависимости от того, соответствует ли элемент указанному css-селектору.</p> + +<div class="warning"> +<p>В некоторых браузерах данный метод имеет нестандартное название - <code>matchesSelector()</code>.</p> +</div> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><em>var result</em> = <em>element</em>.matches(selectorString) +</pre> + +<ul> + <li><code>Результат выполнения - <strong>true</strong> или <strong>false</strong>.</code></li> + <li><strong><code>selectorString</code></strong> - строка, содержащая любой css-селектор, к примеру:<em> <strong>"div"</strong></em>,<em> <strong>"*"</strong></em>,<em> <strong>"#id"</strong></em> и прочие.</li> +</ul> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush: html"><div id="one">Первый подопытный</div> +<div class="someClass" id="two">Второй подопытный</div> + +<script type="text/javascript"> + + var coll = document.querySelectorAll("div"); + for (var i = 0, len = coll.length; i < len; i++) { + if (coll[i].matches(".someClass")) { + alert(coll[i].id+": Я выжил!"); + }else{ + coll[i].remove(); + } + } + +</script> +</pre> + +<p>Вызов alert сработает только для второго элемента div, которому присвоен класс "someClass".</p> + +<h2 id="Исключения">Исключения</h2> + +<dl> + <dt><code>SYNTAX_ERR</code></dt> + <dd>Указаный css-селектор не является допустимым<em> ("/=22=1", "&@*#", "%%''23" и т.п приведут к ошибке).</em></dd> +</dl> + +<h2 id="Полифилл">Полифилл</h2> + +<p>Полифил будет работать только в браузерах, поддерживающих метод document.queryselectorAll.</p> + +<pre class="brush: js">;(function(e) { + var matches = e.matches || e.matchesSelector || e.webkitMatchesSelector || e.mozMatchesSelector || e.msMatchesSelector || e.oMatchesSelector; + !matches ? (e.matches = e.matchesSelector = function matches(selector) { + var matches = document.querySelectorAll(selector); + var th = this; + return Array.prototype.some.call(matches, function(e) { + return e === th; + }); + }) : (e.matches = e.matchesSelector = matches); +})(Element.prototype);</pre> + +<h2 id="sect1"> </h2> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Особенность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Поддерживается , но имеет иное название</td> + <td> + <p>{{CompatVersionUnknown}} имеет название <code>webkitMatchesSelector</code></p> + </td> + <td>{{CompatGeckoDesktop("1.9.2")}} имеет название <code>mozMatchesSelector</code> [1]</td> + <td>9.0 имеет название <code>msMatchesSelector</code></td> + <td>11.5 имеет название <code>oMatchesSelector</code>,<br> + а с 15.0 - <code>webkitMatchesSelector</code></td> + <td>5.0 известен под названием <code>webkitMatchesSelector</code></td> + </tr> + <tr> + <td>Unprefix version</td> + <td>{{CompatChrome("34")}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Особенность</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Поддерживается , но имеет иное название</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.2")}} имеет название <code>mozMatchesSelector</code> [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Unprefix version</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<p> До появления Gecko 2.0 вызов с недопустимым селектором возвращал <code>false</code>, а не вызывал исключение...</p> diff --git a/files/ru/web/api/element/mousedown_event/index.html b/files/ru/web/api/element/mousedown_event/index.html new file mode 100644 index 0000000000..e11f5da566 --- /dev/null +++ b/files/ru/web/api/element/mousedown_event/index.html @@ -0,0 +1,147 @@ +--- +title: mousedown +slug: Web/API/Element/mousedown_event +translation_of: Web/API/Element/mousedown_event +--- +<p>Событие <code>mousedown</code> срабатывает, когда кнопка указывающего устройства (к примеру, мыши) нажата над элементом.</p> + +<h2 id="Общая_информация">Общая информация</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Всплывающее</dt> + <dd style="margin: 0 0 0 120px;">Да</dd> + <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt> + <dd style="margin: 0 0 0 120px;">Да</dd> + <dt style="float: left; text-align: right; width: 120px;">Цель</dt> + <dd style="margin: 0 0 0 120px;">Элемент</dd> + <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt> + <dd style="margin: 0 0 0 120px;">Различное: инициация перетаскивания, выделения текста, прокрутки или масштабирования (в сочетании с нажатием колеса при поддержке такового)</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>A count of consecutive clicks that happened in a short amount of time, incremented by one.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Связанные_события">Связанные события</h2> + +<ul> + <li>{{event("mousedown")}}</li> + <li>{{event("mouseup")}}</li> + <li>{{event("mousemove")}}</li> + <li>{{event("click")}}</li> + <li>{{event("dblclick")}}</li> + <li>{{event("mouseover")}}</li> + <li>{{event("mouseout")}}</li> + <li>{{event("mouseenter")}}</li> + <li>{{event("mouseleave")}}</li> + <li>{{event("contextmenu")}}</li> +</ul> diff --git a/files/ru/web/api/element/mouseenter_event/index.html b/files/ru/web/api/element/mouseenter_event/index.html new file mode 100644 index 0000000000..075e92ec64 --- /dev/null +++ b/files/ru/web/api/element/mouseenter_event/index.html @@ -0,0 +1,148 @@ +--- +title: 'Element: mouseenter event' +slug: Web/API/Element/mouseenter_event +translation_of: Web/API/Element/mouseenter_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary">Событие <strong><code>mouseenter</code></strong> вызывается в {{domxref("Element")}} </span><span class="tlid-translation translation" lang="ru"><span title="">когда указательное устройство (обычно мышь) изначально перемещается так, что его горячая точка находится в пределах элемента, в котором было запущено событие.</span></span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Всплывающее</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Отменяемое</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Интерфейс</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">Свойство обработчика события</th> + <td>{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Заметки_по_использованию">Заметки по использованию</h2> + +<p>Хотя <code>mouseenter</code> похоже на {{domxref("Element/mouseover_event", "mouseover")}}, <code>mouseenter</code> <span class="tlid-translation translation" lang="ru"><span title="">отличается тем, что он не является </span></span><a href="/ru/docs/Web/API/Event/bubbles">bubble</a> <span class="tlid-translation translation" lang="ru"><span title="">и не отправляется никаким потомкам, когда указатель перемещается из физического пространства одного из его потомков в его собственное физическое пространство.</span></span></p> + +<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;"> +<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5908/=mouseenter.png"></div> +<span class="tlid-translation translation" lang="ru"><span title="">Одно событие </span></span> <code>mouseenter</code> <span class="tlid-translation translation" lang="ru"><span title="">отправляется каждому элементу иерархии при их вводе.</span> <span title="">Здесь 4 события отправляются четырем элементам иерархии, когда указатель достигает текста.</span></span> + +<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div> +<span class="tlid-translation translation" lang="ru"><span title="">Одиночное событие наведения мыши</span></span> <code>mouseover</code> <span class="tlid-translation translation" lang="ru"><span title="">отправляется в самый глубокий элемент дерева DOM, затем оно всплывает в иерархии, пока не будет отменено обработчиком или не достигнет корня.</span></span></div> + +<p><span class="tlid-translation translation" lang="ru"><span title="">При наличии глубокой иерархии количество отправляемых </span></span>событий <code>mouseenter</code><span class="tlid-translation translation" lang="ru"><span title=""> может быть довольно большим и вызывать значительные проблемы с производительностью.</span> <span title="">В таких случаях лучше прослушивать события </span></span><code>mouseover</code>.</p> + +<p><span class="tlid-translation translation" lang="ru"><span title="">В сочетании с соответствующим событием</span></span> <code>mouseleave</code> (<span class="tlid-translation translation" lang="ru"><span title="">которое запускается в элементе, когда мышь покидает область содержимого</span></span>), событие <code>mouseenter</code> <span class="tlid-translation translation" lang="ru"><span title="">действует очень похоже на псевдокласс</span></span> CSS {{cssxref(':hover')}}.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>В документации по <a href="/en-US/docs/Web/Events/mouseover#Example"><code>mouseover</code></a> есть пример илюстрирующий различия между <code>mouseover</code> и <code>mouseenter</code>.</p> + +<h3 id="mouseenter">mouseenter</h3> + +<p><span class="tlid-translation translation" lang="ru"><span title="">В следующем тривиальном примере событие <code>mouseenter</code> используется для изменения границы элемента <code>div</code>, когда мышь входит в выделенное ему пространство.</span> <span title="">Затем он добавляет элемент в список с номером события <code>mouseenter</code> или <code>mouseleave</code>.</span></span></p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div id='mouseTarget'> + <ul id="unorderedList"> + <li>No events yet!</li> + </ul> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<p>Стилизация <code>div</code> чтобы сделать его более заметным.</p> + +<pre class="brush: css notranslate">#mouseTarget { + box-sizing: border-box; + width:15rem; + border:1px solid #333; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">var enterEventCount = 0; +var leaveEventCount = 0; +const mouseTarget = document.getElementById('mouseTarget'); +const unorderedList = document.getElementById('unorderedList'); + +mouseTarget.addEventListener('mouseenter', e => { + mouseTarget.style.border = '5px dotted orange'; + enterEventCount++; + addListItem('This is mouseenter event ' + enterEventCount + '.'); +}); + +mouseTarget.addEventListener('mouseleave', e => { + mouseTarget.style.border = '1px solid #333'; + leaveEventCount++; + addListItem('This is mouseleave event ' + leaveEventCount + '.'); +}); + +function addListItem(text) { + // <span class="tlid-translation translation" lang="ru"><span title="">Создать новый текстовый узел, используя предоставленный текст</span></span> + var newTextNode = document.createTextNode(text); + + // <span class="tlid-translation translation" lang="ru"><span title="">Создать новый элемент li</span></span> + var newListItem = document.createElement("li"); + + // Добавить текстовый узел к элементу li + newListItem.appendChild(newTextNode); + + // Добавить вновь созданный элемент списка в список + unorderedList.appendChild(newListItem); +}</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('mouseenter')}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("api.Element.mouseenter_event")}}</p> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li> + <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> + <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> + <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> + <li>{{domxref("Element/click_event", "click")}}</li> + <li>{{domxref("Element/dblclick_event", "dblclick")}}</li> + <li>{{domxref("Element/mouseover_event", "mouseover")}}</li> + <li>{{domxref("Element/mouseout_event", "mouseout")}}</li> + <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li> + <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li> + <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> +</ul> diff --git a/files/ru/web/api/element/mouseleave_event/index.html b/files/ru/web/api/element/mouseleave_event/index.html new file mode 100644 index 0000000000..3e0db2c600 --- /dev/null +++ b/files/ru/web/api/element/mouseleave_event/index.html @@ -0,0 +1,319 @@ +--- +title: mouseleave +slug: Web/API/Element/mouseleave_event +translation_of: Web/API/Element/mouseleave_event +--- +<div>{{APIRef}}</div> + +<p class="summary">Событие <code>mouseleave</code> срабатывает, когда курсор манипулятора (обычно мыши) перемещается за границы элемента.</p> + +<p><code>mouseleave</code> <code>и</code> {{event('mouseout')}} схожи, но отличаются тем, что <code>mouseleave</code> не всплывает, а <code>mouseout</code> всплывает.<br> + Это значит, что <code>mouseleave</code> срабатывает, когда курсор выходит за границы элемента <em>и</em> всех его дочерних элементов, в то время как <code>mouseout</code> срабатывает, когда курсор покидает границы элемента <em>или</em> одного из его дочерних элементов (даже если курсор все еще находится в пределах элемента).</p> + +<table class="standard" style="border: solid 1px;"> + <tbody> + <tr> + <td><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5910/=mouseleave.png"></td> + <td><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5911/=mouseout.png"></td> + </tr> + <tr> + <td>Одно <code>mouseleave</code> событие шлётся каждому элементу в иерархии в момент выхода курсора за их границы. Здесь 4 события рассылаются четырём элементам в иерархии когда курсор передвигается от текста к области за границей самого внешнего div элемента представленного на картинке.</td> + <td>Одно единственное <code>mouseout</code> событие шлётся самому глубоколежащему элементу в DOM дереве, затем оно поднимается вверх по иерархии пока не будет отменено обработчиком или не достигнет корня.</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Общая_информация">Общая информация</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Специф-ция</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="https://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt> + <dd style="margin: 0 0 0 120px;">{{domxref('MouseEvent')}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> + <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> + <dt style="float: left; text-align: right; width: 120px;">Цель</dt> + <dd style="margin: 0 0 0 120px;">{{cssxref('Element')}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Свойство</th> + <th scope="col">Тип</th> + <th scope="col">Описание</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Целевой элемент события (вышележащий элемент в DOM дереве).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Тип события.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td> + <p>Поднимается ли событие вверх как принято или нет</p> + </td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><code>Boolean</code></td> + <td>Является ли событие отменяемым или нет?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>{{domxref("WindowProxy")}}</td> + <td>{{domxref("document.defaultView")}} (<code>window</code> объекта document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Целевой узел (елемент), который используется слушателем события.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Для <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> и <code>mouseleave</code> событий: цель дополнительного события (<code>mouseleave</code> цель в случае наступления <code>mouseenter</code> события). <code>null</code> иначе.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>X координата указателя мыши в глобальных (относительно экрана) координатах.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>Y координата указателя мыши в глобальных (относительно экрана) координатах.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>X координата указателя мыши в локальных (относительно DOM содержимого) координатах.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>Y координата указателя мыши в локальных (относительно DOM содержимого) координатах.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>Всегда 0, так как нажатие любой кнопки не может произвести это событие (mouse movement does).</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons depressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are depressed, returns the logical sum of the values. E.g., if Left button and Right button are depressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Примеры">Примеры</h2> + +<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/Events/mouseout#Example"><code>mouseout</code> </a>documentation has an example illustrating the difference between <code>mouseout</code> and <code>mouseleave</code>.</p> + +<p>The following example illustrates how to use <code>mouseout</code>, to simulate the principle of event delegation for the mouseleave event.</p> + +<pre class="brush: html"><ul id="test"> + <li> + <ul class="leave-sensitive"> + <li>item 1-1</li> + <li>item 1-2</li> + </ul> + </li> + <li> + <ul class="leave-sensitive"> + <li>item 2-1</li> + <li>item 2-2</li> + </ul> + </li> +</ul> + +<script> + var delegationSelector = ".leave-sensitive"; + + document.getElementById("test").addEventListener("mouseout", function( event ) { + var target = event.target, + related = event.relatedTarget, + match; + + // search for a parent node matching the delegation selector + while ( target && target != document && !( match = matches( target, delegationSelector ) ) ) { + target = target.parentNode; + } + + // exit if no matching node has been found + if ( !match ) { return; } + + // loop through the parent of the related target to make sure that it's not a child of the target + while ( related && related != target && related != document ) { + related = related.parentNode; + } + + // exit if this is the case + if ( related == target ) { return; } + + // the "delegated mouseleave" handler can now be executed + // change the color of the text + target.style.color = "orange"; + // reset the color after a small amount of time + setTimeout(function() { + target.style.color = ""; + }, 500); + + + }, false); + + + // function used to check if a DOM element matches a given selector + // the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541 + function matches( elem, selector ){ + // the matchesSelector is prefixed in most (if not all) browsers + return elem.matchesSelector( selector ); + }; +</script></pre> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>30<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>10<sup>[2]</sup></td> + <td>5.5</td> + <td>{{CompatVersionUnknown}}<br> + {{CompatNo}} 15.0<br> + 17.0</td> + <td>7<sup>[3]</sup></td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("44.0")}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Реализовано в <a href="https://crbug.com/236215">bug 236215</a>.</p> + +<p>[2] Реализовано в {{bug("432698")}}.</p> + +<p>[3] Safari 7 генерирует данное событие во многих ситуациях где это не разрешено, тем самым делая целое событие бесполезным. Смотрите <a href="https://crbug.com/470258">bug 470258</a> for the description of the bug (это также присутствовало в старых версиях Chrome). Safari 8 имеет правильное поведение</p> + +<p>[4] Реализовано в {{bug("218093")}}.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{Event("mousedown")}}</li> + <li>{{Event("mouseup")}}</li> + <li>{{Event("mousemove")}}</li> + <li>{{Event("click")}}</li> + <li>{{Event("dblclick")}}</li> + <li>{{Event("mouseover")}}</li> + <li>{{Event("mouseout")}}</li> + <li>{{Event("mouseenter")}}</li> + <li>{{Event("mouseleave")}}</li> + <li>{{Event("contextmenu")}}</li> +</ul> diff --git a/files/ru/web/api/element/mouseup_event/index.html b/files/ru/web/api/element/mouseup_event/index.html new file mode 100644 index 0000000000..e3bd450c13 --- /dev/null +++ b/files/ru/web/api/element/mouseup_event/index.html @@ -0,0 +1,72 @@ +--- +title: 'Элемент: mouseup событие' +slug: Web/API/Element/mouseup_event +translation_of: Web/API/Element/mouseup_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary">Событие <strong><code>mouseup</code></strong> возникает на {{domxref("Element")}}, когда кнопка на апаратном манипуляторе курсора (на мыши или трекпаде) отпущена, в то время как указатель находится на элементе.</span> Событие mouseup является противоположным {{domxref("Element.mousedown_event", "mousedown")}} событию.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Отменяемое </th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Примеры">Примеры</h2> + +<p>{{page("/en-US/docs/Web/API/Element/mousemove_event", "Examples")}}</p> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + <tr> + <td>{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<p>{{Compat("api.Element.mouseup_event")}}</p> + +<h2 id="Смотрите_так_же">Смотрите так же</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li> + <li>{{Event("mousedown")}}</li> + <li>{{Event("mouseup")}}</li> + <li>{{Event("mousemove")}}</li> + <li>{{Event("click")}}</li> + <li>{{Event("dblclick")}}</li> + <li>{{Event("mouseover")}}</li> + <li>{{Event("mouseout")}}</li> + <li>{{Event("mouseenter")}}</li> + <li>{{Event("mouseleave")}}</li> + <li>{{Event("contextmenu")}}</li> +</ul> diff --git a/files/ru/web/api/element/outerhtml/index.html b/files/ru/web/api/element/outerhtml/index.html new file mode 100644 index 0000000000..525ac3573e --- /dev/null +++ b/files/ru/web/api/element/outerhtml/index.html @@ -0,0 +1,148 @@ +--- +title: Element.outerHTML +slug: Web/API/Element/outerHTML +tags: + - Парсинг + - Парсинг DOM + - Свойство + - Сериализация + - Ссылка +translation_of: Web/API/Element/outerHTML +--- +<p>{{APIRef("DOM")}}</p> + +<h2 id="Summary" name="Summary">Описание</h2> + +<p>Атрибут <code>outerHTML</code> DOM-интерфейса {{ domxref("element") }} получает сериализованный HTML-фрагмент, описывающий элемент, включая его потомков. Можно установить замену элемента узлами, полученными из заданной строки.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="eval"><em>var content</em> = <em>element</em>.outerHTML; +</pre> + +<p>На выводе, <code>content</code> содержит сериализованный HTML-фрагмент, описывающий <code>element</code> и его потомки.</p> + +<pre class="eval"><em>element</em>.outerHTML = content; +</pre> + +<p>Replaces the <code>element</code> with the nodes generated by parsing the string <code>content</code> with the parent of <code>element</code> as the context node for the fragment parsing algorithm.</p> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<p>Получение свойства <code>outerHTML</code> элемента:</p> + +<pre class="brush: js">// HTML: +// <div id="d"><p>Content</p><p>Further Elaborated</p></div> + +d = document.getElementById("d"); +console.log(d.outerHTML); + +// строка '<div id="d"><p>Content</p><p>Further Elaborated</p></div>' +// выведена в окно консоли +</pre> + +<p>Замена ветки с помощью изменения свойства <code>outerHTML</code>:</p> + +<pre class="brush: js">// HTML: +// <div id="container"><div id="d">Это div.</div></div> + +container = document.getElementById("container"); +d = document.getElementById("d"); +console.log(container.firstChild.nodeName); // логирует "DIV" + +d.outerHTML = "<p>Этот параграф заменил исходный div.</p>"; +console.log(container.firstChild.nodeName); // логирует "P" + +// div #d больше не часть дерева документа, +// новый параграф заменил его. +</pre> + +<h2 id="Примечания">Примечания</h2> + +<p>Если у элемента нет родительской ветки, которая не является корневой веткой документа, установка его свойства <code>outerHTML</code> выбросит исключение <code><a href="/en/DOM/DOMException" title="DOMException">DOMException</a></code> с кодом ошибки <code>NO_MODIFICATION_ALLOWED_ERR</code>. Например:</p> + +<pre class="brush: js">document.documentElement.outerHTML = "test"; // бросает DOMException +</pre> + +<p>Also, while the element will be replaced in the document, the variable whose <code>outerHTML</code> property was set will still hold a reference to the original element:</p> + +<pre class="brush: js">var p = document.getElementsByTagName("p")[0]; +console.log(p.nodeName); // показывает: "P" +p.outerHTML = "<div>Этот div заменил параграф.</div>"; +console.log(p.nodeName); // всё ещё "P"; +</pre> + +<h2 id="Specification" name="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatGeckoDesktop("11") }}</td> + <td>0.2</td> + <td>4.0</td> + <td>7</td> + <td>1.3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("11") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>MSDN: <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534310%28v=vs.85%29.aspx">outerHTML Property</a></li> +</ul> diff --git a/files/ru/web/api/element/queryselector/index.html b/files/ru/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..e06ee20537 --- /dev/null +++ b/files/ru/web/api/element/queryselector/index.html @@ -0,0 +1,136 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +<div>{{APIRef("DOM")}}</div> + +<p>Возвращает первый элемент, являющийся потомком элемента, на который применено правило указанной группы селекторов.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><var>element</var> = baseElement.querySelector(<em>selector</em>s); +</pre> + +<ul> + <li><code>element</code> и <code>baseElement</code> это {{domxref("element")}} объекты.</li> + <li><code>selectors</code> - это группа <a href="/ru-RU/docs/Web/Guide/CSS/Getting_Started/Selectors">селекторов</a> для поиска совпадения.</li> +</ul> + +<h2 id="Example" name="Example">Пример</h2> + +<p>Данный пример получает первый элемент style, который не имеет атрибута type или этот атрибут равен text/css, в теле (body) HTML документа:</p> + +<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])"); +</pre> + +<h2 id="Notes" name="Notes">Примечания</h2> + +<p>Возвращает null если совпадения не найдены, иначе первый найденный элемент.</p> + +<p>Генерирует исключение <code>SYNTAX_ERR</code> если указанная группа селекторов не корректна.</p> + +<p><code>querySelector()</code> был представлен в WebApps API.</p> + +<p>Строка аргументов передаваемая <code>querySelector()</code> должна удовлетворять синтаксису CSS. Более подробные примеры смотрите в {{domxref("document.querySelector")}}.</p> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll')}}</td> + <td>{{Spec2('Selectors API Level 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome(1) }}<br> + </td> + <td> + <p>{{ CompatGeckoDesktop(1.9.1) }}</p> + </td> + <td> + <p>9 [1]</p> + </td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>querySelector()</code> поддерживается в IE8, но только для CSS 2.1 селекторов.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("element.querySelectorAll()")}}</li> + <li>{{domxref("document.querySelector()")}}</li> + <li>{{domxref("document.querySelectorAll()")}}</li> + <li><a href="/ru-RU/docs/Code_snippets/QuerySelector">Фрагменты кода для querySelector</a></li> +</ul> diff --git a/files/ru/web/api/element/queryselectorall/index.html b/files/ru/web/api/element/queryselectorall/index.html new file mode 100644 index 0000000000..02ffad4f0e --- /dev/null +++ b/files/ru/web/api/element/queryselectorall/index.html @@ -0,0 +1,69 @@ +--- +title: Element.querySelectorAll() +slug: Web/API/Element/querySelectorAll +translation_of: Web/API/Element/querySelectorAll +--- +<h2 id="Summary" name="Summary">Общая информация</h2> + +<p>Возвращает список типа <a href="/ru/docs/Web/API/NodeList">NodeList</a>, состоящий из всех элементов, которые являются потомками для элемента, над которым была выполнена функция и удовлетворяющим условию выборки.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>); +</pre> + +<p>где</p> + +<ul> + <li><code>elementList —</code> результирующий список объектов типа <a href="/ru/docs/Web/API/Element">element</a> (результаты).</li> + <li><code>baseElement —</code> <a href="/ru/docs/Web/API/Element">элемент</a>, над которым выполняется функция.</li> + <li><code>selectors —</code> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">текст селектора</a> для выбора нужных элементов.</li> +</ul> + +<h2 id="Example" name="Example">Примеры</h2> + +<p>Этот пример возвращает список всех элементов с тегом p, которые находятся в теле документа:</p> + +<pre class="brush: js notranslate">var matches = document.body.querySelectorAll('p'); +</pre> + +<p>Этот пример возвращает список всех элементов с тегом p, которые находятся непосредственно в элементах-контейнерах с тегом div, имеющих класс 'highlighted', которые в свою очередь находятся внутри элемента с идентификатором 'test':</p> + +<pre class="brush:js notranslate">var el = document.querySelector('#test'); +var matches = el.querySelectorAll('div.highlighted > p'); +</pre> + +<p>Этот пример возвращает список всех элементов iframe, которые имеют атрибут "data-src":</p> + +<pre class="brush: js notranslate">var matches = el.querySelectorAll('iframe[data-src]'); +</pre> + +<h2 id="Notes" name="Notes">Заметки</h2> + +<p>Функция выбрасывает исключение SYNTAX_ERR, если текст селектора неправильный.</p> + +<p>querySelectorAll() был представлен как часть WebApps API.</p> + +<p>Строка указанная в качестве текста селектора, должна соответствовать синтаксису CSS.</p> + +<p>Помните, что возвращённый в качестве результата список <a href="/ru/docs/Web/API/NodeList">NodeList</a> не рекомендуется для использования в циклах (например, в for(...)) в качестве массива, т.к., это не массив в «традиционном» понятии Javascript, а объект типа <a href="/ru/docs/Web/API/NodeList">NodeList</a>, который, хоть и схож по свойствам с массивом, но не является таковым в полной мере (не поддерживает все методы, доступные массиву), так что будьте осторожны.</p> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div></div> + +<p>{{Compat("api.Element.querySelectorAll")}}</p> + +<h2 id="Specification" name="Specification">Ссылки на спецификации</h2> + +<ul> + <li><a href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li> +</ul> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelector" title="DOM/document.querySelector"><code>document.querySelector</code></a></li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Сниппеты для <code>querySelector</code></a></li> +</ul> diff --git a/files/ru/web/api/element/removeattribute/index.html b/files/ru/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..22bdfb22c2 --- /dev/null +++ b/files/ru/web/api/element/removeattribute/index.html @@ -0,0 +1,36 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +translation_of: Web/API/Element/removeAttribute +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code>removeAttribute</code> удаляет аттрибут с элемента.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="eval"><em>element</em>.removeAttribute(<em>attrName</em>); +</pre> + +<ul> + <li><code>attrName</code> строка, имя аттрибута который должен быть удален с <em>element</em>.</li> +</ul> + +<h2 id="Example" name="Example">Пример</h2> + +<pre>// <div id="div1" align="left" width="200px"> +document.getElementById("div1").removeAttribute("align"); +// now: <div id="div1" width="200px"> +</pre> + +<h2 id="Notes" name="Notes">Заметки</h2> + +<p>Вы должны использовать removeAttribute вместо того, чтобы устанавливать значение атрибута в null, используя <a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a>.</p> + +<p>Попытка удаления аттрибута, которого нет на элементе не вызывает ошибки.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">DOM Level 1 Core</a>)</p> diff --git a/files/ru/web/api/element/requestpointerlock/index.html b/files/ru/web/api/element/requestpointerlock/index.html new file mode 100644 index 0000000000..c85e4075b3 --- /dev/null +++ b/files/ru/web/api/element/requestpointerlock/index.html @@ -0,0 +1,90 @@ +--- +title: Element.requestPointerLock() +slug: Web/API/Element/requestPointerLock +translation_of: Web/API/Element/requestPointerLock +--- +<p>{{ APIRef("DOM") }}{{ seeCompatTable }}</p> + +<p>Метод <strong><code>Element.requestPointerLock()</code></strong> позволяет асинхронно запросить блокировку курсора для заданного элемента.</p> + +<p>Чтобы отследить успех или ошибку запроса, необходимо слушать события {{event("pointerlockchange")}} и {{event("pointerlockerror")}} на уровне {{domxref("Document")}}.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="eval"><em>instanceOfElement</em>.requestPointerLock(); +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('Pointer Lock','#element-interface','Element')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Extend the <code>Element</code> interface</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Особенность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatVersionUnknown() }} {{property_prefix("webkit")}}</td> + <td>{{ CompatVersionUnknown() }} {{property_prefix("moz")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Особенность</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ domxref("Document.pointerLockElement") }}</li> + <li>{{ domxref("Document.exitPointerLock()") }}</li> + <li><a href="/Web/API/Pointer_Lock_API">Pointer Lock</a></li> +</ul> diff --git a/files/ru/web/api/element/scrollheight/index.html b/files/ru/web/api/element/scrollheight/index.html new file mode 100644 index 0000000000..cc3e014192 --- /dev/null +++ b/files/ru/web/api/element/scrollheight/index.html @@ -0,0 +1,178 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +translation_of: Web/API/Element/scrollHeight +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Свойство <strong><code>Element.scrollHeight</code></strong> (только чтение) - измерение высоты контента в элементе, включая содержимое, невидимое из-за прокрутки. Значение <code>scrollHeight</code> равно минимальному <code>clientHeight</code>, которое потребуется элементу для того, чтобы поместить всё содержимое в видимую область (viewport), не используя вертикальную полосу прокрутки. Оно включает в себя padding элемента, но не его margin.</p> + +<div class="note"> +<p>Это свойство округляет значение до целого числа. Если вам нужно дробное значение, используйте {{ domxref("Element.getBoundingClientRect()") }}.</p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2> + +<pre class="eval notranslate">var <em>intElemScrollHeight</em> = document.getElementById(<em>id_attribute_value</em>).scrollHeight; +</pre> + +<p><em>intElemScrollHeight</em> - переменная, хранящая целое число, соответствующее пиксельному значению scrollHeight элемента. scrollHeight является свойством только для чтения.</p> + +<h2 id="Example" name="Example">Пример</h2> + +<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.</p> + +<p>Кот Василий ел картошку.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.</p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="">Left</strong> <strong style="">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div> + +<p><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p> + +<h2 id="Проблемы_и_решения">Проблемы и решения</h2> + +<h3 id="Определить_был_ли_элемент_полностью_прокручен.">Определить, был ли элемент полностью прокручен.</h3> + +<p>Следующее выражение возвращает <code>true</code>, если элемент был прокручен до конца, <code>false</code> если это не так.</p> + +<pre class="syntaxbox notranslate">element.scrollHeight - element.scrollTop === element.clientHeight</pre> + +<h2 id="scrollHeight_Demo" name="scrollHeight_Demo">Пример работы scrollHeight</h2> + +<p>Если объединить это выражение с событием <code><a href="/en-US/docs/DOM/element.onscroll" title="en-US/docs/DOM/element.onscroll">onscroll</a></code>, оно может быть использовано для того, чтобы определить, прочитал ли пользователь текст, или нет (см. также свойства <code><a href="/en-US/docs/DOM/element.scrollTop" title="en-US/docs/DOM/element.scrollTop">element.scrollTop</a></code> и <code><a href="/en-US/docs/DOM/element.clientHeight" title="en-US/docs/DOM/element.clientHeight">element.clientHeight</a></code>). Например:</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><form name="registration"> + <p> + <textarea id="rules"> +Регистрируясь на сайте любителей котиков я соглашаюсь со следующими условиями: +- покупать kitekat бездомным; +- делиться последним куском мяса; +- любить Firefox; +- вставлять в каждую вразу: "мурр", "мррр" и т.п.; +- в качестве документов предъявлять хвост и усы; +- заниматься разработкой; +- читать хабрахабр; +- смотреть "Tom and Jerry" и котопса; +- продать почку для поддержания здоровья кошек города; +- уметь ловить мышей; +- быть фанатом Матроскина; +- обожать молоко; +- уметь мурлыкать и рррычать; +- следовать жизненным принципам Леопольда; +- вставлять на MDN фразы про кошек для разнообразия и поддержания морального духа; +- загрузить в качестве аватарки фото с Простоквашино; +- другими словами, всегда любить и уважать кошек и ненавидеть собак. +Условия могут быть изменены в любое время, незнание не освобождает от ответственности. + </textarea> + </p> + <p> + <input type="checkbox" name="accept" id="agree" /> + <label for="agree">Я согласен</label> + <input type="submit" id="nextstep" value="Далее" /> + </p> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">#notice { + display: inline-block; + margin-bottom: 12px; + border-radius: 5px; + width: 600px; + padding: 5px; + border: 2px #7FDF55 solid; +} + +#rules { + width: 600px; + height: 130px; + padding: 5px; + border: #2A9F00 solid 2px; + border-radius: 5px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">function checkReading () { + if (checkReading.read) { + return; + } + checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight; + document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read; + checkReading.noticeBox.innerHTML = checkReading.read ? "Спасибо вам." : "Пожалуйста, прокрутите и прочитайте следующий текст."; +} + +onload = function () { + var oToBeRead = document.getElementById("rules"); + checkReading.noticeBox = document.createElement("span"); + document.registration.accept.checked = false; + checkReading.noticeBox.id = "notice"; + oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead); + oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead); + oToBeRead.onscroll = checkReading; + checkReading.call(oToBeRead); +}</pre> + +<p>{{ EmbedLiveSample('scrollHeight_Demo', '640', '400') }}</p> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Спецификация</th> + <th>Статус</th> + <th>Комментарий</th> + </tr> + <tr> + <td>{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Изначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Supported" name="Supported">Совместимость с браузерами</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Браузеры</th> + <th>Начальная версия</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td><strong>8.0</strong></td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td><strong>3.0</strong> (1.9)</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari | Chrome | WebKit</td> + <td><strong>4.0</strong> | <strong>4.0</strong> | ?</td> + </tr> + </tbody> +</table> + +<p><strong>В версиях Firefox до 21-й:</strong> когда контент элемента не создает вертикальную полосу прокрутки, его свойство <code style="font-size: 14px;">scrollHeight</code><span style="line-height: 1.5;"> равно значению </span><code style="font-size: 14px;">clientHeight</code><span style="line-height: 1.5;">. Это может означать либо то, что контента слишком мало, чтобы ему потребовалась полоса прокрутки, либо то, что у элемента значение CSS свойства overflow равно visible (в этом случае прокрутка отсутствует).</span></p> + +<h2 id="See_Also" name="See_Also">Смотрите также</h2> + +<ul> + <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Измерение размера и положения элемента с помощью CSSOM в Internet Explorer 9</a></li> + <li>{{domxref("Element.clientHeight")}}</li> + <li>{{domxref("HTMLElement.offsetHeight")}}</li> + <li><a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Определение размеров элементов</a></li> +</ul> diff --git a/files/ru/web/api/element/scrollintoview/index.html b/files/ru/web/api/element/scrollintoview/index.html new file mode 100644 index 0000000000..58bf29f51a --- /dev/null +++ b/files/ru/web/api/element/scrollintoview/index.html @@ -0,0 +1,112 @@ +--- +title: Element.scrollIntoView() +slug: Web/API/Element/scrollIntoView +translation_of: Web/API/Element/scrollIntoView +--- +<div>{{ APIRef("DOM")}}</div> + +<p>Метод <code><strong>Element.scrollIntoView()</strong></code> интерфейса {{domxref("Element")}} прокручивает текущий контейнер родителя элемента, так, чтобы этот элемент, на котором был вызван <code>scrollIntoView()</code> был видим пользователю.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">element.scrollIntoView(); // эквивалентно<code> element.scrollIntoView(true) +</code>element.scrollIntoView(<em>alignToTop</em>); // аргумент типа Boolean +element.scrollIntoView(<em>scrollIntoViewOptions</em>); // аргумент типа Object +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>alignToTop</code> {{optional_inline}}</dt> + <dd>Параметр типа {{jsxref("Boolean")}}, возможные значения: + <ul> + <li> <code>true</code>, верхняя граница элемента будет выровнена вверху видимой части окна прокручиваемой области. Соответствует <code>scrollIntoViewOptions: {block: "start", inline: "nearest"}</code>. Значение по умолчанию<strong>.</strong></li> + <li><code>false</code>, нижняя граница элемента будет выровнена внизу видимой части окна прокручиваемой области. Соответствует конфигурации <code>scrollIntoViewOptions: {block: "end", inline: "nearest"}</code></li> + </ul> + </dd> + <dt><code>scrollIntoViewOptions</code> {{optional_inline}} {{experimental_inline}}</dt> + <dd>Aргумент типа boolean или типа object со следующим набором опций:</dd> + <dt><code>behavior</code> {{optional_inline}}</dt> + <dd>Определяет анимацию скролла. Принимает значение <code>"auto"</code> или <code>"smooth"</code>. По умолчанию <code>"auto"</code>.</dd> + <dt><code>block</code> {{optional_inline}}</dt> + <dd>Вертикальное выравнивание.<br> + Одно из значений: <code>"start"</code>, <code>"center"</code>, <code>"end"</code> или <code>"nearest"</code>. По умолчанию <code>"center"</code>.</dd> + <dt><code>inline</code> {{optional_inline}}</dt> + <dd>Горизонтальное выравнивание.<br> + Одно из значений: <code>"start"</code>, <code>"center"</code>, <code>"end"</code> или <code>"nearest"</code>. По умолчанию <code>"nearest"</code>.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><button type="button" class="btn">Нажми на меня</button> + +<div class="big"></div> + +<div id="box" class="box">Скрытый элемент</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.big { + background: #ccc; + height: 300px; +} + +.btn { + font-size: 14px; +} + +.box { + background: lightgreen; + height: 40px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var hiddenElement = document.getElementById("box"); +var btn = document.querySelector('.btn'); + +function handleButtonClick() { + hiddenElement.scrollIntoView({block: "center", behavior: "smooth"}); +} + +btn.addEventListener('click', handleButtonClick); +</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('Пример')}}</p> + +<h2 id="Примечание">Примечание</h2> + +<p>Область может не полностью прокручивается до элемента (вверх или вниз), это зависит от расположения других элементов.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Initial Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> + +<p>{{Compat("api.Element.scrollIntoView")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("Element.scrollIntoViewIfNeeded()")}}<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"> </a>{{non-standard_inline}}</li> +</ul> diff --git a/files/ru/web/api/element/scrollleft/index.html b/files/ru/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..15af642a56 --- /dev/null +++ b/files/ru/web/api/element/scrollleft/index.html @@ -0,0 +1,79 @@ +--- +title: Элемент.scrollLeft +slug: Web/API/Element/scrollLeft +translation_of: Web/API/Element/scrollLeft +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Свойство <strong><code>scrollLeft</code></strong> получает или устанавливает количество пикселей, на которое контент элемента прокручен влево.</p> + +<p>Заметьте, что если свойство {{cssxref("direction")}}: <code>rtl</code> (right-to-left), то <code>scrollLeft</code> равен <code>0, </code>когда скроллбар на его самой правой позиции (с начала прокрученного контента), а затем становится отрицательным по мере прокрутки к концу контента.</p> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2> + +<pre class="eval">// Получаем количество прокрученных пикселей +var <var>sLeft</var> = <var>element</var>.scrollLeft; +</pre> + +<p><var>sLeft</var> - целое число, представленное количеством пикселей, на которые элемент был прокручен влево.</p> + +<pre class="eval">// Устанавливаем количество прокрученных пикселей +<var>element</var>.scrollLeft = 10; +</pre> + +<p><code>scrollLeft</code> может быть установлен, как любое целое число, однако:</p> + +<ul> + <li>Если элемент не может быть прокручен (т.е. у него нет переполнения), <code>scrollLeft</code> устанавливается в 0.</li> + <li>Если установили значение меньше 0 (больше 0 при располежении элементов справа налево), <code>scrollLeft</code> устанавливается в 0.</li> + <li>Если установлено значение больше, чем максимум прокручиваемого контента, <code>scrollLeft</code> устанавливается в максимум.</li> +</ul> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + #container { + border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px; + } + #content { + background-color: #ccc; width: 250px; + } + </style> + <script> + document.addEventListener('DOMContentLoaded', function () { + var button = document.getElementById('slide'); + button.onclick = function () { + document.getElementById('container').scrollLeft += 20; + }; + }, false); + </script> +</head> +<body> + <div id="container"> + <div id="content">Бла-бла-бла</div> + </div> + <button id="slide" type="button">Пролистать</button> +</body> +</html> +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификации</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/ru/web/api/element/scrollto/index.html b/files/ru/web/api/element/scrollto/index.html new file mode 100644 index 0000000000..c6f78187e4 --- /dev/null +++ b/files/ru/web/api/element/scrollto/index.html @@ -0,0 +1,72 @@ +--- +title: Element.scrollTo() +slug: Web/API/Element/scrollTo +translation_of: Web/API/Element/scrollTo +--- +<div>{{ APIRef }}</div> + +<p><code><strong>scrollTo()</strong></code> метод интерфейса {{domxref("Element")}}, осуществляет прокрутку по заданному набору координат внутри данного элемента. </p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">element.scrollTo(<em>x-coord</em>, <em>y-coord</em>) +element.scrollTo(<em>options</em>) +</pre> + +<h3 id="Parameters" name="Parameters">Параметры</h3> + +<ul> + <li><code>x-coord</code> координаты пикселя по горизонтальной оси элемента, который необходимо отобразить вверху слева.</li> + <li><code>y-coord</code> координаты пикселя по вертикальной оси элемента, который необходимо отобразить вверху слева.</li> +</ul> + +<p>- or -</p> + +<ul> + <li><code>options</code> как объект {{domxref("ScrollToOptions")}}, с тремя свойствами.</li> +</ul> + +<h2 id="Example" name="Example">Примеры</h2> + +<pre class="brush:js">element.scrollTo(0, 1000); +</pre> + +<p>С помощью <code>options</code>:</p> + +<pre class="brush: js">element.scrollTo({ + top: 100, + left: 100, + behavior: 'smooth' +});</pre> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите сделать вклад, пожалуйста зайдите на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пул реквест. </div> + +<p>{{Compat("api.Element.scrollTo")}}</p> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>{{domxref("Element.scrollTop")}}, {{domxref("Element.scrollLeft")}}</li> + <li>{{domxref("Window.scrollTo()")}}</li> +</ul> diff --git a/files/ru/web/api/element/scrolltop/index.html b/files/ru/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..fa6cbf77de --- /dev/null +++ b/files/ru/web/api/element/scrolltop/index.html @@ -0,0 +1,73 @@ +--- +title: Элемент.scrollTop +slug: Web/API/Element/scrollTop +translation_of: Web/API/Element/scrollTop +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code>Свойство<strong> scrollTop</strong></code> считывает или устанавливает количество пикселей, прокрученных от верха элемента. <code>scrollTop</code> измеряет дистанцию от верха элемента до верхней точки видимого контента. Когда контент элемента не создаёт вертикальную прокрутку, его <code>scrollTop</code> равно <code>0</code>.</p> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2> + +<pre class="eval">//Получаем количество прокрученных пикселей +var <var> intElemScrollTop</var> = someElement.scrollTop; +</pre> + +<p><var>После выполнения этого кода, </var><code><var>intElemScrollTop</var></code> - целое число пикселей, на которое контент {{domxref("element")}} был прокручен от верха.</p> + +<pre class="eval">// Устанавлием количество прокрученных пикселей +<var>element</var>.scrollTop = <var>intValue</var>; +</pre> + +<p><code>scrollTop</code> может быть любым целым числом, с определенными оговорками:</p> + +<ul> + <li>Если элемент не может быть прокручен (т.е. у него нет переполнения или если элемент <strong>не прокручиваем</strong>), <code>scrollTop</code> устанавливается в <code>0</code>.</li> + <li>Если значение меньше <code>0</code>, <code>scrollTop</code> устанавливается в <code>0</code>.</li> + <li>Если установлено значение больше, чем максимум прокручиваемого контента, <code>scrollTop</code> устанавливается в максимум.</li> +</ul> + +<h2 id="Example" name="Example">Пример</h2> + +<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.</p> + +<p>Кот Василий ел картошку.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.</p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div> + +<p><img alt="Image:scrollTop.png" class="internal" src="/@api/deki/files/842/=ScrollTop.png"></p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("api.Element.scrollTop")}}</p> + +<h2 id="Ссылки">Ссылки</h2> + +<ul> + <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop">W3C Draft CSSOM View Module</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx">MSDN's scrollTop definition</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx">MSDN's Measuring Element Dimension and Location</a></li> +</ul> diff --git a/files/ru/web/api/element/setattribute/index.html b/files/ru/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..0d61d3834e --- /dev/null +++ b/files/ru/web/api/element/setattribute/index.html @@ -0,0 +1,54 @@ +--- +title: Element.setAttribute() +slug: Web/API/Element/setAttribute +translation_of: Web/API/Element/setAttribute +--- +<div>{{APIRef("DOM")}}</div> + +<div>Добавляет новый атрибут или изменяет значение существующего атрибута у выбранного элемента.</div> + +<div></div> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><em>element</em>.setAttribute(<em>name</em>, <em>value</em>); +</pre> + +<ul> + <li><code>name</code> - имя атрибута (строка).</li> + <li><code>value</code> - значение атрибута.</li> +</ul> + +<h2 id="Пример" name="Пример">Пример</h2> + +<p>В следующем примере, <code>setAttribute()</code> используется, чтобы установить атрибут {{htmlattrxref("disabled")}} кнопки {{htmlelement("button")}}, делая её отключенной.</p> + +<pre class="brush: html notranslate"><button>Hello World</button></pre> + +<pre class="brush:js notranslate">var b = document.querySelector("button"); + +b.setAttribute("disabled", "disabled"); +</pre> + +<p>{{ EmbedLiveSample('Пример', '300', '50', '', 'Web/API/Element/setAttribute') }}</p> + +<h2 id="Notes" name="Notes">Примечания</h2> + +<p>При вызове на элементе внутри HTML документа, setAttribute переведет имя атрибута в нижний регистр.</p> + +<p>Если указанный атрибут уже существует, его значение изменится на новое. Если атрибута ранее не существовало, он будет создан.</p> + +<p>Несмотря на то, что метод <code style="font-style: normal;"><a href="/ru/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute()</a></code> возвращает null у удаленных атрибутов, вы должны использовать <a href="/ru/docs/DOM/element.removeAttribute" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;" title="DOM/element.removeAttribute">removeAttribute()</a> вместо <em>elt</em><span style="font-family: consolas,monaco,andale mono,monospace;">.setAttribute(</span><em>attr</em><span style="font-family: consolas,monaco,andale mono,monospace;">, null)</span>, чтобы удалить атрибут. Последний заставит значение <code>null</code> быть строкой <code>"null"</code>, <span class="short_text" id="result_box" lang="ru"><span>которая, вероятно,</span> <span>не то, что</span> <span>вы хотите</span><span>.</span></span></p> + +<p>Использование setAttribute() для изменения определенных атрибутов особенно значимо в XUL, так как работает непоследовательно, а атрибут определяет значение по умолчанию. Для того, чтобы получить или изменить текущие значения, вы должны использовать свойства. Например, elt.value вместо elt.setAttribure('value', val).</p> + +<p>Чтобы установить атрибут, которому значение не нужно, такой как, например, атрибут <code>autoplay</code> элемента {{HTMLElement("audio")}}, используйте null или пустое значение. Например: <code><em>elt</em>.setAttribute('autoplay', '')</code></p> + +<div>{{DOMAttributeMethods}}</div> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (представлено в <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li> +</ul> diff --git a/files/ru/web/api/element/slot/index.html b/files/ru/web/api/element/slot/index.html new file mode 100644 index 0000000000..0317b63cc2 --- /dev/null +++ b/files/ru/web/api/element/slot/index.html @@ -0,0 +1,67 @@ +--- +title: Element.slot +slug: Web/API/Element/slot +tags: + - API + - DOM + - Element + - Property + - Reference + - shadow dom +translation_of: Web/API/Element/slot +--- +<p>{{APIRef("Shadow DOM")}}</p> + +<p>Свойство <strong><code>slot</code></strong> интерфейса {{domxref("Element")}} возращает имя слота теневого DOM, в который вставлен элемент.</p> + +<p>Слот slot это заполнитель внутри <a href="/en-US/docs/Web/Web_Components">веб компонента</a>, который пользователи могут заполнить собственной разметкой (смотри <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Использование шаблонов и слотов</a> для получения дополнительной информации).</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <em>aString</em> = <em>element</em>.slot +<em>element</em>.slot = <em>aString</em> +</pre> + +<h3 id="Значение">Значение</h3> + +<p>{{domxref("DOMString")}}.</p> + +<h2 id="Example" name="Example">Примеры</h2> + +<p>В нашем <a href="https://github.com/mdn/web-components-examples/tree/master/simple-template">примере простого шаблона</a> (<a href="https://mdn.github.io/web-components-examples/simple-template/">смотри в прямом эфире</a>), мы создаем тривиальный пример пользовательского элемента с именем <code><my-paragraph></code>, в котором прикрепляется теневой корень, а затем заполняется с использованием содержимого шаблона, содержащего слот с именем <code>my-text</code>.</p> + +<p>Когда в документе используется <code><my-paragraph></code>, слот заполняется слот-элементом, включая его в элемент с атрибутом <code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code> со значением <code>my-text</code>. Вот один из таких примеров:</p> + +<pre class="brush: html"><my-paragraph> + <span slot="my-text">Let's have some different text!</span> +</my-paragraph></pre> + +<p>В нашем JavaScript файле мы получаем ссылку {{htmlelement("span")}}, показанную выше, а затем регестрием ссылку на имя соответствующего элемента <code><slot></code>.</p> + +<pre class="brush: js">let slottedSpan = document.querySelector('my-paragraph span') +console.log(slottedSpan.slot); // logs <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">'my-text'</span></span></span></span></pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-element-slot','slot')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div> +<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div> + +<p>{{Compat("api.Element.slot")}}</p> +</div> diff --git a/files/ru/web/api/element/tagname/index.html b/files/ru/web/api/element/tagname/index.html new file mode 100644 index 0000000000..dcc8395756 --- /dev/null +++ b/files/ru/web/api/element/tagname/index.html @@ -0,0 +1,47 @@ +--- +title: Element.tagName +slug: Web/API/Element/tagName +translation_of: Web/API/Element/tagName +--- +<p>{{ ApiRef("DOM") }}</p> + +<h2 id="Описание">Описание</h2> + +<p>Возвращает HTML-тег элемента <em>("div", "p", "a" и т.д).</em></p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="eval"><em>var elementName</em> = element.tagName; +</pre> + +<ul> + <li><strong><code>elementName</code></strong> это строка, содержащая название HTML-тега элемента<code><strong> element.</strong></code></li> +</ul> + +<div class="warning"> +<p>В XML (и XML-подобных языках) возвращаемое значение будет в нижнем регистре, а в HTML - в верхнем.</p> +</div> + +<div class="note"> +<p>Существует более древнее и обыденное свойство <a href="/en/DOM/Node.nodeName" title="En/DOM/Node.nodeName">nodeName</a>!</p> +</div> + +<h2 id="Example" name="Example">Пример</h2> + +<p>Предположим, есть на странице элемент с id <strong>"born"</strong>:</p> + +<pre class="eval"><span id="born">Я родился...</span> +</pre> + +<p>Давайте узнаем его HTML-тег:</p> + +<pre class="brush: js">var span = document.getElementById("born"); +alert(span.tagName); //"SPAN" +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815">DOM Level 2 Core: tagName</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> +</ul> |