Как реализовать аналог $(document).ready на чистом JS?

Рейтинг: 38Ответов: 4Опубликовано: 07.04.2015

Тоже самое только на JS. Как перевести?

$(document).ready(function(){
        $("#form_error_message_frontend + div > div:last-child label").addClass("last");
    })
javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 61Принят

Как-то так:

document.addEventListener('DOMContentLoaded', function(){ // Аналог $(document).ready(function(){
  // Если должен быть найден один элемент
  if((e = document.querySelector("#form_error_message_frontend + div > div:last-child label")) !== null)
    e.classList.add('last'); // Аналог выборки и присвоения класса
  // Если элементов будет много
  Array.prototype.forEach.call(document.querySelectorAll("#form_error_message_frontend + div > div:last-child label"), function(e){
   e.classList.add('last');
  });
});
▲ 22

хороший ответ есть здесь

90+% браузеров покроет вот такое решение для ожидания окончания загрузки 

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

для 95+% браузеров можно использовать методы querySelector/querySelectorAll

var el = document.querySelector("#form_error_message_frontend + div > div:last-child label");
el.className += el.className ? ' last' : 'last'
▲ 3

Возможно вам будет достаточно добавить отложенную загрузку скрипта атрибутом "defer" в <script> Так скрипт дождется загрузки всего DOM дерева, после чего запустится.

▲ 2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Пример</title>
<script language="JavaScript">
function startFunction() {
alert("Hi there!");
}
</script>
</head>
<body>
</body>
</html>