Что такое событие готовности DOM?

Мне нужно запустить script, как только будет получен контент страницы (весь HTML-элемент), но его пока не нужно отображать.

Я предполагаю, что просто иметь простой тег <script>, который выполняет некоторый код на самой верхней части моей страницы, должен сделать трюк?

Чтобы сформулировать вопрос по-другому: готова ли DOM означать, что все элементы и ресурсы были вытащены и отображены?

Ответ 1

Готово DOM означает, что весь HTML был получен и проанализирован браузером в дерево DOM, которое теперь можно манипулировать.

Это происходит до того, как страница была полностью отображена (поскольку внешние ресурсы, возможно, еще не были полностью загружены, включая изображения, CSS, JavaScript и любые другие связанные ресурсы).

Фактическое событие называется DOMContentLoaded.

Ответ 2

DOMready означает: структура DOM была встроена в память браузера. Асинхронно страница уже начала рендеринг, но она может еще не закончена, так как внешние ресурсы, такие как изображения, видео и т.д., Закончат загрузку позже.

Ответ 3

Вы также можете попробовать с функциями

window.onload = function(){
   //your code
  }

или

body.onload = function(){
   //your code
  }

если вы не хотите использовать jQuery.

Будьте осторожны, но загруженный DOM не означает, что загруженная страница, iframes, javascript, изображения и css могут загружаться после этого события.

В DOM-тестах есть хорошая версия Javascript tutorial

Ответ 4

Мне нужно запустить скрипт, как только будет получено содержимое страницы (весь HTML-элемент), но его пока не нужно отображать.

Я предполагаю, что наличие простого тега, который выполняет некоторый код в самом верху моей страницы, должно сработать?

Тогда вполне вероятно, что вы хотите событие DOMContentLoaded. Вы можете использовать его таким образом:

    <head>
    <!-- … --->
        <script>
window.addEventListener('DOMContentLoaded',function () {
    //your code here
});
        </script>
    </head>

Чтобы сформулировать вопрос по-другому: означает ли DOM ready, что все элементы и ресурсы были извлечены и отображены?

Событие "DOM ready" отсутствует. Вы, вероятно, думаете о jQuery .ready() или о каком-то подобном странном использовании этой терминологии (например, у Google также есть запатентованное событие с аналогичным названием, на которое они ссылаются).

Однако для события DOMContentLoaded (цитируя MDN):

Событие DOMContentLoaded возникает, когда исходный HTML-документ полностью загружен и проанализирован, не дожидаясь окончания загрузки таблиц стилей, изображений и подкадров.

Ответ 5

Объектная модель документа (DOM) представляет собой межплатформенное и независимое от языка соглашение для представления и взаимодействия с объектами в документах HTML, XHTML и XML. [1] Узлы каждого документа организованы в древовидной структуре, называемой деревом DOM