1、解析过程
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内存中DOM上的元素节点，然后操作的时候 修改的是该元素的属性，
2、DOM（文档对象模型）
document是文档对象模型的一部分
DOM是一个复合的数据类型
3、DOM的数据结构（树状）
4、HTML的组成部分为节点（Node）
在html当中一切都是节点
每一个html标签都是一个元素节点。（标签）
标签中的文字则是文字节点。（文本）
标签的属性的属性节点。（属性）
5、DOM节点的获得
通过ID找到html元素
document.getElementById("id名称");
通过标签名找到html元素
document.getElementsByTagName("div")
通过类名找到html元素
document.getElementsByClass("类名")；
标签数组= document.getElementsByTagName("div"); 通过标签名获得标签数组
标签数组= document.getElementsByClassName("a");通过类名获得标签数组
特殊情况：数组中的值只有1个。
document.getElementsByTagName("div")[0];取数组中第一个元素
document.getElementsByClassName("a")[0];取数组中第一个元素
6、DOM访问关系（节点的获得）
节点的访问关系，是以属性的方式存在的。
DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系ui它们进行访问。
7、父节点（parentNode）
调用者就是节点：一个节点只有一个父节点。调用方式就是节点parentode
8、兄弟节点
Sibling:兄弟的意思
Next:下一个的意思
Previous:前一个的意思
nextSibling:调用者是节点。IE678中指一个元素节点（标签）。在火狐谷歌IE9之后指的是下一个节点（包括空文档和换行节点）。
nextElementSibling:在火狐谷歌IE9都指的是下一个元素节点。
总结：在IE678中用nextSibling，在火狐谷歌以后用nextElementSibling
下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling
previouSibing:调用者是节点。IE678中指前一个元素节点（标签），在火狐谷歌IE9以后指的是前一个元素节点（包括空文档和换行节点）
previousElementSibling:在火狐谷歌IE9都指的是前一个元素节点
总结：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling。
下一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling
9、单个子节点
firstChild:调用者是节点。IE678中指前一个元素节点（标签），在火狐谷歌IE9以后指的是前一个元素节点（包括空文档和换行节点）
firstElementChild:在火狐谷歌IE9都指的第一个元素节点。
第一个子节点=父节点.firstElementChild || 父节点.firstChild
lastChild:调用者是父节点。IE678中指最后一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是最后一个节点（包括空文档和换行节点）。
lastElementChild：在火狐谷歌IE9都指的最后一个元素节点。
第一个子节点=父节点.lastElementChild|| 父节点.lastChild
10、所有子节点
childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点 （他还是W3C的亲儿子 ）
火狐 谷歌等高本版会把换行也看做是子节点
nodeType==1时才是元素节点(标签)
nodeType == 1 表示的是元素节点 记住 元素就是标签
nodeType == 2 表示是属性节点 了解
nodeType == 3 是文本节点 了解
案例 ：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
</head>
<body>
<p id="demo">点我试试body元素节点的相关信息</p>
<button onclick="myFuntion()">试试就试试</button>
<script>
function myFunction(){
var txt="";
var c=document.body.childNodes;
for(i<0;i<c.length;i++){
txt=txt+c[i].nodeName+"<br>";
};
var x=document.getElementById("demo");
x.innerHTML=txt;
}
</script>
<p><b>注释：</b>元素中的空格被视为文本，而文本被视为节点。</p>
</body>
</html>
children：非标准属性，它返回指定元素的子元素集合。
但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。
children在IE6/7/8中包含注释节点
在IE678中，注释节点不要写在里面。
子节点数组 = 父节点.children; 用的最多
节点自己.parentNode.children[index];随意得到兄弟节点。
function siblings(elm) {
var a = [];
var p = elm.parentNode.children;
for(var i =0,pl= p.length;i<pl;i++) {
if(p[i] !== elm) a.push(p[i]);
}
return a;
}
定义一个函数。必须传递自己。定义一个数组，获得自己的父亲，在获得自己父亲的所有儿子（包括自己）。遍历所哟与的儿子，只要不是自己就放进数组中。
DOM节点操作
节点的访问关系都是属性。节点的操作都是函数或者方法。
创建节点
使用方法是这样的document.createElement();
新的标签（节点） = document.createElement(“标签名”);
插入节点
使用方法： 父节点.appendChild();
父节点.appendChild(新节点); 父节点的最后插入一个新节点
使用方法：父节点.insertBefore(要插入的节点，参考节点)；
父节点.insertBefore(新节点,参考节点)在参考节点前插入;
如果参考节点为null，那么他将在节点最后插入一个节点。
删除节点
用法：用父节点删除子节点。
父节点.removeChild（子节点）；必须制定要删除的子节点
节点自己删除自己：
不知道父级的情况下，可以这么写：node.parentNode.removeChild(node)
复制节点（ oldNode.cloneNode（true） ）
想要复制的节点调用这个函数cloneNode()，得到一个新节点。 方法内部可以传参，入股是true，深层复制，如果是false，只复制节点本身。
新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点
用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）
节点属性
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)
注意：IE6、7不支持。
调用者：节点。 有参数。 没有返回值。
网友评论