什么是DOM
DOM，Document object model文档对象模型。HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 将 HTML 文档表达为树结构，html文件中每个标签都是一个节点node
对象是一种独立的数据集合，有对应的属性和方法。
而js中对象分类三种：
用户定义对象
内建对象： Array Date Math
宿主对象： 由浏览器提供的
DOM中的节点分类
元素节点 element node
文本节点 text node
属性节点 attribute node
获取元素节点对象
getElementById() 获取单个对象
milk
fruit
meat
var eleNode=document.getElementById('foodList');
console.log(eleNode); //获取ul中所有内容
console.log(typeof eleNode); //object
getElementsByTagName() 获取出来的是一个节点对象集合，有点像数组但是不是数组
var alist=document.getElementsByTagName('li');
console.log(alist); //HTMLCollection(3) [li.item, li.item, li]
getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。
var aitem=document.getElementsByClassName('item');
console.log(aitem); //HTMLCollection(2) [li.item, li.item]
getAttribute()获取属性值 。 有一个必须的参数，这个节点对象的名字。
我们这啥都有
var oP=document.getElementsByTagName('p')[0];
var title=oP.getAttribute('title');
var className=oP.getAttribute('class');
console.log(title);//打印出title的内容:选出你要吃的东西
console.log(className);//p里面没有class：null
setAttribute()设置属性值。
oP.setAttribute('id','box');//在p标签加上一个id=box
节点属性
nodeName节点名称
nodeName属性：
nodeName属性:节点的名称,是只读
1、 元素节点的nodeName与标签名相同
2、 属性节点的nodeName与属性的名称相同
3、文本节点的nodeName永远是#text
4、 文档节点的nodeName永远是#document
5、 注释节点的nodeName永远是#comment
nodeValue节点的值
nodeValue属性:节点的值
1.元素节点的nodeValue是undefined 或null
2.文本节点的nodeValue是文本自身
3.属性节点的nodeValue是属性的值
nodeType节点类型
nodeType属性:节点的类型,是只读的。
以下常用的几种节点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
示例：
ppt
yaner
lulu
lalla
这是一个文本
//1.元素节点
var aDiv=document.getElementById('box');
console.log(aDiv.nodeName+'*'+aDiv.nodeValue+'*'+aDiv.nodeType);//DIV*null*1
//2.获取属性节点
var gAttr=aDiv.attributes[0];
console.log(gAttr.nodeName+'*'+gAttr.nodeValue+'*'+gAttr.nodeType);//id*box*2
//3.获取文本节点
var gText=aDiv.childNodes[0];
console.log(gText.nodeName+'*'+gText.nodeValue+'*'+gText.nodeType);//#text*这是一个文本*3
//4.获取注释节点
var gComment=aDiv.childNodes[1];
console.log(gComment.nodeName+'*'+gComment.nodeValue+'*'+gComment.nodeType);//#comment* 这是注释 *8
//5.验证文档节点类型
console.log(document.nodeType);//9
节点对象常用属性
获取子节点childNodes
获取第一个子节点firstChild
获取最后一个子节点lastChild
获取父节点parentNode
获取上一个兄弟节点nextSibling
获取下一个兄弟节点previousSibling
示例：无锡人流医院哪家好 http://www.wxbhnkyy120.com/
//如果换行会被读取为#text
console.log(aFather.childNodes);//获取子节点
console.log(aFather.childNodes[0]);//获取第一个子节点
console.log(aFather.firstChild);//获取第一个子节点
console.log(aFather.childNodes[aFather.childNodes.length-1]);////获取最后一个子节点
console.log(aFather.lastChild);//获取最后一个子节点
console.log(aFather.parentNode);//获取父节点整个body
console.log(aFather.parentNode.parentNode);//获取父亲的父亲节点
console.log(aFather.nextSibling);//获取下一个兄弟
console.log(aFather.previousSibling);//获取上一个兄弟
动态地操作节点
1.创建节点createElement()
2.插入节点appendChild()
在参考节点前面插入insertBefore ( newNode, node)
3.删除节点removeChild()
4.替换节点replaceChild()
5.创建文本节点createTextNode()
innerHTML可以在newNode节点中添加文本、标签等等
示例：
i ppt