path: root/files/uk/web/api/window/domcontentloaded_event/index.html

---
title: DOMContentLoaded
slug: Web/API/Window/DOMContentLoaded_event
translation_of: Web/API/Window/DOMContentLoaded_event
original_slug: Web/Events/DOMContentLoaded
---
<p>Подія <code>DOMContentLoaded</code> викликається, коли вихідний HTML документ повністю завантажився та був розібраний (parse), без очікування повного завантаження стилів, зображень, сабфреймів (subframes). Зовсім інша подія - <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> - має використовуватися лише для того, щоб визначити повне завантаження сторінки. Використання <code><a href="/en-US/docs/Mozilla_event_reference/load">load</a> </code>там, де застосування <code>DOMContentLoaded</code> є більш доречним, є дуже поширеною помилкою, тому будьте уважними.</p>

<p>{{Note("Синхронний Javascript затримує парсинг DOM.")}}</p>

<p>{{Note("Існує безліч універсальних та автономних бібліотек, які  попонують кроссбраузерні методи для визначення готовності DOM.")}}</p>

<h2 id="Прискорення">Прискорення</h2>

<p>Якщо ви хочете, щоб DOM був розібраним (got parsed) якомога швидше після того, як користувач зробив запит сторінки, ви можете зробити ваш <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript асинхронним</a> та <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">оптимізувати завантаження стилів</a>. Якщо цього не зробити, це сповільнить завантаження сторінки через те, що воно буде відбуватися паралельно і марнувати трафік у головного html документа.</p>

<h2 id="Основна_інформація">Основна інформація</h2>

<dl>
 <dt style="width: 120px; text-align: right; float: left;">Специфікація</dt>
 <dd style="margin: 0px 0px 0px 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd>
 <dt style="width: 120px; text-align: right; float: left;">Інтерфейс</dt>
 <dd style="margin: 0px 0px 0px 120px;">Подія</dd>
 <dt style="width: 120px; text-align: right; float: left;">Спливання</dt>
 <dd style="margin: 0px 0px 0px 120px;">Так</dd>
 <dt style="width: 120px; text-align: right; float: left;">Можливість скасування</dt>
 <dd style="margin: 0px 0px 0px 120px;">Так (однак скасування як простої події скасувати не можна)</dd>
 <dt style="width: 120px; text-align: right; float: left;"> </dt>
 <dt style="width: 120px; text-align: right; float: left;"> </dt>
 <dt style="width: 120px; text-align: right; float: left;"> </dt>
 <dt style="width: 120px; text-align: right; float: left;"> </dt>
 <dt style="width: 120px; text-align: right; float: left;">Ціль</dt>
 <dd style="margin: 0px 0px 0px 120px;">Документ</dd>
 <dt style="width: 120px; text-align: right; float: left;">Типова дія</dt>
 <dd style="margin: 0px 0px 0px 120px;">Немає.</dd>
</dl>

<h2 id="Властивості">Властивості</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Властивість</th>
   <th scope="col">Тип</th>
   <th scope="col">Опис</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>target</code> {{readonlyInline}}</td>
   <td>{{domxref("EventTarget")}}</td>
   <td>The event target (the topmost target in the DOM tree).</td>
  </tr>
  <tr>
   <td><code>type</code> {{readonlyInline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>The type of event.</td>
  </tr>
  <tr>
   <td><code>bubbles</code> {{readonlyInline}}</td>
   <td>{{jsxref("Boolean")}}</td>
   <td>Whether the event normally bubbles or not.</td>
  </tr>
  <tr>
   <td><code>cancelable</code> {{readonlyInline}}</td>
   <td>{{jsxref("Boolean")}}</td>
   <td>Whether the event is cancellable or not.</td>
  </tr>
 </tbody>
</table>

<h2 id="Приклад">Приклад</h2>

<pre class="brush: html">&lt;script&gt;
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
&lt;/script&gt;
</pre>

<pre class="brush: html">&lt;script&gt;
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

for(var i=0; i&lt;1000000000; i++)
{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
&lt;/script&gt;
</pre>

<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0<sup>[1]</sup></td>
   <td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td>
   <td>9.0<sup>[2]</sup></td>
   <td>9.0</td>
   <td>3.1<sup>[1]</sup></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}}<sup>[1]</sup></td>
   <td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}<sup>[2]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Bubbling для цієї події підтримується принаймні Gecko 1.9.2, Chrome 6, and Safari 4.</p>

<p>[2] Internet Explorer 8 підтримує подію <code>readystatechange</code> , яка може використовуватися для того, щоб визначити чи готовий DOM. У більш ранніх версіях Internet Explorer цей стан може бути визначений повторними спробами виконання <code>document.documentElement.doScroll("left");</code>,  так як цей фрагмент коду буде генерувати помилку, поки DOM не буде готовий.</p>

<h2 id="Подібні_події">Подібні події</h2>

<ul>
 <li>{{event("DOMContentLoaded")}}</li>
 <li>{{event("readystatechange")}}</li>
 <li>{{event("load")}}</li>
 <li>{{event("beforeunload")}}</li>
 <li>{{event("unload")}}</li>
</ul>