DOM
DOM:可以重构整个HTML文档、添加、移除、改变或重排页面上的项目
一.获取节点
1.document
(1).getElementById()
获取特定ID元素的节点。如果找到相应的元素则返回该元素的节点对象，如果不存在，则返回null
(2).getElementsByTagName()
获取相同元素的节点列表（对象伪数组）
(3).getElementsByName()
获取相同名称的节点列表 (伪数组)
(4).getElementsByClassName()
获取相同class属性的节点列表（IE9以下不兼容）
(5).document.documentElement
获取html的方法
(6).document.body:获取body的方法
(7).querySelector()
通过选择器获取一个元素（IE7及以下不兼容）,返回布局在上方的第一个对象
如：var oBox = document.querySelector("#box")
(8).querySelectorAll
通过选择器获取一组元素（IE7及以下不兼容），返回一个集合
如：var oBox = document.querySelector("#box")[0] //当id名一样时，
2.一般获取：
childNodes
功能：获取所有子节点，只适用于元素节点,返回元素节点和文本节点两种
用法：
var oBox=document.getElementById("box");
for(i=0;i<oBox.childNodes.length;i++){
console.log(oBox.childNodes[i])
}
结果：“北京电话”
<strong>当升科技</strong>
“hello world”
分析：俩个文本节点，一个标签节点
children
功能：只获取元素节点，文本节点不会被获取到
用法：
var oBox=document.getElementById("box");
for(i=0;i<oBox.children.length;i++){
console.log(oBox.children[i])
}
结果：
<strong>当升科技</strong>
分析：一个元素节点
attribute 不常用
功能：获取指定对象的属性节点
用法：console.log(oUl.attributes[0].nodeName)
3.高级选取(节点指针)
1.firstChild
功能：用于获取当前元素节点的第一个子节点，
注：相当于childNodes[0];
用法：console.log(oUl.firstChild)
2.lastChild
功能：用于获取当前元素节点的最后一个子节点，
注：相当于childNodes[box.childNodes.length – 1]
用法：console.log(oUl.lastChild)
3.parentNode
功能：返回该节点的父节点。
用法：console.log(oLi.parentNode)
4.previousSibling (Sibling是兄弟姐妹的意思)
功能：返回该节点的前一个同级节点。
用法:console.log(oLo.previousSibling)
5.nextSibling
功能：返回该节点的后一个同级节点。
用法：console.log(oLi.nextSibling)
二：节点操作
1.创建节点
(1).createElement()
功能：创建一个元素节点
用法：var oH = document.createElement("h1");
document.body.appendChild(oH);
(2).createTextNode()
功能：创建一个文本节点
用法：var oTxt = document.createTextNode("我是一级标题")；
oH.appendChild(oTxt)
结果：页面出现“我是一级标题”
(3).createAttribute()
功能：创建属性节点
2.插入节点
（1）insertBefore(新节点，插在哪个元素之前)
<div id="box" ><div>
var oDiv = document.getElementById("box");
var oH1 = document.createElement("h1");
var oTxt = document.createTextNode("一级标题");
oH1.appendChild(oTxt);
document.body.insertBefore(oH1,oDiv);
（2）appendChild()，向指定节点的子节点列表末尾追加新的节点
3.替换节点
replaceChild(newNode, oldNode)
功能：用新节点替换某个子节点。
用法：vat oTxt1 = document.createTectNode("我是一个新的一级标题")；
oH.replaceChild(oTxt1,oTxt) //替换节点
4.删除节点
.父节点.removeChild(nodeChild):删除节点
如：document.body.removeChild(oH) //移除子节点
5.克隆(复制)节点
cloneNode() 需要被复制的节点.cloneNode(true/false)
功能：创建指定节点的副本
用法1：参数为true时，复制当前节点及其子节点，参数为false时，只复制当前节点
var oH2 = oH.cloneNode();//只克隆指定节点，不包含节点内容
document.body.appendChild(oH2);
var oH3 = oH.cloneNode(true); //克隆指定节点，包含节点内容
document.body.appendChild(oH3)
三 属性操作:对于className，和name。不能直接更改，只能用attribute
1.查找属性：
getAttribute()
定义：获取特定元素节点属性(由程序员自己给标签添加的属性)的值
特点：直接使用自定义的属性名来获取自定义属性时，IE最新版本不支持，其他浏览器不支持，因此要采用这个方法来访问。
用法：oBox.getAttribute("name") //name是表单中的属性，如果设置oBox.class=name,div中的name不识别,
只能用oBox.getAttribute("name")来获取，class是保留字，也只能用oBox.getAttribute("class")
结果:打印出name的属性值
2.更改属性：
setAttribute()
功能：创建或改变元素节点的属性
用法：
oBox.setAttribute("id","list");
结果：HTML中id="box"这个属性名变为id="list"
oBox.setAttribute("name","beijng");
结果：HTML中增加了name="beijing"这个属性和属性名
3.删除属性：
removeAttribute
功能：删除元素节点的指定属性
用法：
oBox.removeAttribute("id")
结果：id这个属性和属性值不见了
节点(node)
HTML文档中所有的内容都是节点
获取元素中所有子集节点：
var oBox=document.getElementById("box");
console.log(oBox.children)
结果：<strong>当升科技</strong>
种类：元素（标签）节点，文本节点，属性节点
元素节点：strong/div等,nodeType返回值是1 特有children属性
增：无中生有
var div=document.creatElement("div")
div.innerHTML="hello world";
div.className="active";
document.body.append(div)//这样是放在当前节点的最后，script后面
oBox.append(div)//放在oBox里
删：oBox.remove();
结果：oBox整个不存在
改：
oBox.children[0].outerHTML="<strong>返回顶部</strong>"
//改变当升科技为返回顶部
属性节点:attribute获取节点属性(属性的增删改查)，nodeType返回值是2
注：attribute方法属于DOM方法，必须有DOM前缀，如oBox
查：getAttribute()
定义：获取特定元素节点属性(由程序员自己给标签添加的属性)的值
特点：直接使用自定义的属性名来获取自定义属性时，IE最新版本不支持，其他浏览器不支持，因此要采用这个方法来访问。
用法：oBox.getAttribute("name") //name是表单中的属性，如果设置oBox.class=name,div中的name不识别,只能oBox.getAttribute("name")来获取，
class是保留字，也只能用oBox.getAttribute("class")
结果:打印出name的属性值
改：setAttribute()
oBox.setAttribute("id","list");
结果：HTML中id="box"这个属性名变为id="list"
oBox.setAttribute("name","beijng");
结果：HTML中增加了name="beijing"这个属性和属性名
删：removeAttribute()
oBox.removeAttribute("id")
结果：id这个属性和属性值不见了
案例
获取元素节点中的所有属性节点
console.log(oBox.attributes) //属性节点
结果：NamedNodeMap{0:class,1:id,2:data-id,length:3} //获取第一个元素节点
console.log(oBox.attributes[1])
结果：id="box"
获取第一个属性的返回节点类型
console.log(oBox.attributes[1].nodeType)
结果：2 //属性节点，返回值为2
获取第一个属性的属性值
console.log(oBox.attributes[1].nodeValue)
结果：box
文本节点 ：text 换行符+缩进符，nodeType返回值是3
删除文本节点：父节点.removeChild(子节点)
属性：
nodeType 返回节点的类型,适用于所有节点，获取节点类型
console.log(document.nodeType);返回的是数字 ，给逻辑看
1. 元素节点;
2. 属性节点;
3. 表示文本节点;
8. 注释节点;
9. document节点;
nodeName 返回英文字符串节点类型; => 给人类看的;
console.log(oBox.childNodes[i].nodeName)
结果：#text STRONG #text
nodeValue 属性值
console.log(oBox.attributes[1])
结果：id="box" //获取第一个元素节点
console.log(oBox.attributes[1].nodeValue)
结果：box
若有任何错误，还望 指正
