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
树上的节点有几种类型?
三种类型:
节点类型 | 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);