在什么位置写js代码

一:介绍

1.DOM

  

 

2.节点分类

  节点及其类型:
    1). 元素节点
    2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作.
    3). 文本节点: 是元素节点的子节点, 其内容为文本.

  

 

二:JS的位置

0.新建静态web项目

  

 

1.第一种方式  

  在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件, 
  该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点.

 

2.程序

复制代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript">
 7     //onload的使用方式
 8     window.οnlοad=function(){
 9         var bt=document.getElementsByTagName("button")[0];
10         bt.οnclick=function(){
11             alert("have click on");
12         }
13     }
14 </script>
15 </head>
16 <body>
17     <button>click on me</button>
18 </body>
19 </html>

复制代码

 

3.运行效果

  

 

 4.第二种方式

  直接在html代码程序里写js。

  缺点:
    ①. js 和 html 强耦合, 不利用代码的维护
    ②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然后再在 onclick 属性中完成对函数的引用, 比较麻烦

 

5.程序

复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <button οnclick="alert('hello JS 2')"></button>
</body>
</html>

复制代码

 

  

6.运行结果

  

 

7.第三种方式

  将js直接放在html文档的后部分,这样在html文档加载完成后再加载js。

  但是,不符合习惯。

 

8.程序

复制代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 </head>
 7 <body>
 8     <button>click on me</button>
 9     <script type="text/javascript">
10         var bts=document.getElementsByTagName("button");
11         bts[0].οnclick=function(){
12             alert("hello js 3");
13         }
14     </script>
15 </body>
16 </html>

复制代码

 

9.运行结果

  

 

三:问题

1.这里缺少的第四种方式

  将js与html代码分开的第四种方式,有空将补充完整。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值