对节点的增删改查

查

查看元素节点
document代表整个文档
document.getElementById() //元素id 在Ie8以下的浏览器，不区分id大小写，而且也返回匹配name属性的元素

• getElementsByTagName() // 标签名
• getElementByName(); //，需注意，只有部分标签name可生效（表单，表单元素，img，iframe）
• getElementsByClassName() // 类名 -> ie8和ie8以下的ie版本中没有，可以多个class一起
• querySelector() // css选择器 在ie7和ie7以下的版本中没有
• querySelectorAll() // css选择器 在ie7和ie7以下的版本中没有

增

document.createElement();
document.createTextNode();
document.createComment();
document.createDocumentFragment();

插

PARENTNODE.appendChild();
PARENTNODE.insertBefore(a, b):

删

parent.removeChild();

替换

parent.replaceChild(new, origin);

节点的类型

元素节点 —— 1
属性节点 —— 2
文本节点 —— 3
注释节点 —— 8
document —— 9
DocumentFragment —— 11
获取节点类型 nodeType

节点的四个属性

nodeName
元素的标签名，以大写形式表示,只读
nodeValue
Text节点或Comment节点的文本内容,可读写
nodeType
该节点的类型，只读
attributes
Element 节点的属性集合
节点的一个方法 Node.hasChildNodes();

Element节点的一些属性

innerHTML
innerText(火狐不兼容) / textContent(老版本IE不好使)
Element节点的一些方法
ele.setAttribute()
ele.getAttribute();

document HTMLDocument Document的关系

 看如下操作:

见document的原型链上有HTMLDocument.prototype和Document.prototype

1. document表示文档对象，而它的构造函数是HTMLDocument
2. HTMLDocument.prototype.proto = Document.prototype
3. 因此，document和Document之间的关系就是：
   document继承自HTMLDocument.prototype,而HTMLDocument.prototype又继承自Document.prototype
4. head,body等标签直接继承自HTMLHeadElement.prototype，HTMLBodyElement.prototype等
5. HTMLDocument.prototype定义了一些常用的属性，body,head分别指代body，head标签
   document.body = ;
   document.head = ;
   Document.prototype上定义了documentElement属性，指代文档的根元素。
6. getElementById方法定义在Document.prototype上，即Element节点上不能使用。
7. getElementsByName方法定义在HTMLDocument.prototype上，即非html中的document以外不能使用(xml document,Element)
8. getElementsByTagName方法定义在Document.prototype 和 Element.prototype上
9. HTMLDocument.prototype定义了一些常用的属性，body,head,分别指代HTML文档中的标签。
10. Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，他总是指代元素
11. getElementsByClassName、querySelectorAll、querySelector在Document,Element类中均有定义

关于宽高

查看视口的尺寸

window.innerWidth/innerHeight
IE8及IE8以下不兼容
document.documentElement.clientWidth/clientHeight
标准模式下，任意浏览器都兼容
document.body.clientWidth/clientHeight
适用于怪异模式下的浏览器

查看元素的几何尺寸

domEle.getBoundingClientRect();
兼容性很好
该方法返回一个对象，对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标
height和width属性老版本IE并未实现
返回的结果并不是“实时的”

让滚动条滚动

window上有三个方法
scroll(),scrollTo(),scrollBy();
三个方法功能类似，用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置。
区别：scrollBy()会在之前的数据基础之上做累加。
eg：利用scrollBy() 快速阅读的功能

查看元素的尺寸

dom.offsetWidth，dom.offsetHeight

查看元素的位置

dom.offsetLeft, dom.offsetTop
对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。
dom.offsetParent
返回最近的有定位的父级，如无，返回body, body.offsetParent 返回null
eg：求元素相对于文档的坐标

js时间线

1、创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = ‘loading’。

2、遇到link外部css，创建线程加载，并继续解析文档。

3、遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。

4、遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。
对于async属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.write()）

5、遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。

6、当文档解析完成，document.readyState = ‘interactive’。

7、文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意与async的不同,但同样禁止使用document.write()）;

8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。

9、当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = ‘complete’，window对象触发load事件。

10、从此，以异步响应方式处理用户输入、网络事件等。