JavaScript DOM对象

HTML DOM Document 对象 http://www.w3school.com.cn/jsref/dom_obj_document.asp

什么是DOM？    Document Object Model

window 浏览器窗口

document   把整个网页看做一个对象

通过操作整个对象，来控制改变网页的内容

document.write();

和window对象的关系

window.document

window.document.body

什么是DOM树？？

网页文档的树形结构

DOM元素？ DOM对象？ DOM节点？ 指的是同一个东西吗？

YES

DOM元素的基本操作 （增 、删、改、查）

查询---------

document.getElementById()    通过ID号查找元素

document.getElementsByTagName()    通过标签名称查找元素

document.getElementsByName()      通过name属性来查找元素

document.getElementsByClassName()   通过class属性来查找元素、设置某元素的class时：某元素.className="active"

IE8以下 不支持byClassName方法，

兼容性处理如下：

增---------

document.createElement()    创建一个DOM元素        (document.createTextNode();//插入内容中的标签不会被解析)

box.appendChild(target)     将target元素追加到box元素的内部，此时浏览器才能正确加载并显示元素

parent.insertBefore(newnode, oldnode)    将newnode元素插入到parent元素的内部，同时放在oldnode元素的前面

node.cloneNode(deep)//克隆一个节点，
deep设置为 true，如果您需要克隆节点及其属性，以及后代；设置为 false，如果您只需要克隆节点及其后代

删除---------

parent.removeChild(child)    将child元素删除，parent是child元素的父亲

node.remove();

改------------

box.style.background = "red";   

如何操作自定义属性？

获取一个自定义属性的值（在IE8中可box.index直接取）

box.getAttribute("index")

修改~~~

box.index = 99;

box.setAttribute("index",99) //会在html中生成属性index

在js中 直接定义box.index=i   box.index   存取index值，但不会在html标签中生成index属性

若非行内样式 doc.style.height  为空,此时

对于非行内样式的操作（可修改不可读取）

window.getComputedStyle(obj, null).top   //属性只读  不兼容IE

obj.getCurrentStyle().top //IE

树上的节点有几种类型？

三种类型：

DOM树上节点类型

节点类型	nodeType值
元素节点	1
属性节点	2
文本节点	3

---

---

高级操作----查

parentNode   //获取父节点

childNodes    //获取所有子节点  IE7及以下自动过滤文本节点

children   //获取所有子标签(非W3C标准，但几乎所有浏览器都支持)

previousSibling  前一个兄弟节点

nextSibling        后一个兄弟节点

previousElementSibling     前一个兄弟元素（非W3C标准）

nextElementSibling           后一个兄弟元素（非W3C标准）

如何忽略空白节点？  

function getElementChildren(obj){

     var list = obj.childNodes;

       var res = [];

     for(var i=0; i<list.length; i++){

          if(list[i].nodeType == 1 ){

               res.push(list[i]);     

          }

     }

       return res;

}

高级操作----位置、大小计算  http://www.2cto.com/kf/201507/413536.html

offsetWidth  (（content+padding+border）)    /  clientWidth (padding+width-滚动条）     计算元素的 可视 宽度

offsetHeight （只读）/  clientHeight     计算元素的 可视 高度

innerWidth  内部可视宽度        

innerHeight

 在Google中 window.innerWidth=window.clientWidth，在火狐中window.clientWidth包括右边滚动条

ele.offsetLeft     计算元素相对于参照物的位置(有定位的父元素)  offsetLeft = left + marginLeft

ele.offsetTop     计算元素相对于参照物的位置(有定位的父元素)

//获取参照物父元素

offsetParent       获取参照物父元素，获取有定位的父元素

以下为获取页面元素相对于窗口的位置：

			function offsetPage(obj){
				var _left=0;
				var _top=0;
				while(obj){
					_left+=obj.offsetWidth;
					_top+=obj.offsetHeight;
					obj=obj.offsetParent;
				}
				return {"left":_left,"top":_top};
			}

计算一个元素在页面的绝对位置？

var _left=0,_top=0;

while(obj){

     _left += obj.offsetLeft;

     _top += obj.offsetTop;

       obj = obj.offsetParent;

}

li.scrollIntoView(); //滚动到可见区域

高级操作----改

innerHTML  和  innerText  区别？

<ul id="box">xyz

     <li>a</li>

     <li>b</li>

     <li>c</li>

     <li>d</li>

</ul>

box.innerHTML的结果是：

xyz

     <li>a</li>

     <li>b</li>

     <li>c</li>

     <li>d</li>    //读取标签及文本内容

box.innerHTML(".......")插入的标签会被浏览器编译 

box.innerText的结果是：

xyz  a  b  c  d  //只读文本内容

box.innerText(".........") 插入的仅时是文本，标签不会被浏览器解析

innerHTML 和 nodeValue  区别？

文本节点

var txt = document.createTextNode("nihao");

document.body.appendChild(txt);

文档碎片（与计算机的 缓存的概念类似，减少IO次数， 保护硬盘），

（每次使用dom操作时会使整个页面产生热reflow、repain,其中的开销是极大的）

document.createDocumentFragment()

缓存可以提高操作效率

文档碎片测试

var t1 = new Date().getTime();

for(var i=0; i<10000; i++) {

    var oP = document.createElement("p")

    oP.innerHTML = "a";

    document.body.appendChild(oP);

}

var t2 = new Date().getTime();

console.log(t2-t1);

var t3 = new Date().getTime();

var frag = document.createDocumentFragment();

for(var i=0; i<10000; i++) {

    var oP = document.createElement("p")

    oP.innerHTML = "a";

    frag.appendChild(oP); //appendChild 是个异步方法

}

document.body.appendChild(frag);

var t4 = new Date().getTime();

console.log(t4-t3);