Question

如果您有类似下面的代码，则无法访问head标记下方的任何节点类型。我猜测原因是在创建文档的其余部分之前执行的JavaScript代码。但是有没有办法从head标签访问这些节点。我想从head标签访问它们，因为我希望我的JavaScript代码尽可能位于一个位置。我知道jquery使用$（document）.ready（）。有类似的东西吗？

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var div  = document.getElementById('myDiv')
alert(div)
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id='myDiv'></div>
</body>
</html>

Answer 1

jQuery的$（document）.ready（）最简单的模拟是window.onload：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
window.onload = function(){
    var div  = document.getElementById('myDiv')
    alert(div)
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id='myDiv'></div>
</body>
</html>

它不是很好，因为它会等到所有图像都被下载才会发光。如果必须具有等效值，则可以使用this one等微量库。

Answer 2

“如果可能，我喜欢我的JavaScript代码在一个位置”

是：外部js文件。在头脑中编写js是不好的做法。以同样的方式在头部写作风格很差。希望你使用jquery不仅仅是准备好的事件，但它是一个宝贵的初始化程序，即使你不是。将你的js写在一个单独的文件中，希望在某种类型的容器中，这样你就不会混淆全局命名空间，并用$(document).ready();初始化它

Answer 3

您必须等待'onload'DOM事件。 jquery $（document）.ready（）是一个用于为onload设置事件处理程序的包装器。

如果没有jQuery，您可以尝试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function do_onload() {
    var div  = document.getElementById('myDiv')
    alert(div)
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body onload='do_onload()'>
<div id='myDiv'>I am here</div>
</body>
</html>

Answer 4

作为一般规则，我倾向于将所有内联j放在文档的末尾，只有外部我通常会放在头脑中。但是，您可以使用jquery使用的相同方法。我完全不知道jq源的样子，但是这样的东西应该可以工作（未经测试）：

window.onDomReady = function (fn) {
    if(document.addEventListener) {
      document.addEventListener("DOMContentLoaded", func, false);
    } else {
      document.onreadystatechange = function(func){
        if(document.readyState == "interactive") {
          fn(func);
        }
      }
    }
  };

然后你会像使用它一样：

window.onDomReady(function(){
   // do your stuff
});

我不知道如果那些完全跨浏览器兼容......那就是使用像jQuery这样的好处而不是编写你自己的好处。

在引用DOM时应该在哪里放置脚本？

4 个答案: