MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

DOMContentLoaded

Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

Подія DOMContentLoaded визивається, коли вихідний HTML документ повністю завантажився та був parsed, без очікування повного завантаження стилів, зображень, сабфреймів (subframes). Зовсім інша подія - load - має використовуватися лише для того, щоб визначити повне завантаження сторінки. Використання load там, де застосування DOMContentLoaded є більш доречним, є неймовірно популярою помилкою, тому будьте уважними.

Note: Синхронний Javascript затримує парсинг DOM.

Note: Існує безліч універсальних та автономних бібліотек, які  попонують кроссбраузерні методи для визначення готовності DOM.

Прискорення

Якщо ви хочете, щоб DOM запарсився (got parsed) якомога швидше після того, як користувач зробив запит сторінки, ви можете зробити ваш JavaScript асинхронним та оптимізувати завантаження стилів. Якщо цього не зробити, це сповільнить завантаження сторінки через те, що воно буде відбуватися паралельно і викрадати трафік у головного html документа.

Основна інформація

Specification
HTML5
Interface
Event
Bubbles
Yes
Cancelable
Yes (although specified as a simple event that isn't cancelable)
Target
Document
Default Action
None.

Властивості

Property Type Description
target Read only EventTarget The event target (the topmost target in the DOM tree).
type Read only DOMString The type of event.
bubbles Read only Boolean Whether the event normally bubbles or not
cancelable Read only Boolean Whether the event is cancellable or not?

Приклад

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

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

Браузерна сумісність

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0[1] 1.0 (1.7 or earlier)[1] 9.0[2] 9.0 3.1[1]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes)[1] 1.0 (1)[1] ?[2] (Yes) (Yes)[1]

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

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

Подібні події

Мітки документа й учасники

 Зробили внесок у цю сторінку: AlinaKuzmenko
 Востаннє оновлена: AlinaKuzmenko,