DOM学习1.1：HTML与JavaScript的分离

最新推荐文章于 2025-07-08 15:44:08 发布

原创

最新推荐文章于 2025-07-08 15:44:08 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #JavaScript

这篇博客探讨了如何实现HTML与JavaScript的分离，强调通过创建外部.js文件存放脚本，利用getElementById、getElementsByTagName等方法绑定事件。文章详细解释了在链接被点击时调用函数的过程，并提醒读者注意确保JavaScript代码在HTML完全加载后再执行，通常通过window.onload事件来确保这一点。还提供了一个文字、图片切换的实例作为应用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分离JavaScript是把网页的结构和内容与JavaScript脚本的动作行为分开。
建立一个外部的.js文件，将JavaScript的代码保存在里面；
把JavaScript代码调用行为与HTML文档的结构和内容分离开；
JavaScript语言不要求事件必须在HTML文档里处理，可以在外部的JavaScript文件里把一个事件添加到HTML文档的某个元素上：
element.event = action;
关键是要找到对应的元素，可以利用元素的 class 或 id 属性来获得这个事件的元素，
getElementById(id).event = action;
如果事件涉及多个元素可以使用getElementsByTagName、getAtrribute把事件添加到有特定属性的一组元素上；
例：
当点击某个链接时调用某个函数的具体步骤为：
1）、获取文档所有的链接，并保存在某一个数组中；
2）、利用 for 循环遍历数组；
3）、如果某个链接的class属性等于on，则该链接被点击时触发函数onC（）；

var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++){
if (links[i].getAtrribute("class") == "on"){
links[i].onclick = function() {
onC();
return false;
}
}
}

其中return false可以阻止链接本身自带的跳转功能；
注意：
如果文档加载之前或者未完成加载，脚本文件就加载的话，有可能出错，没有完整的DOM，getElementsByTagName等方法就会出错。故，必须让这些代码在HTML文档全部加载到浏览器后马上执行。
在HTML文档加载全部完毕时将触发一个事件，该事件有自己的触发函数：
window.onload = fun1；
表示文档加载完就会触发fun1()函数。

完整的例子：文字、图片切换升级版