1、什么叫DOM？

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

DOM技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，DOM技术使得页面的交互性大大地增强。

DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

２、DOM树

可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现

DOM.jpg

3、查找获取节点的方法

包括五种方式：

1.按id查找；
2.按标签名查找：var elems = parent.getElementsByTagName('');
3.按name属性查找：要回传给服务器的元素需要name属性，专门找表单中有name属性的表单元素；---了解即可；
4.按class属性查找；
　 var elems = parent.getElementsByClassName('class名');
　（1）.可在任意父元素上调用；
　（2），可返回多个元素的组成的集合；
　（3），不要求全部匹配，只要包含即可；
缺点：每次只能按一个条件查找，如果条件复杂的话，就无法一句话获得想要的元素；
5，这是重点强调的选择器，按选择器查找：用的比较多，比较犀利。
　5.1 只找一个元素：
var elem = parent.querySelector('selector‘);
　5.2 找多个元素：
var elems = parent.querySelectorAll（'selector')

那么我们获得了这些元素，就可以对他们更改、添加或删除啦，所以我们说 DOM 是用于获取、更改、添加或删除 XML 元素的标准。

4、DOM节点类型

这里只介绍几个方便我们写代码的节点
childNodes 所有子节点(数组)=换行+注释+所有子标签
　children 所有是标签类型的子节点
　parentNode 父节点
　nextSibling 下一个兄弟节点
　previousSibling 上一个兄弟节点
　firstChild 第一个子节点
　lastChild 最后一个子节点

5、常见的节点操作

（1）创建节点/属性

document.createElement("标签名");   //创建一个标签节点
document.createTextNode("你好");  //创建一个文本节点

(2)插入节点

div.appendChild(newNode);
//在某个div节点的末尾添加一个子节点
// 在XXX之前插入span
redDiv.insertBefore(span,redDiv.children[1]);

(3)删除节点

redDiv.removeChild(addr);  
// 移除redDiv的子节点address，address父级调用方法
addr.remove();   
//移除address标签，自身调用方法

（4）修改、替换节点

var h2=document.createElement("h2");
h2.innerHTML="泗泾";
h2.style.color="blue";
redDiv.replaceChild(h2,redDiv.children[0]);

好像经常用到就这么多，后面我们再慢慢领悟吧，继续更新吧