JavaScript DOM对象
来源:互联网 发布:布罗代尔 知乎 编辑:程序博客网 时间:2024/05/20 20:46
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
树上的节点有几种类型?
三种类型:
高级操作----查
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);
阅读全文
0 0
- JavaScript DOM对象结构图
- javascript,XML DOM,对象
- JavaScript文档对象(DOM)
- JavaScript HTML DOM 对象
- javascript的dom 对象
- javascript的dom 对象
- javascript之Dom对象
- javascript中的dom对象
- javascript DOM对象
- javascript的dom 对象
- javascript中的Dom对象
- JavaScript HTML DOM 对象
- javascript之DOM对象
- JavaScript DOM对象控制
- JavaScript对象dom
- JavaScript (2)dom对象
- JavaScript DOM对象
- javascript之DOM对象
- 缓存初探
- HDU 1166 树状数组&&线段树模板1
- python protoc
- antd mobile(五)react-router界面切换动画
- 树的重量(树+枚举)
- JavaScript DOM对象
- python3--字典
- iOS 怎样获得设备及应用相关信息
- UVa --- 11210 中国麻将【暴力深搜】
- apt-get下载、安装的软件在哪里
- HDU
- zoj 1081 Points Within (判断点是否在多边形内)
- htpasswd.cgi 网页远程修改gerrit HTTP认证的密码文件
- 唯美词云