DOM学习1.1:HTML与JavaScript的分离

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

分离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可以阻止链接本身自带的跳转功能;

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值