一：介绍

1.DOM

　　

2.节点分类

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

　　

二：JS的位置

0.新建静态web项目

　　

1.第一种方式　　

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

2.程序

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script type="text/javascript">

     //onload的使用方式

     window.onload=function(){

         var bt=document.getElementsByTagName("button")[0];

         bt.onclick=function(){

             alert("have click on");

         }

     }

 </script>

 </head>

 <body>

     <button>click on me</button>

 </body>

 </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 onclick="alert('hello JS 2')"></button>

</body>

</html>

　　

6.运行结果

　　

7.第三种方式

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

　　但是，不符合习惯。

8.程序

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 </head>

 <body>

     <button>click on me</button>

     <script type="text/javascript">

         var bts=document.getElementsByTagName("button");

         bts[0].onclick=function(){

             alert("hello js 3");

         }

     </script>

 </body>

 </html>

9.运行结果

　　

三：问题

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

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

000 在什么位置写js代码的更多相关文章

  1. html文件在head标签中引入js地址和直接写js代码，所用时间是不同的，因为引入js地址，文件加载的时候需要通过通讯协议去解析地址，读取外部文件

    html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件

  2. Asp.net mvc怎么在razor里写js代码

    我试图在Razor里写JS代码,但是不行 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 3 ...

  3. 在wxml中直接写js代码(wxs)

    我们在h5开发中,很多时候要在html中写到js代码,这个很容易实现.但是在微信小程序开发中,是不能直接在wxml中写js代码的,因此就有了wxs.在wxml中用wxs代码,有以下几种方式(在小程序文 ...

  4. 手写js代码（一）javascript数组循环遍历之forEach

    注:原文地址http://blog.csdn.net/oscar999/article/details/8671546 我这里是仿照学习! 1.js的数组循环遍历 ①数组的遍历首先想到的是for()循 ...

  5. 在HTML标签的事件后面直接写JS代码

    <input type="button" onclick="document.getElementdByTagName('div')[0].innrtHTML='S ...

  6. 找到你的位置（JS在页面中的位置）最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分

    找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页 ...

  7. 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  8. 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！

    原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...

  9. 也谈谈规范JS代码的几个注意点

    也谈谈规范JS代码的几个注意点 写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码.这种感觉就像是代码是你的作品,你希望它保持一份不仅干净而且也优 ...

随机推荐

  1. HGOI20180823 三校联考

    首测:220qwq(算差的好吧) 后来改了一个地方:300qwq(算慢的好吧) std被踩qwq 注意:输入数据第一行忘记输入n,亲脑补 题解: 多项式除法(若最后除出的答案为1那么就是成功),对于f ...

  2. ssh框架配置过程

    1.pom.xml配置依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&qu ...

  3. 解题：HNOI 2015 开店

    题面 根据树上距离的计算方法,可以先把答案化成$\sum dep_i+n*dep_u-\sum 2*dep[LCA(i,u)]$的形式,然后维护$\sum 2*dep[LCA(i,u)]$ 把妖怪们按 ...

  4. bzoj 1824: [JSOI2010]下棋问题

    考虑每次新放一个棋子会产生多少新的矩形,以及减掉多少旧的矩形. 用第$i$个点的坐标把坐标轴分成4个象限. 显然第一问的答案用四个单调栈就能解决. 而且第二问每个矩形的两个端点一定在1,3或2,4象限 ...

  5. sort与qsort的区别与联系

    sort属于C++范畴,在algorithm头文件中,下面直奔主题,给大家一个清晰明了的认识.qsort有C,和C++两个版本. qsort的compare函数原型 //comp ,也就说,如果the ...

  6. 「Django」浏览+1的操作

    适应于网页.文章等浏览次数统计 1.Models设置:添加viewed方法 class NewsTitle(models.Model): title = models.CharField(max_le ...

  7. Java基础-Java中23种设计模式之常用的设计模式

    Java基础-Java中23种设计模式之常用的设计模式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   一.设计模式分类 设计模式是针对特定场景给出的专家级的解决方案.总的来说设 ...

  8. Nginx的基本配置案例

    Nginx的基本配置案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Nginx配置虚拟主机   .操作系统环境 [root@yinzhengjie ~]# cat /etc ...

  9. 一个java版本的简单邮箱小爬虫

    //趁着有空回头复习了一把正则表达式/* 以下代码以百度某个贴吧的 URL 作为源,实现了读取 EmailAddress 并写入文件保存起来的两个功能,如果要爬取其它信息,可以改写正则实现相应功能 要 ...

  10. Django Book学习笔记（下）

    Django的Session框架 对于Django加密,大致使用这样的格式: hashtype$salt$hash 原因? 一次哈希是一次单向的加密过程,你能容易地计算出一个给定值的哈希码,但是几乎不 ...