diff options
Diffstat (limited to 'files/ru/web/api/document_object_model/introduction/index.html')
| -rw-r--r-- | files/ru/web/api/document_object_model/introduction/index.html | 16 |
1 files changed, 8 insertions, 8 deletions
diff --git a/files/ru/web/api/document_object_model/introduction/index.html b/files/ru/web/api/document_object_model/introduction/index.html index 9fa1a55cbc..e906032520 100644 --- a/files/ru/web/api/document_object_model/introduction/index.html +++ b/files/ru/web/api/document_object_model/introduction/index.html @@ -13,11 +13,11 @@ original_slug: DOM/DOM_Reference/Введение <p>Объектная Модель Документа (DOM) – это программный интерфейс (API) для HTML и XML документов. DOM предоставляет структурированное представление документа и определяет то, как эта структура может быть доступна из программ, которые могут изменять содержимое, стиль и структуру документа. Представление DOM состоит из структурированной группы узлов и объектов, которые имеют свойства и методы. По существу, DOM соединяет веб-страницу с языками описания сценариев либо языками программирования.<br> <br> - Веб-страница – это документ. Документ может быть представлен как в окне браузера, так и в самом HTML-коде. В любом случае, это один и тот же документ. DOM предоставляет другой способ представления, хранения и управления этого документа. DOM полностью поддерживает объектно-ориентированнное представление веб-страницы, делая возможным её изменение при помощи языка описания сценариев наподобие JavaScript.<br> + Веб-страница – это документ. Документ может быть представлен как в окне браузера, так и в самом HTML-коде. В любом случае, это один и тот же документ. DOM предоставляет другой способ представления, хранения и управления этого документа. DOM полностью поддерживает объектно-ориентированное представление веб-страницы, делая возможным её изменение при помощи языка описания сценариев наподобие JavaScript.<br> <br> Стандарты <a class="external external-icon" href="http://www.w3.org/DOM/">W3C DOM</a> и <a class="external external-icon" href="https://dom.spec.whatwg.org/">WHATWG DOM </a>формируют основы DOM, реализованные в большинстве современных браузеров. Многие браузеры предлагают расширения за пределами данного стандарта, поэтому необходимо проверять работоспособность тех или иных возможностей DOM для каждого конкретного браузера.</p> -<p>Например: стандарт DOM описывает, что метод <code>getElementsByTagName </code>в коде, указанном ниже, должен возращать список всех элементов <p> в документе.</p> +<p>Например: стандарт DOM описывает, что метод <code>getElementsByTagName </code>в коде, указанном ниже, должен возвращать список всех элементов <p> в документе.</p> <pre class="brush: js language-js" style="font-size: 14px;"><code class="language-js">paragraphs <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName<span class="punctuation token">(</span></span><span class="string token">"P"</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token"> // paragraphs[0] это первый <p> элемент @@ -47,9 +47,9 @@ p_list = doc.getElementsByTagName("para");</code></pre> <h2 id="Каким_образом_доступен_DOM">Каким образом доступен DOM? </h2> -<p>Вы не должны делать ничего особенного для работы с DOM. Различные браузеры имеют различную реализацию DOM, эти реализации показывают различную степень соответсвия с действительным стандартом DOM (это тема, которую мы пытались не затрагивать в данной документации), но каждый браузер использует свой DOM, чтобы сделать веб страницы доступными для взаимодествия с языками сценариев.</p> +<p>Вы не должны делать ничего особенного для работы с DOM. Различные браузеры имеют различную реализацию DOM, эти реализации показывают различную степень соответствия с действительным стандартом DOM (это тема, которую мы пытались не затрагивать в данной документации), но каждый браузер использует свой DOM, чтобы сделать веб страницы доступными для взаимодействия с языками сценариев.</p> -<p>При создании сценария с использованием элемента <script>, либо включая в веб страницу инструкцию для загрузки скрипта, вы можете немедленно приступить к использованию программного интерфейса (API), используя элементы <code><a href="https://developer.mozilla.org/en-US/docs/DOM/document">document</a> </code>или <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window">window</a></code> для взаимодействия с самим документом, либо для получения потомков этого документа, т.е. различных элементов на странице. Ваше программирование DOM может быть чем-то простым, например, вывод сообщения с использованием функции <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window.alert">alert()</a></code> объекта <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window">window</a></code>, или использовать более сложные методы DOM, которые создают новое содержимое, как показанно в следующем примере:</p> +<p>При создании сценария с использованием элемента <script>, либо включая в веб страницу инструкцию для загрузки скрипта, вы можете немедленно приступить к использованию программного интерфейса (API), используя элементы <code><a href="https://developer.mozilla.org/en-US/docs/DOM/document">document</a> </code>или <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window">window</a></code> для взаимодействия с самим документом, либо для получения потомков этого документа, т.е. различных элементов на странице. Ваше программирование DOM может быть чем-то простым, например, вывод сообщения с использованием функции <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window.alert">alert()</a></code> объекта <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window">window</a></code>, или использовать более сложные методы DOM, которые создают новое содержимое, как показано в следующем примере:</p> <pre class="language-html"><body onload="window.alert('добро пожаловать на мою домашнюю страницу!');"> </pre> @@ -84,7 +84,7 @@ p_list = doc.getElementsByTagName("para");</code></pre> <tbody> <tr> <td>document</td> - <td>Когда член возвращает объект типа document (например, свойство элемента ownerDocument возвращает документ к которому он относится), этот обьект document является собственным корневым обьектом. В DOM document Reference разделе описан объект document.<br> + <td>Когда член возвращает объект типа document (например, свойство элемента ownerDocument возвращает документ к которому он относится), этот объект document является собственным корневым объектом. В DOM document Reference разделе описан объект document.<br> element </td> </tr> <tr> @@ -111,7 +111,7 @@ p_list = doc.getElementsByTagName("para");</code></pre> </tr> <tr> <td>namedNodeMap</td> - <td>namedNodeMap подобна массиву, но элементы доступны по имени или индексу. Доступ по индексу - это лишь для удобства перечисления, т.к. элементы не имеют определенног порядка в списке. Этот тип данных имеет метод item() для этих целей и вы можете также добавлять и удалять элементы из namedNodeMap</td> + <td>namedNodeMap подобна массиву, но элементы доступны по имени или индексу. Доступ по индексу - это лишь для удобства перечисления, т.к. элементы не имеют определенного порядка в списке. Этот тип данных имеет метод item() для этих целей и вы можете также добавлять и удалять элементы из namedNodeMap</td> </tr> </tbody> </table> @@ -148,7 +148,7 @@ table.summary = "note: increased border";</pre> <p><code>Document, window</code> - это объекты, чьи интерфейсы вы, как правило, очень часто используете в программировании DOM. Говоря простыми словами, объект <code>window</code> представляет что-то вроде браузера, а объект <code>document</code> - корень самого документа. <code>Element</code> наследуется от общего интерфейса <code>Node</code>, и эти интерфейсы вместе предоставляют много методов и свойств, которые можно применять у отдельных элементов. Эти элементы также могут иметь отдельные интерфейсы для работы с типами данных, которые эти элементы содержат, как в примере с объектом <code>table</code> в предыдущем случае.</p> -<p>Ниже представлен краткий список распространненых членов API, используемых в программировании веб- и XML-страниц с использованием DOM:</p> +<p>Ниже представлен краткий список распространенных членов API, используемых в программировании веб- и XML-страниц с использованием DOM:</p> <ul> <li><code><a href="/ru/docs/Web/API/Document/getElementById">document.getElementById</a>(id)</code></li> @@ -172,7 +172,7 @@ table.summary = "note: increased border";</pre> <p>Есть случаи, однако, где примеры более лаконичные. Чтобы запустить примеры, которые лишь демонстрируют основы взаимодействия интерфейсов с HTML-элементами, вы можете подготовить тестовую страницу, в которую будете помещать функции внутрь скриптов. Следующая очень простая веб-страница содержит элемент <code><script></code> в заголовке, в который вы можете поместить функции, чтобы протестировать интерфейс. Страница содержит несколько элементов с атрибутами, которые можно возвращать, устанавливать или, другими словами, манипулировать и содержит пользовательский интерфейс, необходимый, чтобы вызывать нужные функции из браузера.</p> -<p>Вы можете использовать эту тестовую страницу или похожую для проверки интерфейсов DOM, которые вас интересуют и просмотра того, как они работают в браузерах. Вы можете обновить содержмое функции <code>test()</code> при необходимости, создать больше кнопок или добавить элементы при необходимости.</p> +<p>Вы можете использовать эту тестовую страницу или похожую для проверки интерфейсов DOM, которые вас интересуют и просмотра того, как они работают в браузерах. Вы можете обновить содержимое функции <code>test()</code> при необходимости, создать больше кнопок или добавить элементы при необходимости.</p> <pre><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> |