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

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

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

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

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

Ответ 1

Если вы хотите воспроизвести событие jQuery 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();
    }
  });
}

Ответ 2

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

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

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

Ответ 3

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

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

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

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

Ответ 4

window.onload = function() {
   var elmt =  document.getElementsByTagName('body');
   if(elmt){
      elmt[0].className = 'javascript';
   }
}

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

EDIT: Обновлено для получения элемента по имени тега не ID.

Ответ 5

Простой:

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

Или в HTML:

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

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

<body class="javascript">...</body>

Ответ 6

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

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

Ответ 7

просто поставьте это

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

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

Ответ 8

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

<script>
     document.body.classList.add("javascript");
</script>