20210115 周瑞兵
一、知识点总结
1. DOM（Document Object Model）
DOM(Document Object Model)即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。
简而言之：在网页上，组成页面（或文档）的对象被组织在一个树形结构中，该树形结构即为DOM树。
以下边的HTML为例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
2. JavaScript
2.1 JavaScript概述
2.1.1 JavaScript的起源
1995 年 2 月，Netscape 公司发布 Netscape Navigator 2 浏览器，并在这个浏览器中免费提供了一个
开发工具——LiveScript。由于当时 Java 比较流行，Netscape管理层希望它外观看起来像java，因此便
把 LiveScript 改名为 JavaScript,但实际上它的语法风格与其他语言更像。这也是最初的 JavaScript 1.0
版本。
由于 JavaScript 1.0 很受欢迎，Netscape 在 Netscape Navigator 3 中又发布了 JavaScript 1.1 版本。
不久，微软在 Internet Explorer 3 中也加入了脚本编程功能。为了避免与 Netscape 的 JavaScript 产生
纠纷，微软特意将其命名为 JScript。
1997 年，欧洲计算机制造商协会（ECMA）以 JavaScript 1.1 为基础制订了脚本语言标准——ECMA262，并命名为 ECMAScript。
1998 年，国际标准化组织和国际电工委员会（ISO/IEC）采用了 ECMAScript 标准（即 ISO/IEC16262）。自此，浏览器厂商就以 ECMAScript 作为各自 JavaScript 实现的规范标准。JavaScript 正式
从各自为政走向了规范统一。
1997 年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了脚本语言的实现标准，并将这
种语言命名为 ECMAScript。这个版本就是 ECMAScript 1.0 版。
之所以不叫 JavaScript，主要有以下两个原因：
商标限制。Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法使用
JavaScript 这个名字，而且 JavaScript 己经被 Netscape 公司注册为商标。
体现公益性。该标准的制订者是 ECMA 组织，而不是 Netscape 公司，这样有利于确保规范的开
放性和中立性。
简单概括，ECMAScript 是 JavaScript 语言的规范标准，JavaScript 是 ECMAScript 的一种实现。注
意，这两个词在一般语境中是可以互换的。
2.1.2 浏览器支持
目前 5 大主流浏览器都支持 ECMAScript 5，具体说明如下：
- Opera 11.60+
- IE 9+
- Firefox 4+
- Safari 5.1+
- Chrome 13+
2.2 JavaScript 的特性
| 特性 | 简述 |
|---|---|
| 脚本语言 | JavaScript是一种解释型的脚本语言,在程序的运行过程中逐行进行解释。 |
| 基于对象 | JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。 |
| 简单 | JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求。 |
| 动态性 | JavaScript是一种采用事件驱动的脚本语言,它不需经过Web服务器就能对用户的输入做出响应。 |
| 跨平台性 | JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。 |
2.3 JavaScript的作用
- 嵌入动态文本于HTML页面。
- 对浏览器事件做出响应。
- 读写HTML元素。
- 在数据被提交到服务器之前验证数据。
- 检测访客的浏览器信息。
- 控制cookies，包括创建和修改等。
2.4 JavaScript的编写方式
-
写在HTML内部的脚本,在
<script>标签中编写JavaScript代码，脚本可以放在<body>和<head>标签中。<body> <script type="text/javascript">
// JavaScript 代码
</script>
</body><head> <script type="text/javascript">
// JavaScript 代码
</script>
</head>脚本放在
<body>和<head>中是有差别的： 放在head中的JS代码会在页面加载完成之前就读取，而放在body中的JS代码，会在整个页面加载完成之后读取。
-
以js文件的形式单独存在HTML的外部，使用的时候使用script标签的src属性导入进来即可。
<script src="*.js" type="text/javascript"></script>
2.5 HTML、CSS、JavaScript之间的关系
| 技术 | 作用 |
|---|---|
| HTML | 用于创建网页的结构 |
| CSS | 对页面进行美化 |
| JavaScript | 用于与用户进行交互 |
2.6 JavaScript 与 DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过这个对象模型(DOM)，JavaScript 获得创建动态 HTML 的所有能力：
- JavaScript 能改变页面中的所有 HTML 元素
- JavaScript 能改变页面中的所有 HTML 属性
- JavaScript 能改变页面中的所有 CSS 样式
- JavaScript 能删除已有的 HTML 元素和属性
- JavaScript 能添加新的 HTML 元素和属性
- JavaScript 能对页面中所有已有的 HTML 事件作出反应
- JavaScript 能在页面中创建新的 HTML 事件
二、心得体会
JavaScript通过DOM来操作HTML中的元素，JavaScript真的是功能强大。
评论留言