一:介绍

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. 使用 docker 创建自己的镜像

    docker run 命令 镜像(image):An image is a filesystem and parameters to use at runtime. It doesn't have s ...

  2. 伸展树(Splay)复杂度证明

    本文用势能法证明\(Splay\)的均摊复杂度,对\(Splay\)的具体操作不进行讲述. 为了方便本文的描述,定义如下内容: 在文中我们用\(T\)表示一棵完整的\(Splay\),并(不严谨地)用 ...

  3. sqlite3数据库的简要应用

    Sqlite3数据库升级方案的变化. 1,  若是讲要升级的数据库版本更高,则从低版本数据库中拷贝与新数据库相同字段的内容,其他字段按照默认值创建.A->B->C这样逐个版本升级,每个版本 ...

  4. 生成器python

    一.列表生成式 需求:看列表[0, 1, 2, 3, 4, 5, 6, 7, 8, 9],我要求你把列表里的每个值加1,你怎么实现?你可能会想到2种方式 >>> a [0, 1, 2 ...

  5. pyspider框架的599证书问题

    使用PySpider 框架出现错误 HTTP 599: SSL certificate problem: unable to get local issuer certificate,如下 HTTP ...

  6. Spark记录-Scala语句(运算符-if-for-while-try-模式匹配)

    Scala条件运算符 Scala条件运算符在下表中列出. 运算符 操作 描述 && 与 运算符左侧和右侧的值为true.仅当左侧为真时,右侧才被计算. || 或 左侧或右侧的至少一个值 ...

  7. Repeater控件的分页实现

    本文讲解Repeater控件与PagedDataSource相结合实现其分页功能.PagedDataSource 类封装那些允许数据源控件(如 DataGrid.GridView)执行分页操作的属性. ...

  8. HDU 4502 吉哥系列故事——临时工计划(一维动态规划)

    题意:吉哥的假期是1到n天,然后有m个工作可以让吉哥选择做,每个工作都有一个开始 t_s  和结束的时间   t_e ,都用天来表示,然后每个工作必须从第一天做到最后一天, 从头到尾做完之后就可以得到 ...

  9. 【逆向知识】裸函数(Naked函数)

    1 说明 指定裸函数编写的函数,编译器生成不带任何多余代码. 利用此功能,可以使用内联汇编程序代码编写自己的 prolog/epilog 代码序列. 裸函数对于编写虚拟设备驱动程序特别有用. 2 练习 ...

  10. 基于Consul的数据库高可用架构【转】

    几个月没有更新博客了,已经长草了,特意来除草.本次主要分享如何利用consul来实现redis以及mysql的高可用.以前的公司mysql是单机单实例,高可用MHA加vip就能搞定,新公司mysql是 ...