《HTML5 canvas开发详解（第2版）》——1.4　文档对象模型（DOM）和Canvas

本节书摘来自异步社区《HTML5 canvas开发详解（第2版）》一书中的第1章，第1.4节,作者： 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.4 文档对象模型（DOM）和Canvas

文档对象模型代表了在HTML页面上的所有对象。它是语言中立且平台中立的。它允许页面的内容和样式被Web浏览器渲染之后再次更新。用户可以通过JavaScript访问DOM。从20世纪90年代末以来，文档对象模型已经成为JavaScript、DHTML和CSS开发最重要的一部分。

画布元素本身可以通过DOM，在Web浏览器中经由Canvas 2D环境访问。但是，在Canvas中创建的单个图形元素是不能通过DOM访问的。正如本章前面讲到的，画布工作在即时模式，它并不保存自己的对象，只是说明在每个单个帧里绘制什么。

例1-2在HTML5页面上使用DOM定位 canvas 标签，这也可以用JavaScript来操作。在开始使用 canvas 前，首先需要了解两个特定的DOM对象：window和document。

window对象是DOM的最高一级，需要对这个对象进行检测来确保开始使用Canvas应用程序之前，已经加载了所有的资源和代码。

document对象包含所有在HTML页面上的HTML标签。需要对这个对象进行检索来找出用JavaScript操纵 canvas 的实例。

HTML中的JavaScript文档模式 HTML中的JavaScript文档模式是指浏览器在解析HTML文档时采用的模式，它可以影响文档的呈现方式和JavaScript的行为。本文将介绍文档模式的分类和作用，以及如何设置文档模式。
通过DOM对HTML文档的元素内容和CSS样式进行操作 通过DOM对HTML文档的元素内容和CSS样式进行操作 通过前面的学习我们应该可以了解到，通过DOM我们可以操作HTMl文档中的任意的元素及属性，文本内容。其实实际工作中我们用到最多的是怎样通过DOM操作HTML文档中的CSS样式。 HTML代码： button id= btn 切换 /button div "img" alt="" src="https://ucc.alicdn.com/images/user-upload-01/74520df74a104405b45a75b1fb5442ab.png?x-oss-process=image/resize,h_118"/>
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。