1.背景介绍

DOM （文档对象模型(Document Object Model)）

DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口）。
DOM描 绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
DOM脱胎于 Netscape 及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正的跨 平台、语言中立的方式。

1998 年10 月DOM１级规范成为W3C 的推荐标准，为基本的文档结构及查询提供了接口。
目前IE、Firefox、Safari、Chrome 和Opera 都非常完善地实现了DOM。

2.知识剖析

什么是DOM

DOM 是 Document Object Model（文档对象模型）的缩写。
DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
在 HTML DOM中，所有事物都是节点。DOM 是被视为节点树的 HTML。

什么是DOM节点

HTML 文档中的所有内容都是节点
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

3.常见问题

常见的DOM操作有哪些？

1.查找节点
2.新建节点
3.添加新节点
4.删除节点
5.修改节点

我们用到最多的是element类型，用于表现HTML元素，提供了对元素标签名、子节点及特性的访问。

4.解决方案

查找节点

document.getElementById('#id'); 通过id查找元素，大小写敏感，如果有多个id只找到第一个

document.getElementsByClassName('.class');通过类名查找元素，返回拥有指定class的对象集合,有length属性，可以通过索引号访问里面的某一个元素

document.getElementsByTagName('标签名');通过标签名查找元素，返回拥有指定标签名的对象集合

document.getElementsByName('name');通过name属性查号查找，返回一个节点集合，有length属性，可以通过索引号访问

html5新加标签（ie8+）
document.querySelector(); // 返回单个node，如果有多个匹配元素就返回第一个
document.querySelectorAll(); // 返回一个nodeList集合

新建节点

创建元素，只是创建出来并未添加到html中，需要与appendChild 配合使用
document.createElement('元素名');
创建新的元素节点
document.createAttribute('属性名');
创建新的属性节点
document.createTextNode('文本内容');
创建新的文本节点
document.createComment('注释节点');
创建新的注释节点
document.createDocumentFragment( );
创建文档片段节点
节点.cloneNode(true);
克隆节点（需要接受一个参数来表示是否复制元素）

添加节点

appendChild ()
用法是： parent.appendChild(child)
会将child节点添加到parent里的最后面，如果子节点原本就存在，会移除原节点，添加新节点到最后，但是事件会保留

insertBefore()
用法是 parent.insertBefore(newNode,refNode);
refNode 是必须传的 不传会报错,如果 refNode 是undefined 和null 就会将新节点传入到parent节点的最后

replaceChild()
用法是：parent.replaceChild(newChild, oldChild);

删除节点

parentNode.removeChild( existingChild );
删除已有的子节点，返回值为删除节点

element.removeAttribute('属性名');
删除具有指定属性名称的属性，无返回值

element.removeAttributeNode( attrNode );
删除指定属性，返回值为删除的属性

修改节点

element.innerText='新增文本内容';常用来添加文本节点

element.innerHTML="可带标签的内容";

element.setAttribute( attributeName, attributeValue );
添加属性节点，修改属性值

elem.style.样式
直接修改节点样式

5.编码实战

6.扩展思考

DOM事件

允许 JavaScript 对 HTML 事件作出反应
onclick 事件——当用户点击时
onload 事件——用户进入
onunload 事件——用户离开
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup 事件——鼠标抬起

7.参考文献

8.更多讨论