Question

我想在不使用jQuery的情况下重写这一行，因此可以更快地应用（并且在下载jQuery库之前）。这条线是......

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

如果我将其添加到html元素中，我是否可以放弃DOM准备部分？然而，一个问题是验证器不喜欢html元素上的class属性，即使它是用JS插入的。

那么，如果没有jQuery，我将如何重写呢？

Answer 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();
    }
  });
}

Answer 2

我不知道vanilla JS，但你可以写：

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

位于页面底部（在关闭body标签之前）。

Answer 3

如果您的目标是在加载页面时立即将类添加到body，也许隐藏no-JS-fallback元素，您可以直接在body标签内部执行此操作，而不是等待任何事件：

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

（虽然一般情况下，如果这样做的话，最好在删除脚本元素时删除回退元素，这样如果一个脚本错误输出页面上的所有其他组件就不会中断。）

这是绑定到元素的最快方法：在创建它们之后立即执行（如果只需要更改元素，则在open标记内部;如果需要更改其内容，则在close标记之后）。然而，这种方法确实倾向于使用丑陋的<script>块来丢弃页面，这就是为什么更多人将代码放在底部或者使用加载/就绪处理程序。

Answer 4

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

应该这样做。

编辑：更新以按标签名称获取元素而不是ID。

Answer 5

简单：

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

或在HTML中：

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

除非您想要区分“onload”和“onload”之后，否则您可以静态地执行此操作：

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

Answer 6

您是否尝试将以下内容放在身体的最后？

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

Answer 7

刚刚把这个

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

在</body>标记之前。简单易用（非常接近）的解决方案。

Answer 8

如果只是处理现代浏览器，您可以在打开body标记之后放置它。

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

如何检测DOM准备并添加没有jQuery的类？

8 个答案: