脚本化文档DOM总结
脚本化文档DOM
1.选取文档元素
1:document.getElementById();通过ID选取文档元素
2：document.getElementsByName();通过名字选取文档元素
3：document.getElementsByTagName();通过标签选取元素
2.文档结构和遍历
Document对象，它的Element对象和文档中表示的文本的Text对象都是Node对象。Node定义的几个属性：
1：parentNode:该节点的父节点
2：childNodes:该节点的子节点，是一个数组对象（NodeList对象）
3：firstChild、lastChild：该节点的子节点的第一个和最后一个，如果没有子节点则为NUll
4：nextSibling、previousSibling：该节点的的兄弟节点的前一个节点和后一个节点，具有相同父节点的二个节点为兄弟节点，节点的顺序反映了它们在文档中出现的顺序，这二个属性节点之间以双向链表的形式连接起来。
5.nodeType:该节点的类型：
9代表Document节点；
1代表Element节点；
3代表Text节点；
8代表Comment节点；
11代表DocumentFrament节点；
6.nodeValue:Text节点和Comment节点的文本内容；
7.nodeName:元素的标签名，以大写字母形式表示；
2.属性
a) getAttribute();
b) setAttribute();
c) Document.body.attribute[0];
d) Docuemnt.body.attribute.bgColor;
e) Document.body.attribute["onload"];
3.作为纯文本的元素内容
a) textContent;
b) innerText;
c) innerHTML
4.创建、插入、删除节点
a) 元素节点：document.createElement("<script>");
b) Text节点：document.createTextNode("text node content");
c) 插入节点：parent.appendChild(child); node.insertBefor();
d) 注：在该节点后面添加一个节点：先获取一个nextSibling对象，然后中在调用insertBefor()；
5.删除和替换节点
a) n.parentNode.removeChild(n);
b) n.parentNode.replaceChild(docuemnt.createTextNode("[redacted]"),n);第一个是新节点，第二个是代替节点
6.DocumentFragment作为一个临时的容器，做一个暂时存储的Docuemnt
7.文档坐标和视口坐标
a) scrollLeft：
b) scrollTop:
c) innerWidth innerHeight 是IE9以上的版本支持
d) clientWidht clientHeight 是IE所有浏览器都支持
e) Var box = e.getBoundingClientRect(); 有四个属性left right top bottom
f) Var offsets = e.getScrollOffsets(); 有二个属性 x y;
8.元素尺寸、位置 和溢出信息
a) offsetWidth offsetHeight offsetLeft offsetTop offsetParent
b) clientWidth clientHeight clientLeft clientTop
c) scrollWidth scrollHeight scrollLeft scrollTop