Вы можете использовать событие DOMContentLoaded окна JavaScript для создания эквивалента $(document).ready() без jQuery. Это событие возникает, когда исходный HTML-документ был полностью загружен и проанализирован, не дожидаясь завершения загрузки таблиц стилей, изображений и субфреймов.
Давайте посмотрим на следующий пример, чтобы понять, как это работает:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>$(document).ready() Equivalent without jQuery</title>
<script>
document.addEventListener("DOMContentLoaded", function(){
// Применяем стиль к абзацу
document.getElementsByTagName("p")[0].style.background = "yellow";
console.log("DOM has been fully loaded and parsed.");
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a simple paragraph of text.</p>
</body>
</html>Обратите внимание, что DOMContentLoaded отличается от события load, которое запускается при загрузке всей страницы. Событие load следует использовать только тогда, когда вы хотите обнаружить полностью загруженную страницу, включая все зависимые ресурсы, такие как CSS, изображения и т. д.
