何时何地将javascript放入html中 [英] when and where to put javascript in html
问题描述
我是Java脚本的新手。我正在练习code.When我把我的代码放在head部分，然后我得到元素null，当我把它放在body中，但在元素之前，然后我也得到null，但如果我把它放在body中，但是在元素之后然后我得到了元素。我想问一下为什么在前两种情况下我得到null。这是我的代码
I am new to Java script. I am practicing code.When i put my code in the head section, then i get element null, and when i put it inside body, but before element, then i also get null, but if i put it inside body, but after element then i get the element. I want to ask why i am getting null in case of the first two cases. Here is my code
<!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
Here is my 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 / javascriptsrc =js / attributes.js>< / script>
在 a 元素之后，与我在脚本标记中编写脚本相同，例如
after the a element, is the same as i write script in the script tag , like
<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>
两者的含义是否相同？
谢谢
推荐答案
浏览器从上到下解析文档，如果遇到<脚本> 阻止（无论是内联脚本还是包含外部JS文件）它在解析任何更多文档之前运行该JavaScript。如果该特定代码块试图引用任何元素，它只能访问源代码中的元素，即已解析的元素。
The browser parses the document from top to bottom, and if it encounters a <script> block (whether inline script or inclusion of an external JS file) it runs that JavaScript before parsing any more of the document. If that particular code block tries to refer to any elements it can only access the ones above it in the source, i.e., the ones already parsed.
document.getElementById（）方法返回 null 如果找不到您提供的ID的元素，那么如果您尝试使用它来访问在源代码下面的元素，它们尚未被解析，无法找到。
The document.getElementById() method returns null if no element is found for the id you supply, so if you try to use it to access elements below it in the source they've not yet been parsed and can't be found.
处理这个问题的两种最常见的做法是：
The two most common practices to deal with this are:
-
将所有脚本放在
< body>的底部，以便当它运行时，所有元素都将被解析。
Put all of your script at the bottom of the
<body>such that when it runs all of the elements will have been parsed.
创建一个onload处理程序，即定义一个将尽快运行的函数文档完成加载。您可以从< head> 中的脚本块执行此操作 - 定义的立即运行onload函数的JavaScript，然后执行此功能在所有内容都加载后，执行
Create an "onload" handler, that is, define a function that will be run as soon as the document finishes loading. You can do this from a script block in the <head> - the JavaScript that defines the onload function is run immediately, but then the function is executed later after everything has loaded.
以下是最简单的选项2：
Following is the simplest way to do option 2:
window.onload = function() {
var x = document.getElementById("x");
// other element manipulation here
};
没有什么能阻止你在同一份文件中做1 和 2，在文档中间抛出一些< script> 块，但大多数人发现将所有代码保存在一个位置更为便宜。
There is nothing stopping you doing 1 and 2 in the same document, along with throwing some <script> blocks in the middle of the document, but most people find it neater to keep all their code in the one spot.
这篇关于何时何地将javascript放入html中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
