5

我一直在尝试使用document.getElementByID从外部 JS 文件中的 HTML 文件中提取信息，但它似乎不起作用。document.getElementByID如果它与 HTML 文件内联，或者它可以在外部 JS 文件上正常工作，是否唯一有效？由于其他功能正在工作，因此在 HTML 文档中正确调用了 JS 文件。

4

5 回答 5

17

首先，确保您使用的是document.getElementById("xxx")，而不是document.getElementByID("xxx")（注意最后的大小写差异）。您的问题指的是document.getElementByID("xxx")这可能是这里的问题。

其次，您必须确保在浏览器解析相关 DOM 项之后执行该函数。如果您将document.getElementByIdJS 文件放入该部分中加载并在加载后立即执行的外部 JS 文件中<head>，则 DOM 尚未准备好。

你有几个选择：

1)将外部 JS 文件<script>标签放在正文的末尾，就在</body>标签之前。这不仅会更快地加载/显示您的页面，而且会保证在该 JS 文件中的任何内容可以运行之前解析 DOM。

<body>
Your HTML here

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

2）既然你有 jQuery，把你立即执行的代码放在一个$(document).ready(fn)块中，这样 jQuery 会阻止执行，直到 DOM 准备好。如果你这样做，那么你可以把你的代码放在任何地方（<head>如果你愿意，包括在这个部分中）。

$(document).ready(function() {
    // put your page initialization code here
});

3）将您的代码放在您想要的任何地方，但不要立即执行任何代码。相反，将所有初始化代码放在一个初始化函数中（我们称它为myPageInit()您调用的函数：

$(document).ready(myPageInit);

4）将您的代码放在您想要的任何地方，但不要立即执行任何代码。相反，将所有初始化代码放在一个初始化函数中（让我们称它为myPageInit()您在标记之前从脚本调用的</body>代码：

<script type="text/javascript">myPageInit()</script>
于 2012-04-06T19:15:05.500 回答
16

document.getElementByID 是否仅在与 HTML 文件内联时才有效

不。

它可以在外部 JS 文件上正常工作吗？

是的。

您可能document.getElementById()在 DOM 准备好之前调用。

于 2012-04-06T19:05:43.973 回答
3

我的建议是这样做：

window.onload = function () {
 // document.getElementById() code here
}

然后document.getElementById()，直到页面上的每个元素都已完全加载，您才会执行。

于 2012-04-07T04:11:44.283 回答
2

如果您将脚本放入其中，<head>则主体尚未加载，因此元素不存在。

要么使用 jQuery 的函数推迟脚本，要么将脚本放在正文的末尾。

于 2012-04-06T19:06:03.213 回答
0 

window.onload = function() {
    document.getElementById("demo").innerHTML = "My First JavaScript";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js in ts</title>
    <script src="app.js"></script>
</head>
<body>
   <h2>JavaScript in Body</h2>

   <p id="demo"></p>
</body>
</html>

于 2020-11-09T06:06:58.273 回答