1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。 换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的， 因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。 Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。
可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。 通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口， 连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
HTML 文档中的所有内容都是节点
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
通过使用 getElementById() 方法匹配元素的id属性来访问元素节点，对元素节点进行操作
通过使用 getElementsByTagName() 方法匹配元素的tagName来访问元素节点，对元素节点进行操作
通过使用 getElementsByClassName() 方法匹配元素的className来访问元素节点，对元素节点进行操作
值得注意的是， getElementsByTagName() 和 getElementsByClassName() 这两种方法因为其访问的是节点中的可能为复数的属性， 所以得到的会是一个以数组的形式来体现出来的元素节点集合，我们可以通过打印获取到的DOM节点来判断类型
document.createElement('元素名');创建新的元素节点
document.createAttribute('属性名');创建新的属性节点
document.createTextNode('文本内容');创建新的文本节点
document.createComment('注释节点');创建新的注释节点
document.createDocumentFragment( );创建文档片段节点
innerHTML 空DOM节点插入新的DOM节点,非空DOM节点会直接替换掉原来的所有子节点
appendChild() Node.appendChild() 把一个子节点添加到父节点的最后一个子节点;如果节点已经存在于当前文档树，这个节点会从原先的位置删除，再插入到新的位置。
parentNode.removeChild( existingChild );删除已有的子节点，返回值为删除节点
element.removeAttribute('属性名');删除具有指定属性名称的属性，无返回值
element.removeAttributeNode( attrNode );删除指定属性，返回值为删除的属性
如何在指定节点后面插入节点；在指定节点的前面插入子节点
在指定节点的前面插入子节点
function appendChildPre(parent , newNode){
if(parent.length>=1){
// 如果存在子节点，则在第一个子节点的前面添加
parent.insertBefore(newNode , parent.firstNode);
}else{
// 如果不存在，则在最后添加
parent.appendChild(newNode);
}
}
在指定节点的后面插入子节点
function insertAfter(newNode, thisNode){
var parent = thisNode.parentNode;
if (parent.lastChild == thisNode) {
// 如果父节点的最后一个节点是指定节点，则直接添加
parent.appendChild(newNode);
}else {
parent.insertBefore(newNode , thisNode.nextSibling);
//如果不是，则在指定节点的下一个节点前面插入
}
}
百度
各位师兄的总结
CSDN
感谢大家观看
By 各位师兄丨CSDN丨张智