外部Javascript文件如何影响HTML文件'；多姆？_Javascript_Html_Dom

外部Javascript文件如何影响HTML文件'；多姆？

javascript html dom

外部Javascript文件如何影响HTML文件'；多姆？,javascript,html,dom,Javascript,Html,Dom,假设我们的HTML文件有以下代码： <html> <head> <script src="totti.js"></script> </head> <body> <span id="tim">this'll change on load</span> </body> </html> 我想我们需要首先将它的id定义为一个变量，或者在HTML端作为参数传入它？我们将

假设我们的HTML文件有以下代码：

<html>
 <head>
  <script src="totti.js"></script>
 </head>
 <body>
  <span id="tim">this'll change on load</span>
 </body>
</html>

我想我们需要首先将它的id定义为一个变量，或者在HTML端作为参数传入它？我们将不胜感激。谢谢。

你就快到了，这是正确的方法。但是，Javascript是在呈现“tim”元素之前加载和执行的，因此它找不到它

在加载所有DOM元素后触发的事件中包装代码：

document.addEventListener('DOMContentLoaded', function(){
    changeText();
});

function changeText(){
    document.getElementById("tim").innerHTML = "changed text";
}

请注意，函数本身不在事件回调内，因此它在加载javascript时正确注册。只有真正调用

changeText（）

函数才取决于DOM。

您就快到了，这是正确的方法。但是，Javascript是在呈现“tim”元素之前加载和执行的，因此它找不到它

在加载所有DOM元素后触发的事件中包装代码：

document.addEventListener('DOMContentLoaded', function(){
    changeText();
});

function changeText(){
    document.getElementById("tim").innerHTML = "changed text";
}

请注意，函数本身不在事件回调内，因此它在加载javascript时正确注册。只有真正调用

changeText（）

函数取决于DOM。

您的代码是正确的，但是，如果您将脚本放在

head

标记中，那么脚本将在加载文档之前执行，因此它将无法工作（此时还不存在id为

tim

的元素）

要解决此问题，您可以将脚本标记放在要修改的元素之后（或放在

主体

标记的底部），如下所示：

<html>
 <head>
 </head>
 <body>
  <span id="tim">this'll change on load</span>
  <script src="totti.js"></script>
 </body>
</html>

<html>
 <head>
  <script src="totti.js"></script>
 </head>
 <body onload="changeText()">
  <span id="tim">this'll change on load</span>
 </body>
</html>


这会随着负载而改变

或者，您可以在加载文档后运行该函数，如下所示：

<html>
 <head>
 </head>
 <body>
  <span id="tim">this'll change on load</span>
  <script src="totti.js"></script>
 </body>
</html>

<html>
 <head>
  <script src="totti.js"></script>
 </head>
 <body onload="changeText()">
  <span id="tim">this'll change on load</span>
 </body>
</html>


这会随着负载而改变

在这种情况下，从totti.js中删除

changeText（）

行。

您的代码是正确的，但是，如果您将脚本放在

head

标记中，那么脚本将在加载文档之前执行，因此它将无法工作（此时还不存在id为

tim

的元素）

要解决此问题，您可以将脚本标记放在要修改的元素之后（或放在

主体

标记的底部），如下所示：

<html>
 <head>
 </head>
 <body>
  <span id="tim">this'll change on load</span>
  <script src="totti.js"></script>
 </body>
</html>

<html>
 <head>
  <script src="totti.js"></script>
 </head>
 <body onload="changeText()">
  <span id="tim">this'll change on load</span>
 </body>
</html>


这会随着负载而改变

或者，您可以在加载文档后运行该函数，如下所示：

<html>
 <head>
 </head>
 <body>
  <span id="tim">this'll change on load</span>
  <script src="totti.js"></script>
 </body>
</html>

<html>
 <head>
  <script src="totti.js"></script>
 </head>
 <body onload="changeText()">
  <span id="tim">this'll change on load</span>
 </body>
</html>


这会随着负载而改变

在这种情况下，从totti.js中删除

changeText（）

行。

问题：
在创建元素之前，您正在使用

document.getElementById（“tim”）

访问dom元素

有两种可能的方法可以解决您的问题：

1。将
脚本
-标记移动到
正文的末尾
-标记：

<html>
 <head>
 </head>
 <body>
  <span id="tim">this'll change on load</span>
  <script src="totti.js"></script>
 </body>
</html>

<html>
 <head>
  <script src="totti.js"></script>
 </head>
 <body onload="changeText()">
  <span id="tim">this'll change on load</span>
 </body>
</html>

问题：
在创建元素之前，您正在使用

document.getElementById（“tim”）

访问dom元素

有两种可能的方法可以解决您的问题：

1。将
脚本
-标记移动到
正文的末尾
-标记：

<html>
 <head>
 </head>
 <body>
  <span id="tim">this'll change on load</span>
  <script src="totti.js"></script>
 </body>
</html>

<html>
 <head>
  <script src="totti.js"></script>
 </head>
 <body onload="changeText()">
  <span id="tim">this'll change on load</span>
 </body>
</html>

以三种方式：

在内容之后导入js文件

使用window.onload=function（）{…}

document.addEventListener（'DOMContentLoaded'，function（）{…}

因此它可以通过三种方式找到元素。

：

在内容之后导入js文件

使用window.onload=function（）{…}

document.addEventListener（'DOMContentLoaded'，function（）{…}

因此它可以找到元素。

如果需要在加载所有元素后执行更改，为什么不使用简单的JQuery函数呢

$(document).ready (function (){ Document.getElementByID('tim').innerHTML = "changed text"; 
});

如果需要在加载所有元素后执行更改，为什么不使用简单的JQuery函数呢

$(document).ready (function (){ Document.getElementByID('tim').innerHTML = "changed text"; 
});

不清楚你的问题是什么。这是一个关于javascript如何工作的一般性问题吗？基本上你自己已经回答了…浏览器加载一个HTML页面和一个javascript文件；如果浏览器有一个javascript解释器（几乎所有浏览器都是这样做的），它运行脚本文件中的代码。脚本通常会有一个声明，告诉浏览器何时运行脚本，例如，页面何时加载，DOM何时准备就绪，等等。不清楚您的问题是什么。这是关于javascript如何工作的一般问题吗？您基本上已经回答了这个问题……浏览器加载HTML页面和javascript文件；如果浏览器有javascript解释器（几乎所有浏览器都有），它运行脚本文件中的代码。脚本通常会有一个声明，告诉浏览器何时运行脚本，例如，页面何时加载，DOM何时准备就绪，等等。请不要假设每个人都使用jQueryPlease不要假设每个人都使用jQueryAye！这肯定是实现兼容性的方法。尽管提供了更多的灵活性城市性。我怀疑随着PWAs的兴起，这一点会变得更加重要。；）是的！这绝对是实现兼容性的途径。尽管它提供了更多的灵活性。我怀疑随着PWAs的兴起，这一点会变得更加重要。；）