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>

1610887255869

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的编写方式

  1. 写在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代码,会在整个页面加载完成之后读取。

  2. 以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真的是功能强大。

标签

评论


© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1