在上一节中学习了如何通过JavaScript来修改CSS样式。简单地说：查询CSS样式（即计算样式），设置单个样式（设置的是行内样式），设置多个样式（通过类来设置样式）。事实上我们还可以通过脚本化CSS这种技术来控制样式。这种方式，可以让我们的页面更加的快速和高效。那就是直接通过JavaScript动态地添加和删除样式表中的某些样式，用来取代不断地查询DOM元素，并应用各种样式。接下来咱们就来学习脚本化样式表相关的知识。

对于每一位Web开发的同学而言，在CSS的世界当中，每一个元素都是一个盒子，都有描述盒子大小和位置的相关属性。比如CSS的盒模型相关的属性和position相关属性。不过今天我们学习和聊的不是CSS的世界，而是来学习和聊JavaScript中怎么获取元素尺寸和位置。

在上一节中，学习了JavaScript如何获取和设置元素位置和尺寸相关的方法，另外在JavaScript的学习笔记当中也学习了视窗宽度、位置与滚动高度相关的JavaScript方法与属性。今天继续来学习DOM中相关的知识，这篇文章将学习视窗、设备、滚动条和文档等相关的尺寸。其实在前两篇文章中都有涉及这些知识，为了让DOM系列相关的知识更完善，所以再花点时间整理一些这方面的技术点，加强印象。

DOM是JavaScript的基础之一，自己学习DOM的操作也有一段时间了，到今天为止DOM系列的教程刚好有十篇了，这部分都主要是围绕DOM操作的笔记。主要围绕DOM元素的增、删、改、查，DOM节点的操作以及元素尺寸、位置获取和设置等知识。今天这篇文章主要是小结一下。希望对一些像我这样的初学者有所帮助。

通过上一节的学习，对DOM事件有了一个简单的了解。但这只是学习DOM事件相关知识的起步点。在JavaScript中常见的事件模型有：DOM基本事件模型、DOM Level 2事件模型、IE事件模型、DOM Level 3事件模型 和 自定义事件模型。每种事件模型都有其自己独具的特性。只有了解了DOM事件模型之后，才可以为后续的DOM事件打下一个基础。今天来了解一下DOM事件的模型。

在上一节中，学习和了解了DOM事件模型，了解到JavaScript中每种事件模型都有其自己独具的特性。不同的事件模型中，绑定DOM事件的姿势也将略有差异，在这一节中，我们一起来学习JavaScript中DOM事件是如何绑定的。在JavaScript中，给DOM元素绑定事件主要分为两大类：HTML中直接绑定和JavaScript中绑定。

通过前面的DOM事件模型和事件绑定的姿势两节的学习，我们对JavaScript中的DOM事件有了一定的基础。但忽略了有关事件如何被触发的重要细节。

这篇文章主要跟着@David East的《HOW TO BUILD A SIMPLE CAMERA COMPONENT》 学习。学习如何使用MediaDevices API获取摄像头的访问权限，然后将相关的流通过video元素来播放。并且将视频流通过canvas元素转换为blob或base64格式的图片。并且依赖于自定义元素将这些功能封装成一个简单的摄像机组件。感兴趣的同学，请继续往下阅读。

我是个很懒的人，开发过程中经常有意无意地刻意避开数学相关的知识，你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 CSS3 来实现，timing-function 随意选用，最多也就调一下 cubic-bezier，找到看着舒服的就行。但是怎样让动画更顺滑，写出更贴近自然的动画，说实话以前我没怎么考虑过。每次当动效设计师提出，能不能这样那样的时候，我会理所当然地予以否决。所以有很长一段时间，我非常羡慕那些能用 canvas 绘制很酷炫的动画的程序员。

今年花了不少的时间在学习DOM相关的知识，经过这段时间的学习，可以通过一些JavaScript的API操作和处理Web页面上的HTML元素。在Web中除了DOM之外还有另外一个对象模型：CSS对象模型（即CSSOM）。或许你已经在项目中已经用过了，只不过没有意识到这一点而以。今天这篇文章中，我们主要来一起探讨有关于CSSOM相关的特性。