苏州有几个Web前端培训学校哪家好

Web前端知识体系介绍- HTML篇

Web前端技术由HTML、CSS和 Javascript部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构

1、BOM

BOM 是 Browser Object Model

的缩写，即浏览器对象模型，当一个浏览器页面初始化时，会在内存创建一个全局的对象，用以描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型，即BOM。BOM的核心对象就是window，window

对象也是BOM的对象，其中包含了浏览器的 6个核心模块：

document -

即文档对象，渲染引擎在解析HTML代码时，会为每一个元素生成对应的DOM对象，由于元素之间有层级关系，因此整个HTML代码解析完以后，会生成一个由不同节点组成的树形结构，俗称DOM树，document

用于描述DOM树的状态和属性，并提供了很多操作DOM的API。

frames - HTML 子框架，即在浏览器里嵌入另一个窗口，父框架和子框架拥有独立的作用域和上下文。

history - 以栈(FIFO)的形式保存着页面被访问的历史记录，页面前进即入栈，页面返回即出栈。

location - 提供了当前窗口中加载的文档相关信息以及一些导航功能。

navigator - 用来描述浏览器本身，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息。

screen - 提供了浏览器显示屏幕的相关属性，比如显示屏幕的宽度和高度，可用宽度和高度。

2、DOM 系统

DOM 是 Document Object Model 的缩写，即 文档对象模型，是所有浏览器公共遵守的标准，DOM

将HTML和XML文档映射成一个由不同节点组成的树型结构，俗称DOM树。其核心对象是document，用于描述DOM树的状态和属性，并提供对应的DOM操作API。随着历史的发展，DOM

被划分为1级、2级、3级，共3个级别：

1级DOM - 在1998年10月份成为W3C的提议，由DOM核心与DOM

HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOM

HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。

2级DOM - 鉴于1级DOM仅以映射文档结构为目标，DOM

2级面向更为宽广。通过对原有DOM的扩展，2级DOM通过对象接口增加了对鼠标和用户界面事件(DHTML长期支持鼠标与用户界面事件)、范围、遍历(重复执行DOM文档)和层叠样式表(CSS)的支持。同时也对DOM

1的核心进行了扩展，从而可支持XML命名空间。

3级DOM -

通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包括XML

Infoset、 XPath、和XML Base。

浏览器对不同级别DOM的支持情况如下所示：

从图中可以看出，移动端常用的 Webkit 内核浏览器目前只支持DOM2，而不支持DOM3 。

3、事件系统

事件是用户与页面交互的基础，到目前为止，DOM事件从PC端的 鼠标事件(mouse) 发展到了 移动端的 触摸事件(touch) 和

手势事件(guesture)，touch事件描述了手指在屏幕操作的每一个细节，guesture 则是描述多手指操作时更为复杂的情况，总结如下：

根手指放下，触发 touchstart，除此之外什么都不会发生

手指滑动时，触发touchmove

第二根手指放下，触发 gesturestart

触发第二根手指的 touchstart

立即触发 gesturechange

任意手指移动，持续触发 gesturechange

第二根手指弹起时，触发 gestureend，以后将不会再触发 gesturechange

触发第二根手指的 touchend

触发touchstart (多根手指在屏幕上，提起一根，会刷新一次全局touch) _ ___

弹起根手指，触发 touchend

更多关于手势事件的介绍请参考：

gesture事件处理复杂手势

DOM2.0 模型将事件处理流程分为三个阶段，即 事件捕获阶段 、 事件处理阶段 、 事件冒泡阶段， 如图所示：

事件捕获 ：当用户触发点击事件后，顶层对象document 就会发出一个事件流，从较外层的DOM节点向目标元素节点传递，较终到达目标元素。

事件处理 ：当到达目标元素之后，执行目标元素绑定的处理函数。如果没有绑定监听函数，则不做任何处理。

事件冒泡 ：事件流从目标元素开始，向较外层DOM节点传递，途中如果有节点绑定了事件处理函数，这些函数就会被执行。

利用事件冒泡原理可以实现 事件委托

，所谓事件委托，就是在父元素上添加事件监听器，用以监听和处理子元素的事件，避免重复为子元素绑定相同的事件。当目标元素的事件被触发以后，这个事件就从目标元素开始，向较外层元素传递，较终冒泡到父元素上，父元素再通过event.target

获取到这个目标元素，这样做的好处是，父元素只需绑定一个事件监听，就可以对所有子元素的事件进行处理了，从而减少了不必要的事件绑定，对页面性能有一定的提升。