一：介绍

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. linux运维之分析日志相关命令（1）

    一.分析日志 1.查看有多少IP访问 awk '{print $1}' log_file|sort|uniq|wc -l 2.查看某一个页面被访问的次数 grep "/index.php&q ...

  2. Nexus Repository Manager 3(CVE-2019-7238) 远程代码执行漏洞分析和复现

    0x00 漏洞背景 Nexus Repository Manager 3是一款软件仓库,可以用来存储和分发Maven,NuGET等软件源仓库.其3.14.0及之前版本中,存在一处基于OrientDB自 ...

  3. MySQL的COUNT()函数理解

    MySQL的COUNT()函数理解 标签(空格分隔): MySQL5.7 COUNT()函数 探讨 写在前面的话 细心的朋友会在平时工作和学习中,可以看到MySQL的COUNT()函数有多种不同的参数 ...

  4. vue axios的使用

    详细可以看:https://www.kancloud.cn/yunye/axios/234845 这里介绍日常使用得比较多的get和post: import axios from 'axios' // ...

  5. python---补充django中文报错（2），Django3.5出错

    今天是要Django3.5设置项目,结果出现中文报错,虽然之前分析过py2.7的报错原因,但是在py3之后reload不在使用,需要引入: from importlib import reload 但 ...

  6. SQL记录-PLSQL包

    PL/SQL包 PL/SQL包是组逻辑相关的PL/SQL类型,变量和子程序模式对象. 程序包将有两个强制性的部分: 包装规范定义 包体或定义 包装规范定义 规范是接口到包.它只是声明的类型,变量,常量 ...

  7. CentOS搭建Vsftpd服务器

    转自:http://alca0126.blog.51cto.com/7826974/1754906 一.安装vsftpd服务相关组件 需要安装组件vsftpd pam db4 db4-utils [r ...

  8. HDU 3511 圆扫描线

    找最深的圆,输出层数 类似POJ 2932的做法 圆扫描线即可.这里要记录各个圆的层数,所以多加一个维护编号的就行了. /** @Date : 2017-10-18 18:16:52 * @FileN ...

  9. Struts2_day03

    一.上节回顾 1 在action获取表单提交数据 (1)使用ActionContext类获取 (2)使用ServletActionContext类获取 (3)接口注入 2 结果配置 (1)全局结果页面 ...

  10. MAC Book 共享网络连接

    CHENYILONG Blog MAC Book 共享网络连接 MAC Book 共享网络连接 MAC比Windows共享连接要方便很多,只需要以下两步操作: 1.打开系统偏好设置,选择共享 2.选择 ...