1. DOM简介
DOM 文档对象模型（Document Object Model）
HTML DOM 可以用来获取、修改、添加或删除 HTML 元素
DOM 将 HTML 文档表达为树结构：
2.HTML DOM 节点
所有事物都是节点，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
节点之间，存在父、子、兄弟。修改时会按照结点关系进行操作。比如想插入，得选择在谁之前插入，而这个谁又是谁的儿子。
3.常见HTML DOM 方法
主要是查找，修改，创建等
常用属性
innerHTML - 节点（元素）的文本值
----可用于获取或改变任意 HTML 元素
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
nodeName 属性规定节点的名称
nodeValue 属性规定节点的值。
4.HTML DOM 访问
访问 HTML 元素方法
通过使用 getElementById（） 方法：返回带有指定 ID 的元素；通过使用 getElementsByTagName（） 方法：返回带有指定标签名的所有元素；通过标签名获取元素 返回的是一个html集合， 类数组 length属性代表这个类数组的长度 ,其他数组的方法都没有
getElementsByTagName 方法不仅是document对象下的方法，在html元素上也可以调用通过使用 getElementsByClassName（） 方法：返回带有相同类名的所有 HTML 元素，作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点（索引号由0开始）。可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取需要的那个元素。
例子：
5.HTML DOM - 修改
可以改变 HTML 内容、改变 HTML 属性、创建新的 HTML 元素、删除已有的 HTML 元素、改变 CSS
样式、改变事件（处理程序）。
例：修改css .style.xxx=“xx”
创建新的 HTML 元素时必须创建该元素（元素节点），然后把它追加到已有的元素上）。
使用事件
HTML DOM 在事件发生时执行代码。如：
在元素上点击、加载页面、改变输入字段
删除 HTML 元素时。必须用该元素的父元素
替换 HTML DOM 中的元素，使用 replaceChild（） 方法，语法为node.replaceChild（newnode,oldnode），
HTML DOM使用节点关系在节点树中导航。
用getElementsByTagName（） 方法返回节点列表。节点列表是一个节点数组。length 属性定义节点列表中节点的数量。然后用 length 属性来循环节点列表。三个节点属性：parentNode、firstChild 以及 lastChild
DOM 根节点
如果您觉得本文的内容对您的学习有所帮助：
关键字：
JavaScript Canvas 开发游戏 html5 context2D