代码之家 › 专栏 › 技术社区 › alex

如何在没有jquery的情况下检测dom就绪并添加类?

jquery javascript

alex · 技术社区 · 15 年前

我想在不使用jquery的情况下重写这行代码,这样可以更快地应用它(在下载jquery库之前)。这条线是…

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

如果我把它添加到 html 元素,我是否可以去掉dom就绪部分?但有一个问题是,验证器不喜欢 HTML 元素,即使它是用JS插入的。

那么,如果没有jquery,我如何重写它呢?

8 回复 | 直到 12 年前

Christian C. Salvadó 15 年前

如果要复制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();
    }
  });
}

David Hellsing 15 年前

我不知道香草JS,但你可以写:

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

在页面底部(关闭body标签之前)。

bobince 15 年前

如果您的目标是将类添加到 body 加载页面后,可能要立即隐藏任何JS回退元素,您可以直接在body标记内执行该操作,而不是等待任何事件:

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

(尽管一般来说,如果这是目标,最好在用脚本元素替换回退元素时删除它们,这样,如果一段脚本出错,页面上的所有其他组件都不会中断。)

这是绑定到元素的最快方法:创建元素后立即这样做(如果只需要更改元素,则在打开标记内;如果需要更改元素的内容,则在关闭标记后)。然而,这种方法确实会在页面上留下难看的内容。 <script> 块,这就是为什么更多的人将代码放在底部或使用一个加载/就绪处理程序的原因。

jaywon 15 年前

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

这应该可以做到。

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

Eugene Lazutkin 15 年前

简单的:

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

或者在HTML中:

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

除非您想区分“before onload”和“after onload”,否则可以静态地执行此操作:

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

Mic 15 年前

你试过在你身体的最末端放以下东西吗?

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

NilColor 15 年前

把这个放进去

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

之前 </body> 标签。简单易用(非常接近)的解决方案。

alex 12 年前

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

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