访问和修改DOM元素
修改DOM元素的样式，造成重绘和重排版
通过DOM事件处理用户响应
DOM--文档对象模型
一 访问DOM元素和插入删除DOM元素：
//高版本浏览器(IE7以下包括IE7)获取元素 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素,对于多个选择器，使用逗号隔开;
obj.querySelectorAll('css选择器');//获取一组
obj.querySelector('css选择器');获取一个(一类的第一个)
通过ID获取：
<div id="box"></div>
var oDiv = document.getElementById('box');//获取的是一个元素
通过标签名获取： document.getElementsByTagName('标签名')
<div></div>
<div></div>
var aDiv = document.getElementsByTagName('div');//获取的是一组元素
通过类名获取（存在兼容问题IE低版本不兼容）：
<div class="box"></div>
<p class="box"></p>
var oBox = document.getElementsByClassName('box');//同样获取的是一组元素；
//类名获取元素兼容写法：
function getByClass(obj,value){
if(obj.getElementsByClassName){ //高级浏览器支持getElementsByClassName；
return obj.getElementsByClassName(value);
}else{ //兼容低版本IE；
var arr = [];
var aElt = obj.getElementsByTagName('*');
for(var i=0; i<aElt.length; i++){
var arr1 = aElt[i].className.split(' ');
if(findInArray(arr1,value)){
arr.push(aElt[i]);
}
}
return arr;
}
}
//上面获取元素可以写成：
getByClass(document,'box');
通过name获取：
<input type="text" name="username" />
<input type="text" name="username" />
var aTxt = document.getElementsByName('username');//获取一组元素
获取子节点：
obj.children;//获取一组元素;所以的子元素;
obj.childNodes;//获取一组元素;所有的子元素(包括文本元素,注释...)
需要使用nodeType属性过滤一下标签元素值为1;文本元素值为3;注释为8
获取父节点
//结构上的父级
obj.parentNode;//获取一个元素
//定位上的父级
obj.offsetParent;//获取一个元素
获取前一个兄弟节点:
obj.previousSibling;//获取一个元素;高版本浏览器会获取文本元素;低版本(IE8-)不会
//兼容写法:
oPrev = obj.previousElementSibling || obj.previousSibling;
获取下一个兄弟节点:
obj.nextSibling;
//兼容写法
oNext = obj.nextElementSibling || obj.nextSibling;
获取首节点(同样需兼容):
oFirst = obj.fristElementChild || obj.firstChild;
//另一种获取方式:
oFirst = obj.children[0];//这中写法要确保他有子元素,没有的话会报错;
获取尾节点(兼容):
oLast = obj.lastElementChild || obj.lastChild;
//另一种获取方式:
oLast = obj.children[obj.children.length-1];//同样需要确保有子元素;
创建DOM元素:
document.createElement('标签名');
添加DOM元素:
//在后面添加子元素
obj.appendChild(obj对象);
//在前面添加:
obj.insertBefore(插入子元素对象,那个子对象之前);
删除DOM元素:
//在父级内删除一个子元素;
oParent.removeChild(obj);
获取滚动条滚动距离:
//横向滚动距离
scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
//纵向滚动距离
scrollTop = document.documentElement.scrollTop || document.body.scrollTop
获取可视区宽高
//获取可视去宽度
clientWidth = document.documentElement.clientWidth;
//获取可视去高度
clientHeight = document.documentElement.clientHeight;
获取物体的宽度高度:
//宽度
obj.offsetWidth;
//高度
obj.offsetHeight
获取物体距离相对定位父级的top和left
//left
obj.offsetLeft;
//top
obj.offstTop
获取样式:
//IE支持通过obj.currentStyle['样式名']获取;高版本支持通过getComputedStyle(obj,false)['样式名']获取,需要兼容一下下;
function getStyle(obj,name){
return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj,false)[name];
}
