Question

我是Java脚本的新手。我正在练习code.When我把我的代码放在head部分，然后我得到元素null，当我把它放在body中，但在元素之前，然后我也得到null，但如果我把它放在body中，但是在元素之后然后我得到了元素。我想问一下为什么在前两种情况下我得到null。这是我的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript" src="js/attributes.js"></script>   // null

    </head>
    <body>

        <script type="text/javascript" src="js/attributes.js"></script>  // null
        <a id="braingialink"
           onclick="return showAttributes();"
           href="http://www.braingia.org" >Steve Suehring's Web Site
        </a>

        <script type="text/javascript" src="js/attributes.js"></script>   // ok

</body>

这是我的javascript

var a1 = document.getElementById("braingialink");     //get null in first two cases
window.alert(a1.getAttribute("href"));
a1.setAttribute("href", "www.google.com");
window.alert(a1.getAttribute("href"));

function showAttributes() {

    var e = document.getElementById("braingialink");
    var elementList = "";

    for (var element in e) {

        /**
         * Sometimes, especially when first programming with JavaScript, you might not know what
         * attributes are available for a given element. But you don’t have to worry about that, because
         * of a loop that calls the getAttribute() method.
         */
        var attrib = e.getAttribute(element);
        elementList = elementList + element + ": " + attrib + "\n";

    } //end of for()

    alert(elementList);

} //end of function showAttributes

并告诉我，放置<script type="text/javascript" src="js/attributes.js"></script>

a 元素之后的

与我在脚本标记中编写脚本相同，如

<a href="http://www.braingia.org" id="braingialink">Steve Suehring's Web Site</a>
<script type="text/javascript">
    var a1 = document.getElementById("braingialink");
    alert(a1.getAttribute("href"));
    a1.setAttribute("href","http://www.microsoft.com");
    alert(a1.getAttribute("href"));
</script>

这两件事情是否相同？

由于

Answer 1

浏览器从上到下解析文档，如果它遇到<script>块（无论是内联脚本还是包含外部JS文件），它会在解析任何更多文档之前运行该JavaScript。如果该特定代码块试图引用任何元素，则它只能访问源代码中的元素，即已经解析过的元素。

如果找不到您提供的ID的元素，document.getElementById()方法将返回null，因此如果您尝试使用它来访问源中它下面的元素，那么它们尚未被解析，无法找到。

处理这个问题的两种最常见的做法是：

将所有脚本放在<body>的底部，这样当运行时，所有元素都将被解析。
创建一个“onload”处理程序，即定义一个在文档完成加载后立即运行的函数。您可以从<head>中的脚本块执行此操作 - 定义的JavaScript立即运行onload函数，但之后该函数执行已装载。

以下是执行选项2的最简单方法：

window.onload = function() {
   var x = document.getElementById("x");
   // other element manipulation here
};

没有什么可以阻止你在同一个文档中执行1 和 2，同时在文档中间放置一些<script>块，但是大多数人发现它更适合保留所有文件他们的代码在一个地方。

Answer 2

请参阅http://www.w3schools.com/js/和http://www.w3schools.com/js/js_whereto.asp

您可以在文档中放置无限数量的脚本，并且可以同时在正文和head部分中包含脚本。将所有功能放在头部或页面底部是一种常见做法。这样他们就在一个地方，不会干扰页面内容。

Answer 3

你的头部是空的，因为DOM没有加载 - 那时你的对象是不存在的。使用此：

window.onload = function () {
    // Your code
}

哦，还要看一下jQuery here的.ready()函数。这肯定有助于后来的头痛。

Answer 4

通常您应该将脚本块放在head标记内。如果您有特殊原因，可以将它们放在body标记中，例如稍后加载脚本，因为它来自慢速服务器。

您无法访问该元素的原因是代码在浏览器解析元素的代码之前运行，因此该元素尚不存在。

您在加载文档后使用load事件来运行代码：

window.onload = function() {

  // here you put the code that needs to access the elements

}

Answer 5

您需要了解Web浏览器如何将资源加载到页面中。 Firefox - ＆gt; Firebug附加Net选项卡显示资源加载方式的时间表。如果您正在使用jQuery或类似的东西（并且您很满意） - 那么将代码放在$(document).ready(function() { .. }中 - 这将确保页面已完全加载。

此外，最好在</body>标记之前包含自定义js最后一个东西 - 这样页面DOM就会加载。

如果您想更深入地理解这一点，请阅读： http://www.goodreads.com/book/show/6438581-even-faster-web-sites 和 http://www.goodreads.com/book/show/1681559.High_Performance_Web_Sites

Answer 6

最好在关闭正文标记之前，以免干扰页面加载和渲染！它也是谷歌推荐的，例如分析片段和facebook！

Answer 7

您获得空值，因为您的脚本在浏览器仍在加载页面时执行。由于页面可能尚未呈现所有元素，因此您将获得空值。您需要在页面加载完成后运行脚本。将您的脚本放入HEAD元素，并在body onload事件中调用它。

何时何地将javascript放入html中

7 个答案: