1、什么是DOM
DOM就是文档对象模型，什么是文档对象模型？这就需要好好说说了。
HTML的文档document页面是一切的基础，没有它dom就无从谈起。
当创建好一个页面并加载到浏览器时，DOM就悄然而生，它会把网页文档转换为一个文档对象，主要功能是处理网页内容。
在这个文档对象里，所有的元素呈现出一种层次结构，就是说除了顶级元素html外，其他所有元素都被包含在另外的元素中。
2.节点类型
节点表示网络中的一个连接点，一个网络就是由一些节点构成的。
而文档就是由节点构成集合，只不过他们是构成节点树上的树枝树叶而已。
这些节点有许多不同的类型，我们先来看看其中的三种：
元素节点、文本节点和属性节点。
HTML的标签元素就是DOM的元素节点，它提供了一份文档的结构。
但这份文档本身不会包含任何内容，因此元素节点可以包含其他的节点。
文本节点是节点类型的一种，它总是被包含在元素节点内部，形成页面文档的主要内容。
属性节点用于对元素做出个个具体的描述，例如：
a元素的href属性，img元素的alt属性。
属性总是被放在起始标签里，因此属性节点也总是被包含在元素节点中。
虽然并非所有的元素节点都包含属性，但所有的属性一定都被元素节点包含。
3.节点操作
3.1获取元素节点
获取元素节点有4种方法，分别通过元素ID，标签名字，类名和css选择器来获取。
3.1.1 元素ID
getElementById方法是document对象特有的函数，传入一个参数即元素的id属性值，将返回一个对象。
这个对象对应那个id属性为指定值的节点，我们还可以用typeof来验证它的类型：
document.getElementById(“car”);
alert(typeof document.getElementById(“car”));
实际上文档中每一个元素都是一个对象，利用DOM提供的方法可以得到任意一个对象。
不过要是为每一个元素都定义一个独一无二的ID值那就太麻烦了，所以DOM还提供了另外的方法来获取没有id的对象。
3.1.2 标签名字
getElementsByTagName方法会返回一个对象数组，数组的元素就是和getElementById差不多的获取到的对象:
document.getElementsByTagName(“li”);
还可以用数组的方法length来获取这个数组的长度：
document.getElementsByTagName(“li”).length;
如果觉得在编程的过程中反复书写这段代码会很麻烦，那还可以将它赋值给一个变量即可：
var lis = document.getElementsByTagName(“li”);
for (var i = 0; i < lis.length; i++) {
alert(typeof lis[i]);
}
另外还可以将getElementById和getElementsByTagName结合起来使用，缩小选取范围
比如现在只想知道id是car的元素下面有多少个列表项，那么就可以这样：
var car = document.getElementById(“car”);
var lis = car.document.getElementsByTagName(“li”);
3.1.3 类名
getElementsByClassName方法让我们能够通过class类名来访问元素。
它的返回值和getElementsByTagName类似，都是返回一个对象数组：
document.getElementsByClassName(“sale”);
值得注意的是它还可以匹配含有多个class的元素，指定多个类名的时候
只需要在字符串参数中间yoga空格分隔类名就可以了，顺序不重要前后都可以。
另外它也可以和前面两种方法混合使用，用法和getElementById和getElementsByTagName结合使用的例子一致。
3.1.4 CSS选择器
还有html5中新增的两个方法，让我们可以用css选择器的方法来选择DOM节点，这两个方法必须在IE8以上的现代浏览器中才能使用。
第一个方法是返回了单个节点，如果有多个匹配元素就只返回第一个，如果找不到匹配就返回null。
第二个方法是返回一个节点列表集合。参数则都为CSS选择器字符串：
document.querySelector(“#foo");
document.querySelectorAll(“.bar");
节点
childNodes，在一颗节点树上，这个属性可以用来获取一个元素的所有子元素，得到一个包含所有子元素的数组：
element.childNodes
如果要获得body元素下的全体子元素
document.getElementsByTagName(“body”)[0].childNodes;
parentNode，获取当前节点的父节点元素，如果指定节点没有父元素那么会返回null。
nodeType, 每个节点都有nodeType属性，这个属性是一个数值，让我们可以知道正在处理哪种类型的节点。
节点类型有十多种，但其中我们最需要了解的有3种：
元素节点的nodeType属性值是1
属性节点的nodeType属性值是2
文本节点的nodeType属性值是3
这就意味着我们可以只对特定类型的节点进行处理，比如只处理元素节点。
alert(node.nodeType);
nodeValue，如果想改变文本节点的值，就可以使用这个属性:
node.nodeValue;
比如当有一个p元素节点，里面有一些文本内容，如果想取得这些文本内容，那么直接对p元素使用nodeValue会得到一个null空值。
因为这样得到的是p元素节点的值而不是它的子元素文本节点的值，因此可以这样来得到真正需要的内容：
p.childNodes[0].nodeValue;
firstChild和lastChild，是对子元素数组更简易操作的属性，就是childNodes的第一个和最后一个，这样更简短也更有可读性。
4.DOM的一些常见的操作元素方法
获取节点的DOM方法
//1.通过元素的id属性值来获取元素，返回的是一个元素对象
var element = document.getElementById(id_content)
//2.通过元素的name属性值来获取元素，返回的是一个元素对象的数组
var element_list = document.getElementsByName(name_content)
//3.通过元素的class属性值来获取元素，返回的是一个元素对象的数组
var element_list = document.getElementsByClassName(class_content)
//4.通过标签名获取元素，返回的是一个元素对象数组
var element_list = document.getElementsByTagName(tagName)
获取/设置元素的属性值的DOM方法
//1.获取元素的属性值，传参自然地是属性名，例如class、id、href
var attr = element.getAttribute(attribute_name)
//2.设置元素的属性值，传参自然地是元素的属性名及要设置的对应的属性值
element.setAttribute(attribute_name,attribute_value)
创建节点(Node)的DOM方法
//1.创建一个html的元素，传参是元素类型，例如div、h1-5、a，下以div为例:
var element = document.createElement("div")
//2.创建一个文本节点，传参的是对应的文本内容(注意是文本节点，不是某个html元素)
var text_node = document.createTextNode(text)
//3.创建一个属性节点，传参是对应的属性名
var attr_nodedocument.createAttribute(attribute_name)element.setAttributeNode(attr_node)
增添节点的DOM方法
//1.文档中的节点 是可以用js进增删改查
//获取
var box=document.querySelector("#box")
//创建元素：这个元素是不会渲染道页面上，它不在DOM中
var box2=document.createElement("div")//传入的字符串 是标签的名字
box2.className="box2"
class.classList.add()
// box2.className="box2 box3"
// box2.className=box.className+" box3"
box2.classList.add=("box")
// box2.classList.remove=("box3") 移除class
// box2.appendChild(box3)
box2.innerHTML="666"
//添加到文档树中，x.appendchild(y)，把y节点对象添加到x中
box.appendChild(box2)
//1.向element内部的最后面添加一个节点，传入的参数是节点类型
element.appendChild(Node)
//2.向element内部某个已存在的节点的前面插入一个节点，仍然传入一个节点类型的参数
element.insertBefore(new_Node,existed_Node)
注意，添加节点之前，你要先创建好节点，同时要选好父节点element，第二个方法甚至你还要找好插入位置后面的兄弟节点。
删除节点的DOM方法
//父删除子
btn.onclick=function(){
var button=document.querySelector("#btn")
button.parentElement.removeChild("button")
//自己移除
// box.remove()
//清空自己
// var box=document.querySelector("#box")
//box.innerHTML="" //所有的都被清空了
注意，删除时，要找到对应的父节点element才可以顺利删除。
复制节点的DOM方法
//克隆
// var box=document.querySelector("#box")
// var box2=box.cloneNode() //填ture 连同box的后代元素和事件一起复制 //不填就是简单的复制拷贝
// box.appendChild(box2)
插入节点的DOM方法
//插入节点
var box=document.querySelector(".box")
var a1=document.createElement("h3")
box.insertbefore(a1,a2) //a1是被添加的元素，a2是被指定元素前面添加
var btn=document.querySelector("#btn")
var a1=document.createElement("button")
btn.insertbefore(a1,btn.childNodes[2])
最后是一些常见的DOM属性：
//1.获取当前元素的父节点
var element_father = element.parentNode
//2.获取当前元素的html元素型子节点
var element_son = element.children
//3.获取当前元素的所有类型子节点，包括html元素、文本和属性
var element_son = element.childNodes
//4.获取当前元素的第一个子节点
var element_first = element.firstChild
//5.获取当前元素的前一个同级元素
var element_pre = element.previousSibling
//6.获取当前元素的后一个同级元素
var element_next = element.nextSibling
//7.获取当前元素的所有文本，包括html源码和文本
var element_innerHTML = element.innerHTML
//8.获取当前元素的所有文本，不包含html源码
var element_innerTEXT = element.innerText
总结
学会了这些，你就可以尝试一些基本的js操作，写案例特效等等，比如排空思想，开关思想等，需要多动手去实践可以帮助你加深印象。
