Javascript 如何在没有jQuery的情况下检测DOM就绪并添加类？_Javascript_Jquery

Javascript 如何在没有jQuery的情况下检测DOM就绪并添加类？

javascript jquery

Javascript 如何在没有jQuery的情况下检测DOM就绪并添加类？,javascript,jquery,Javascript,Jquery,我想在不使用jQuery的情况下重写这一行，以便更快地应用它（并且在下载jQuery库之前）。线路是 $(document).ready(function() { $('body').addClass('javascript'); }); 如果我将它添加到html元素中，我是否能够省去DOM就绪部分？但是有一个问题是，验证程序不喜欢html元素上的class属性，即使它是用JS插入的那么，如果没有jQuery，我将如何重写它呢 window.onload = function() {

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

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

如果我将它添加到

html

元素中，我是否能够省去DOM就绪部分？但是有一个问题是，验证程序不喜欢

html

元素上的class属性，即使它是用JS插入的

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

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

应该这样做

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

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

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

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

简单：

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

或以HTML格式：

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

。。。

除非您想区分“加载前”和“加载后”，否则可以静态执行：

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

。。。

如果要复制jQuery的

文档.ready

事件，可以在适用的情况下使用或事件：

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

你有没有试着在你身体的最末端放上下面的东西

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


document.body.className='javascript'；

把这个

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

document.body.className+='javascript'；

在

标记之前。简单易用（而且非常接近）的解决方案。

如果您的目标是在加载页面时立即将类添加到

正文中，或者不隐藏JS回退元素，那么您可以在正文标记中立即执行，而不必等待任何事件：
<body>
    <script type="text/javascript">
        document.body.className+= ' javascript';
    </script>


document.body.className+='javascript'；

（尽管通常情况下，如果这是目的，最好在使用脚本化元素替换它们时删除回退元素，这样，如果一段脚本出错，页面上的所有其他组件都不会中断。）
这是绑定到元素的最快方法：在创建元素后立即绑定（如果只需要更改元素，则在打开标记内绑定；如果需要更改元素的内容，则在关闭标记后绑定）。然而，这种方法确实倾向于在页面上乱扔丑陋的
块，这就是为什么更多的人将代码全部放在底部或使用load/ready处理程序的原因。
如果只是处理现代浏览器，您可以将其放在打开body
标记之后
<script>
     document.body.classList.add("javascript");
</script>


document.body.classList.add（“javascript”）；
@David，谢谢提醒。不要做太多的jQuery，所以假设它是通过ID查找元素的。我很确定onload
是在$（document）之后触发的。ready
-我认为它正在等待加载所有图像，例如。document.body比gEBTN[0]更干净（并且稍微快一点）。你需要一个DOM API，在vanilla JS中无法做到这一点（你不能在vanilla JS中做很多事情。）你到底想实现什么？您想告诉CSS JavaScript可用吗？是否希望使用特定于浏览器的事件尽早执行此操作？简单的“onload”事件对您有用吗？任何额外的输入都有助于给出正确的答案。@David:那么jQuery是用什么编写的？@Tim Down:它是用JS编写的……并且使用了DOM API（W3C和Microsoft的API，其中针对浏览器错误进行了调整），因此它不是“普通的”（注意笑脸）。嘲笑那些不太了解情况的人既不有趣也不酷。我们都去过一次。此外，帮助他理解为什么他的语句在语义上不完美比自鸣得意更有用。我认为他试图添加类，以表明启用了javascript，因此您的第三个示例不太合适。另外，非常确定DOMReady在加载之前启动（将等待图像和外部资源），可以忽略第三个示例。平心而论，他没有指出他希望通过这一点实现什么。另请参见：为什么要分离readystatechange事件？IE8是否两次触发该事件？为什么？@Jan我猜这是从jQuery源代码转录的，它还向window.onload添加了一个回退侦听器。因此，在jQuery源代码中，第一次调用回调时，需要删除侦听器，以避免调用两次，每次事件调用一次。但是由于这段代码没有包含回退，我认为没有必要删除侦听器。但我只是猜测。如果您试图复制jQuery 2.x的行为，它不包括document.attachEvent
的功能检测，并且总是使用DOMContentLoaded事件@JanDvorak-一般来说，删除不再需要的侦听器是一种很好的做法，对性能也有好处。document.getElementsByTagName（'body'）[0]==document.body
在关闭body
后也会起作用。即使在关闭html