Что такое событие DOM ready?

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

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

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

Источник

4 ответа

Решение

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

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

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

Источник

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

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

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

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

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

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

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

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

Источник

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

Источник

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

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

или же

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

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

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

На DOM-мероприятиях есть хорошее руководство по обучению Javascript

Источник

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

Источник
Другие вопросы по тегам