Question

一个非常简单的程序，但我不确定为什么它没有被执行。

这是我的HTML文件： -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<script type="text/javascript" src="example.js"></script>
<title>Tag Name Locator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p>
There are 3 different types of element in this body:
</p>
<ul>
<li>paragraph</li>
<li>unordered list</li>
<li>list item</li>
</ul>
</body>
</html>

而且，这是JavaScript： -

var listItems = document.getElementsByTagName("li");
for (var i = 0; i < listItems.length; i++)
{
alert(listItems[i].nodeName);
}

但是，没有显示警告信息。

请帮忙。

如果我只使用一个警告线，如

alert("Welcome!")

在加载浏览器时正确显示。

有什么答案吗？

Answer 1

在关闭正文之前添加js。

    ...
    ...
    <script type="text/javascript" src="example.js"></script>
    </body>

查看添加头http://jsfiddle.net/ManyE/

时会发生什么

查看添加正文http://jsfiddle.net/ManyE/1

时会发生什么

Answer 2

将JS文件脚本放在底部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>

<title>Tag Name Locator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p>
There are 3 different types of element in this body:
</p>
<ul>
<li>paragraph</li>
<li>unordered list</li>
<li>list item</li>
</ul>
</body>
</html>
<script type="text/javascript" src="example.js"></script>

当你的DOM元素没有准备好时，

警告不会调用因为js文件先执行。更好地为jQuery用户..

Answer 3

在完全加载DOM之前，javascript中的代码（如果脚本中包含脚本）被触发。因此listItems.length最初为0，因此警报未显示。所以你需要将javascript代码放在一个函数中，并在body标签的onload事件上调用该函数。像这样。

在HTML中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<script type="text/javascript" src="example.js"></script>
<title>Tag Name Locator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onload="PageLoaded()">
<p>
There are 3 different types of element in this body:
</p>
<ul>
<li>paragraph</li>
<li>unordered list</li>
<li>list item</li>
</ul>
</body>
</html>

JS中的

function PageLoaded()
{
   var listItems = document.getElementsByTagName("li");
   for (var i = 0; i < listItems.length; i++)
    {
      alert(listItems[i].nodeName);
    }
}

Answer 4

在DOM tree完全构建之前，您的javascript正在调用。因此，它不知道那些li元素存在。您需要在加载文档后调用此JavaScript：

window.onload = function()
{
    var listItems = document.getElementsByTagName("li");
    for (var i = 0; i < listItems.length; i++)
    {
        alert(listItems[i].nodeName);
    }
}

或许多人建议，将其写在页面底部，这将确保在将这些内容加载到DOM后执行。

JSFiddle： http://jsfiddle.net/hescano/KASLB/

Answer 5

将您的脚本放在页面末尾

<body style="height:700px" >
    <p>
        There are 3 different types of element in this body:
    </p>
    <ul>
        <li>paragraph</li>
        <li>unordered list</li>
        <li>list item</li>
    </ul>
</body>
<script type="text/javascript" src="example.js"></script>

alert（）不适用于文档方法

5 个答案: