2018-11-04 JavaScript简介
1.0 完整的javascript实现
- ECMAScript 核心
- DOM 文档对象模型
- BOM 浏览器对象模型
DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。（引自别处）
1.1ECMAScript 规定内容
- 语法/类型/语句/操作符/关键字/保留字/对象
提供核心语言功能。
1.2文档对象模型 DOM
文档对象模型，提供访问和操作网页内容的方法和接口。
是针对XML但经过扩展的HTML的应用程序编程接口。DOM把整个页面映射为一个多层节点结构，HTML和XML页面中每个组成部分都是某种类型的节点，这些节点又包含着多种不同类型的数据。
DOM级别之DOM1级别
- DOM核心（DOM Core）：规定如何映射基于XML的文档结构，以便访问和操作文档。
- DOM HTML：在核心的基础上扩展针对HTML的对象和方法。
DOM级别之DOM2级别
- DOM视图/DOM事件/DOM样式/DOM遍历和范围
。。。DOM3等
1.3浏览器对象模型
HTML5发布后才有的规范，只处理浏览器窗口和框架
BOM，提供与浏览器交互的方法和接口。
- 弹出新的浏览器窗口
- 移动、关闭浏览器窗口以及调整窗口大小（缩放）
- 提供浏览器详细信息的navigator对象（导航）
- 提供 Web 浏览器所加载页面的详细信息的定位对象（location对象）
- 提供用户屏幕分辨率详细信息的屏幕对象（screen对象）
- 对 cookie 的支持
- IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象
详细总结
JavacSript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window对象包含了document属性，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而JavaScript可以操作浏览器以及浏览器读取到的文档。
区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。
-
window 代表了一个新开的窗口
-
location 代表了地址栏对象。
-
screen 代表了整个屏幕的对象
Window对象包含属性：document、location、navigator、screen、history、frames Document根节点包含子节点：forms、location、anchors、images、links
认识DOM
HTML文档可以说由节点构成的集合，DOM节点有:
- 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
- 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
- 属性节点:元素属性，如<a>标签的链接属性href="http://www.baidu.com"。
| 节点属性 | 返回值 |
|---|---|
| nodeName | 返回一个字符串，表示节点名 |
| nodeType | 返回一个整数，表示节点类型 |
| nodeValue | 返回给定节点的当前值 |
| 遍历节点树 | 返回值 |
|---|---|
| childNodes | 返回一个数组，这个数组由给定元素的子节点构成 |
| firstChild | 返回第一个节点 |
| lastChild | 返回最后一个节点 |
| parentNode | 返回一个给定节点的父节点 |
| nextSibling | 返回给定节点的下一个子节点 |
| previousSibling | 返回给定节点的上一个子节点 |
| DOM操作 | 返回值 |
|---|---|
| creatElement(element) | 创建一个新的元素节点 |
| creatTextNode() | 创建一个包含给定文本的新文本节点 |
| appendChild() | 指定节点的最后一个节点列表后添加一个新的子节 |
| insertBefore() | 将一个给定节点插入到一个给定元素节点的给定子节点的前面 |
| removeChild() | 从一个给定元素中删除子节点 |
| replaceChild() | 把一个给定父元素里的一个子节点替换为另外一个节点 |
DOM通过创建树来表示文档，描述了处理网页内容的方法和接口，从而使开发者对文档的内容和结构具有空前的控制力，用DOM API可以轻松地删除、添加和替换节点。
后续。。。访问节点/事件等。。。
