在什么位置写js代码

最新推荐文章于 2024-08-05 17:46:58 发布

程宇寒

最新推荐文章于 2024-08-05 17:46:58 发布

阅读量2.4k

点赞数

文章标签： javascript 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.运行结果