Как я могу определить готовность DOM и добавить класс без jQuery?

Я хочу переписать эту строку без использования jQuery, чтобы ее можно было применить быстрее (и перед загрузкой библиотеки jQuery). Линия это...

$(document).ready(function() { $('body').addClass('javascript'); });

Если бы я добавил его в html элемент вместо этого, смогу ли я оставить готовую часть DOM? Одной из проблем с этим является то, что валидатору не нравится атрибут класса на html элемент, даже если он вставлен с помощью JS.

Итак, как бы я переписать это без JQuery?

Источник

8 ответов

Решение

Если вы хотите воспроизвести JQuery's document.ready событие, вы можете использовать onreadystatechange или же DOMContentLoaded события, где это применимо:

function domReady () {
  document.body.className += " javascript";
  // ...
}

// Mozilla, Opera, Webkit 
if ( document.addEventListener ) {
  document.addEventListener( "DOMContentLoaded", function(){
    document.removeEventListener( "DOMContentLoaded", arguments.callee, false);
    domReady();
  }, false );

// If IE event model is used
} else if ( document.attachEvent ) {
  // ensure firing before onload
  document.attachEvent("onreadystatechange", function(){
    if ( document.readyState === "complete" ) {
      document.detachEvent( "onreadystatechange", arguments.callee );
      domReady();
    }
  });
}
Источник

Я не знаю о Vanilla JS, но вы можете написать:

document.getElementsByTagName('body')[0].className += ' javascript';

внизу страницы (перед закрытием тега body).

Источник

Если ваша цель - добавить класс в body сразу после загрузки страницы, возможно, чтобы скрыть элементы no-JS-fallback, вы можете сделать это непосредственно внутри тега body, не ожидая каких-либо событий:

<body>
    <script type="text/javascript">
        document.body.className+= ' javascript';
    </script>

(хотя в целом, если это и есть цель, лучше по мере необходимости удалять запасные элементы, заменяя их скриптовыми элементами, чтобы в случае ошибки одного фрагмента скрипта все остальные компоненты на странице не ломались.)

Это самый быстрый способ привязки к элементам: делайте это сразу же после их создания (внутри открытого тега, если вам нужно только изменить элементы; сразу после закрытого тега, если вам нужно изменить их содержимое). Однако этот подход имеет тенденцию засорять страницу уродливыми <script> блоки, поэтому все больше людей размещают код внизу или используют обработчик загрузки / готовности.

Источник 
window.onload = function() {
   var elmt =  document.getElementsByTagName('body');
   if(elmt){
      elmt[0].className = 'javascript';
   }
}

Это должно сделать это.

РЕДАКТИРОВАТЬ: Обновлено, чтобы получить элемент по имени тега, а не ID.

Источник

Если просто иметь дело с современными браузерами, вы можете разместить это сразу после открытия body тег.

<script>
     document.body.classList.add("javascript");
</script>
Источник

Просто положи это

<script>document.body.className += ' javascript';</script>

до </body> тег. Простое и легкое (и очень близкое) решение.

Источник

Просто:

window.onload = function() {
  document.body.className = "javascript";
}

Или в HTML:

<body onload="document.body.className = 'javascript'">...</body>

Если вы не хотите проводить различие между "до загрузки" и "после загрузки", вы можете сделать это статически:

<body class="javascript">...</body>
Источник

Вы пытались поместить в самый конец своего тела следующее?

<script>
    document.body.className = 'javascript';
</script>
Источник
Другие вопросы по тегам