path: root/files/ru/dom/dom_reference/examples/index.html

---
title: Examples of web and XML development using the DOM
slug: DOM/DOM_Reference/Examples
translation_of: Web/API/Document_Object_Model/Examples
---
<p>В этой главе представлены более длинные примеры разработки веб-сайтов и XML с использованием DOM. По возможности, примеры используют общие API, трюки и шаблоны в JavaScript для управления объектом документа.</p>

<h2 id="Example_1_height_and_width" name="Example_1:_height_and_width">Пример 1: высота и ширина</h2>

<p>В следующем примере показано использование свойств высоты и ширины для изображений разных размеров:<br>
  </p>

<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;width/height example&lt;/title&gt;
&lt;script&gt;
function init() {
  var arrImages = new Array(3);

  arrImages[0] = document.getElementById("image1");
  arrImages[1] = document.getElementById("image2");
  arrImages[2] = document.getElementById("image3");

  var objOutput = document.getElementById("output");
  var strHtml = "&lt;ul&gt;";

  for (var i = 0; i &lt; arrImages.length; i++) {
    strHtml += "&lt;li&gt;image" + (i+1) +
            ": height=" + arrImages[i].height +
            ", width=" + arrImages[i].width +
            ", style.height=" + arrImages[i].style.height +
            ", style.width=" + arrImages[i].style.width +
            "&lt;\/li&gt;";
  }

  strHtml += "&lt;\/ul&gt;";

  objOutput.innerHTML = strHtml;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="init();"&gt;

&lt;p&gt;Image 1: no height, width, or style
  &lt;img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"&gt;
&lt;/p&gt;

&lt;p&gt;Image 2: height="50", width="500", but no style
  &lt;img id="image2"
       src="http://www.mozilla.org/images/mozilla-banner.gif"
       height="50" width="500"&gt;
&lt;/p&gt;

&lt;p&gt;Image 3: no height, width, but style="height: 50px; width: 500px;"
  &lt;img id="image3"
       src="http://www.mozilla.org/images/mozilla-banner.gif"
       style="height: 50px; width: 500px;"&gt;
&lt;/p&gt;

&lt;div id="output"&gt; &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Example_2_Image_Attributes" name="Example_2:_Image_Attributes">Пример 2: Аттрибуты Изображения</h2>

<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Modifying an image border&lt;/title&gt;

&lt;script&gt;
function setBorderWidth(width) {
  document.getElementById("img1").style.borderWidth = width + "px";
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;p&gt;
  &lt;img id="img1"
       src="image1.gif"
       style="border: 5px solid green;"
       width="100" height="100" alt="border test"&gt;
&lt;/p&gt;

&lt;form name="FormName"&gt;
  &lt;input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /&gt;
  &lt;input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" /&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Example_3_Manipulating_Styles" name="Example_3:_Manipulating_Styles">Пример 3: Управление Стилями</h2>

<p>В этом простом примере, некоторые базовые свойства стиля элемента абзаца HTML доступны с помощью объекта стиля элемента и свойств стиля CSS этого объекта, который можно получить и установить из DOM. В этом случае вы напрямую управляете отдельными стилями. В следующем примере (см. Пример 4), вы можете использовать таблицы стилей и их правила для изменения стилей для целых документов.</p>

<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Changing color and font-size example&lt;/title&gt;

&lt;script&gt;
function changeText() {
  var p = document.getElementById("pid");

  p.style.color = "blue"
  p.style.fontSize = "18pt"
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p id="pid" onclick="window.location.href = 'http://www.cnn.com/';"&gt;linker&lt;/p&gt;

&lt;form&gt;
  &lt;p&gt;&lt;input value="rec" type="button" onclick="changeText();" /&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Example_4_Using_Stylesheets" name="Example_4:_Using_Stylesheets">Пример 4: Использование Стилей</h2>

<p>Свойство styleSheets объекта документа возвращает список таблиц стилей, которые были загружены в этот документ. Вы можете получить доступ к этим таблицам стилей и их правилам индивидуально, используя объекты таблицы стилей, стилей и CSS правил объекта, как показано в этом примере, который выводит все селектора правил стиля в консоль.</p>

<pre class="brush:js">var ss = document.styleSheets;

for(var i = 0; i &lt; ss.length; i++) {
  for(var j = 0; j &lt; ss[i].cssRules.length; j++) {
    dump( ss[i].cssRules[j].selectorText + "\n" );
  }
}</pre>

<p>Для документа с единой таблицей стилей, в которой определены следующие три правила:</p>

<pre class="brush:css">body { background-color: darkblue; }
p { font-face: Arial; font-size: 10pt; margin-left: .125in; }
#lumpy { display: none; }
</pre>

<p>Этот скрипт выводит следующее:</p>

<pre>BODY
P
#LUMPY
</pre>

<h2 id="Example_5_Event_Propagation" name="Example_5:_Event_Propagation">Пример 5: Распространение Событий</h2>

<p>Этот пример демонстрирует, как события срабатывают и обрабатываются в DOM очень простым путём. Когда загружается BODY в составе HTML-документа, обработчик событий регистрируется в верхней строке таблицы TABLE. Обработчик событий реагирует на событие запуском функции stopEvent, изменяющей значение в нижней ячейке.</p>

<p>Однако, stopEvent также вызывает метод объекта событий, {{domxref("event.stopPropagation")}}, что препятствует дальнейшему всплытию события в DOM. Обратите внимание, что сама таблица имеет {{domxref("element.onclick","onclick")}} обработчик событий, который должен отображать сообщение при нажатии на таблицу. Но метод stopEvent метод прекратил распространение, и поэтому после обновления данных в таблице фаза события эффективно завершается, и отображается окно предупреждения для подтверждения.</p>

<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Event Propagation&lt;/title&gt;

&lt;style&gt;
#t-daddy { border: 1px solid red }
#c1 { background-color: pink; }
&lt;/style&gt;

&lt;script&gt;
function stopEvent(ev) {
  c2 = document.getElementById("c2");
  c2.innerHTML = "hello";

  // this ought to keep t-daddy from getting the click.
  ev.stopPropagation();
  alert("event propagation halted.");
}

function load() {
  elem = document.getElementById("tbl1");
  elem.addEventListener("click", stopEvent, false);
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body onload="load();"&gt;

&lt;table id="t-daddy" onclick="alert('hi');"&gt;
  &lt;tr id="tbl1"&gt;
    &lt;td id="c1"&gt;one&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td id="c2"&gt;two&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Example_6_getComputedStyle" name="Example_6:_getComputedStyle">Пример 6: getComputedStyle</h2>

<p>Этот пример показывает как {{domxref("window.getComputedStyle")}} метод может использоваться для получения стилей элемента, которые не заданы с помощью атрибута style или с помощью JavaScript (e.g., <code>elt.style.backgroundColor="rgb(173, 216, 230)"</code>). Эти последние типы стилей можно получить с помощью более прямых {{domxref("element.style", "elt.style")}} свойств, которые указаны в <a href="/en-US/docs/Web/CSS/Reference">DOM CSS Properties List</a>.</p>

<p>getComputedStyle () возвращает объект ComputedCSSStyleDeclaration, свойства индивидуального стиля которого могут ссылаться на метод getPropertyValue () этого объекта, как показано в следующем примере документа.</p>

<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

&lt;title&gt;getComputedStyle example&lt;/title&gt;

&lt;script&gt;
function cStyles() {
  var RefDiv = document.getElementById("d1");
  var txtHeight = document.getElementById("t1");
  var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");

  txtHeight.value = h_style;

  var txtWidth = document.getElementById("t2");
  var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");

  txtWidth.value = w_style;

  var txtBackgroundColor = document.getElementById("t3");
  var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color");

  txtBackgroundColor.value = b_style;
}
&lt;/script&gt;

&lt;style&gt;
#d1 {
  margin-left: 10px;
  background-color: rgb(173, 216, 230);
  height: 20px;
  max-width: 20px;
}
&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="d1"&gt;&amp;nbsp;&lt;/div&gt;

&lt;form action=""&gt;
  &lt;p&gt;
    &lt;button type="button" onclick="cStyles();"&gt;getComputedStyle&lt;/button&gt;
    height&lt;input id="t1" type="text" value="1" /&gt;
    max-width&lt;input id="t2" type="text" value="2" /&gt;
    bg-color&lt;input id="t3" type="text" value="3" /&gt;
  &lt;/p&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Example_7_Displaying_Event_Object_Properties" name="Example_7:_Displaying_Event_Object_Properties">Пример 7: Отображение Свойств Событий Объекта</h2>



<p>В этом примере используются методы DOM для отображения всех свойств объекта {{domxref ("window.onload")}} {{domxref ("event")}} и их значений в таблице. Он также показывает полезный метод использования цикла for..in для итерации по свойствам объекта для получения их значений.</p>

<p>Свойства объектов событий сильно различаются между браузерами, WHATWG DOM Standard перечисляет стандартные свойства, однако многие браузеры значительно расширили их.</p>

<p>Поместите следующий код в пустой текстовый файл и загрузите его в различные браузеры, вы будете удивлены различным количеством и именами свойств. Вы также можете добавить некоторые элементы на страницу и вызвать эту функцию из разных обработчиков событий.</p>



<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"/&gt;
&lt;title&gt;Show Event properties&lt;/title&gt;

&lt;style&gt;
table { border-collapse: collapse; }
thead { font-weight: bold; }
td { padding: 2px 10px 2px 10px; }

.odd { background-color: #efdfef; }
.even { background-color: #ffffff; }
&lt;/style&gt;

&lt;script&gt;

function showEventProperties(e) {
  function addCell(row, text) {
    var cell = row.insertCell(-1);
    cell.appendChild(document.createTextNode(text));
  }

  var e = e || window.event;
  document.getElementById('eventType').innerHTML = e.type;

  var table = document.createElement('table');
  var thead = table.createTHead();
  var row = thead.insertRow(-1);
  var lableList = ['#', 'Property', 'Value'];
  var len = lableList.length;

  for (var i=0; i&lt;len; i++) {
    addCell(row, lableList[i]);
  }

  var tbody = document.createElement('tbody');
  table.appendChild(tbody);

  for (var p in e) {
    row = tbody.insertRow(-1);
    row.className = (row.rowIndex % 2)? 'odd':'even';
    addCell(row, row.rowIndex);
    addCell(row, p);
    addCell(row, e[p]);
  }

  document.body.appendChild(table);
}

window.onload = function(event){
  showEventProperties(event);
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;h1&gt;Properties of the DOM &lt;span id="eventType"&gt;&lt;/span&gt; Event Object&lt;/h1&gt;
&lt;/body&gt;

&lt;/html&gt;
</pre>

<h2 id="Example_8_Using_the_DOM_Table_Interface" name="Example_8:_Using_the_DOM_Table_Interface">Пример 8: Использование интерфейса таблицы DOM</h2>



<p>Интерфейс DOM HTMLTableElement предоставляет некоторые удобные методы для создания и управления таблицами. Два часто используемых метода: {{domxref ("HTMLTableElement.insertRow")}} и {{domxref ("tableRow.insertCell")}}.</p>

<p>Чтобы добавить строку и некоторые ячейки в существующую таблицу:</p>



<pre class="brush:html">&lt;table id="table0"&gt;
 &lt;tr&gt;
  &lt;td&gt;Row 0 Cell 0&lt;/td&gt;
  &lt;td&gt;Row 0 Cell 1&lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;

&lt;script&gt;
var table = document.getElementById('table0');
var row = table.insertRow(-1);
var cell,
    text;

for (var i = 0; i &lt; 2; i++) {
  cell = row.insertCell(-1);
  text = 'Row ' + row.rowIndex + ' Cell ' + i;
  cell.appendChild(document.createTextNode(text));
}
&lt;/script&gt;
</pre>

<h3 id="Notes" name="Notes">Заметки</h3>

<ul>
 <li>Свойство таблицы {{domxref ("element.innerHTML", "innerHTML")}} никогда не должно использоваться для изменения таблицы, хотя вы можете использовать ее для записи всей таблицы или содержимого ячейки.</li>
 <li>Если для создания строк и ячеек используются методы DOM Core {{domxref ("document.createElement")}} и {{domxref ("Node.appendChild")}}, IE требует, чтобы они были добавлены к элементу tbody, тогда как другие браузеры позволят добавлять к элементу таблицы (строки будут добавлены к последнему элементу tbody).</li>
 <li>Существует ряд других методов, относящихся к интерфейсу таблицы, которые могут использоваться для создания и изменения таблиц.</li>
</ul>

<h2 id="Subnav">Subnav</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
</ul>