一：介绍

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. list All elements are null引起的异常

    ArrayList允许添加null值,就容易造成了list内的对象转换出现java.lang.NullPointerException异常. 场景: 数据库 select  min(id) as id ...

  2. Pair_2测试与优化

    # Pair_2测试与优化 211606316李震 21160305胡彤 一.预估与实际 PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分 ...

  3. RabbitMQ的生产者和消费者

    低级错误:启动程序的时候报错:socket close: 原因在配置文件中写的端口是:15672,应该是5672: client端通信口5672管理口15672server间内部通信口25672erl ...

  4. P1858 多人背包

    P1858 多人背包 题目描述 求01背包前k优解的价值和 要求装满 调试日志: 初始化没有赋给 dp[0] Solution 首先补充个知识点啊, 要求装满的背包需要初始赋 \(-inf\), 边界 ...

  5. ASP.NET批量下载文件

    一.实现步骤 在用户操作界面,由用户选择需要下载的文件,系统根据所选文件,在服务器上创建用于存储所选文件的临时文件夹,将所选文件拷贝至临时文件夹.然后调用 RAR程序,对临时文件夹进行压缩,然后输出到 ...

  6. AngularJS入门基础——$provide.decorator 实例讲解

    <body ng-controller="OneController"> <script>  var Foobar = function() {      ...

  7. MongoDB 之 手把手教你增删改查 MongoDB - 2

    我们在  MongoDB 之 你得知道MongoDB是个什么鬼 MongoDB - 1  中学习了如果安装部署一个 MongoDB 如果没看到我的金玉良言的话,就重新打开一次客户端和服务端吧 本章我们 ...

  8. jquery或者js对html控件的处理汇总

    1.下拉列表select的处理 a).后台通过jquery获取的json数据对下拉列表select的赋值操作: html页面:<select name="gameserverlist& ...

  9. WPF中各个Template的分析(转)

    作为新手,还是没看明白本文,留着以后再学习 在使用TabControl.ListView.Menu.TreeView的时候被各种Template搞得头昏眼花,决心把这个问题搞清楚,究竟什么时候该用什么 ...

  10. centos memcached

    2014年1月19日 16:58:37 memcached 是基于libevent事件监听功能的,所以要安装 libevent 和 libevent-devel 启动命令 ./memcached -d ...