脚本化文档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

<!--EndFragment-->