kit*_*rry 0 html javascript dom
假设我们的HTML文件有这个代码:
<html>
<head>
<script src="totti.js"></script>
</head>
<body>
<span id="tim">this'll change on load</span>
</body>
</html>
由于我不知道我究竟能做到这一点,这就是我想要实现的代码(例如.totti.js):
function changeText(){
document.getElementById("tim").innerHTML = "changed text";
}
changeText();
我想我们需要首先将其id定义为变量,或者将其作为HTML方面的争论传递给它？帮助将不胜感激.谢谢.
您的代码是正确的,但是,如果您将脚本放在head标记内,那么脚本将在文档加载之前执行,因此它将无法工作(具有id的元素tim在该点尚不存在).
要解决此问题,您可以将脚本标记放在要修改的元素之后(或body标记的底部),如下所示:
<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>
在这种情况下,changeText()从totti.js中删除该行.
你快到了，这是正确的方法。但是，您的 Javascript 在呈现“tim”元素之前已加载并执行，因此无法找到它。
将您的代码包装在一个事件中，该事件会在所有 DOM 元素加载完毕后触发：
document.addEventListener('DOMContentLoaded', function(){
changeText();
});
function changeText(){
document.getElementById("tim").innerHTML = "changed text";
}
请注意，该函数本身不在事件回调中，因此它会在 javascript 加载时立即注册。只有实际调用changeText()函数依赖于 DOM。