何时何地把javascript放在html中

我是新来的Java脚本。我正在练习代码。当我将代码放在头部分时，然后我得到了元素null，并且当我把它放在body中，但在元素之前，那么我也会得到null，但是如果我把它放在body中，但是在元素之后然后我得到元素。我想问问，为什么我在前两种情况下变得空了。这里是我的代码何时何地把javascript放在html中

<!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 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>

这两件事是否意味着相同？

感谢

来源

2012-02-09 Basit

浏览器解析从顶部到底部的文件，并且如果遇到<script>块（无论是内联脚本或包括外部JS文件的）它解析任何更多的文件的前运行的JavaScript。如果那个特定的代码块试图引用任何元素，它只能访问源代码中的那个元素，即已经解析过的元素。

document.getElementById()方法返回null如果找不到您提供的标识的元素，那么如果您尝试使用它来访问源代码中的元素，它们尚未被解析并且无法找到。

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

把你所有的脚本在<body>这样的底部，它运行时，所有的元素都已经被解析。
创建一个“onload”处理函数，即定义一个函数，该函数在文档完成加载后立即运行。您可以从<head>中的脚本块 - 定义为的JavaScript，立即运行onload函数，但是之后在加载所有内容后稍后执行函数。

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

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

没有什么能阻止你在同一文件中，在中间抛出一些<script>块做1 和 2，沿该文件，但大多数人发现它更整洁，以保持所有的代码在一个地方。

来源

2012-02-09 10:37:36 nnnnnn

我想问一下当我们使用''。这和我们写'window.onload = someFunction（）{...};'是一样的。就像我在.js文件中写入一个简单的函数，'function someFunction（）{..}'，然后在我的HTML中使用''，那么它与我包含的效果相同我的.js文件在头部分和那个.js我写'window.onload = someFunction（）{...};'。两者是相同的？ – Basit 2012-02-09 10:55:21

这几乎是一样的。在html中设置为属性的就像是说'window.onload = function（）{something}'，也就是说，放入属性的代码不必调用函数，它有一个隐含的函数。许多人不喜欢将他们的JavaScript混合到他们的HTML中，因为它可能更令人头疼。注意：你将要在JavaScript属性中设置引号。 – nnnnnn 2012-02-09 10:58:59

最佳将是结束标记之前的权利，不扰乱页面加载和渲染了！这也是由谷歌推荐，例如分析片段和Facebook！

来源

2012-02-09 10:25:32

由于DOM尚未加载，您的头部变为空 - 当时您的对象不存在。使用此：

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

哦，也看看jQuery的here的.ready()功能。它肯定会在稍后帮助头痛。

来源

2012-02-09 10:26:21

当您使用window.onload时，是否等待所有元素在运行脚本之前加载，或者在页面加载时运行？ – CSharpened 2012-02-09 10:28:15

是的，它会等待一切加载。请参阅此页面：http://makeagreatsite.com/javascript/how-execute-javascript-when-document-ready – 2012-02-09 10:29:33

因此，当我们在头部或身体标记之后使用脚本时？这意味着如果您想访问HTML中的任何元素，那么最好在关闭正文标签之前使用脚本，正如** Jannis M **所建议的那样。 – Basit 2012-02-09 10:32:35

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

您无法访问元素的原因是代码在浏览器解析元素的代码之前运行，所以元素根本不存在。

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

window.onload = function() { 

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

}

来源

2012-02-09 10:28:36 Guffa

你得到空值，因为你的脚本执行，而浏览器仍然加载页面。由于页面可能还没有呈现所有元素，因此您会得到空值。您需要在页面加载完成后运行脚本。将脚本放入HEAD元素中，并在正文的onload事件中调用它。

来源

2012-02-09 10:28:55 akonsu

您需要了解Web浏览器如何将资源加载到页面中。 Firefox - > Firebug add-on 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

来源

2012-02-09 10:29:48

当我们使用'$（document）.ready（function（）{..}'时，元素及其属性也可用，或者只有元素可用，如果我有''，那么当$ （document）.ready（fn）'运行，那么我可以访问** **的所有属性也可以吗？或者我只是** **没有属性的元素？ – Basit 2012-02-09 10:45:10

您也有属性 – 2012-02-09 10:47:29

非常感谢你:) – Basit 2012-02-09 10:51:32

看到http://www.w3schools.com/js/和http://www.w3schools.com/js/js_whereto.asp

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

来源

2012-02-09 10:31:54 sysop

何时何地把javascript放在html中

回答

相关问题