HTML DOM概念及相关操作

1.DOM：
文本对象模型DOM（Document Object Modal）当页面在加载时，浏览器为页面生成DOM，被构造为对象的树，倒立的树。
从编程角度看，DOM是针对HTML和XML的API（Application Programing Interface）应用程序接口，js同时通过操作DOM可以实现添加、移除、修改页面元素.
2.节点类型：
标签是一种节点类型
DOM里都叫节点
节点里包含了标签 注释 文本 doctype 等在内的多种组合。
1. 标签节点
2.文本节点
3.注释节点
通过nodeType属性，可以知道节点的类型
// 元素节点类型获取
alert(oDiv.nodeType); // 1
// 文本节点类型获取
alert(oDiv.firstChild.nodeType); // 3
nodeName属性规定了节点的名称
元素节点的nodeName与标签名相同，并且是大写的
文本节点的nodeText是#text
nodeValue属性规定了节点的值
元素节点的nodeValue是null或是undefined
文本节点的nodeValue是文本本身
属性节点的nodeValue是属性值
3.节点关系：
DOM节点的属性：用于遍历DOM节点，找对应的DOM节点
childNodes: 所有子节点（包含空格 回车 tab 等空白符（在IE浏览器里不包含这些））；
children：所有元素子节点（不包含文本节点）
parentNode: 父亲节点
firstChild：第一个子节点
lastChild：最后一个子节点
nextSibling：下一个兄弟节点
previousSibling：上一个兄弟节点
firstElementChild：第一个元素子节点
lastElementChild：最后一个元素子节点
nextElementSibling：下一个元素兄弟节点
lastElementSibling：上一个元素兄弟节点
4.节点操作：调用DOM给你提供的方法
增（添加）首先createElement创建一个节点，然后再append一个节点，这样两步完成节点的添加
删（移除）removeChild(div) remove(div)
该（替换）replaceChild(newNode, oldNode)  newNode 替换到 oldNode
查（）document.。。。。
克隆 cloneNode(布尔值) 方法，可以创建指定的节点的精确拷贝，他能拷贝所有的属性和值，如果参数是true，他将复制当前节点的所有子孙的节点，否则，它只复制当前节点。
5.属性操作
setAttribute(name,value)设置节点上name属性的值为value
getAttribute(name) 获取节点上属性为name的值
removeAttribute(name) 移除节点上name属性的值
// 获取非行间样式
// 参数1：想获取哪个元素
// 参数2：默认写false，没什么用
// [] 里面写你想获取的属性字符串