Question

我一直在尝试使用document.getElementByID从外部JS文件中提取HTML文件中的信息，但它似乎无法正常工作。 document.getElementByID只有在与HTML文件内联时才能工作，还是可以在外部JS文件上正常工作？正确地在HTML文档中调用JS文件，因为其他功能正在运行。

Answer 1

document.getElementByID仅在与HTML文件内联时才起作用

没有

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

是

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

Answer 2

首先，请确保您使用的是document.getElementById("xxx")，而不是document.getElementByID("xxx")（请注意最后的大小写差异）。您的问题涉及document.getElementByID("xxx")，因此可能就是问题所在。

其次，您必须确保在浏览器解析了相关DOM项之后执行该函数。如果要将document.getElementById放在<head>部分中加载的外部JS文件中并在加载后立即执行，那么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>

Answer 3

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

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

Answer 4

我的建议是这样做：

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

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

Answer 5

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>

document.getElementByID是外部还是内联？

5 个答案: