Что такое событие готовности 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