訪問和修改DOM元素
修改DOM元素的樣式，造成重繪和重排版
通過DOM事件處理用戶響應(yīng)
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');//獲取一組元素
獲取子節(jié)點：
obj.children;//獲取一組元素;所以的子元素;
obj.childNodes;//獲取一組元素;所有的子元素(包括文本元素,注釋...)
需要使用nodeType屬性過濾一下標簽元素值為1;文本元素值為3;注釋為8
獲取父節(jié)點
//結(jié)構(gòu)上的父級
obj.parentNode;//獲取一個元素
//定位上的父級
obj.offsetParent;//獲取一個元素
獲取前一個兄弟節(jié)點:
obj.previousSibling;//獲取一個元素;高版本瀏覽器會獲取文本元素;低版本(IE8-)不會
//兼容寫法:
oPrev = obj.previousElementSibling || obj.previousSibling;
獲取下一個兄弟節(jié)點:
obj.nextSibling;
//兼容寫法
oNext = obj.nextElementSibling || obj.nextSibling;
獲取首節(jié)點(同樣需兼容):
oFirst = obj.fristElementChild || obj.firstChild;
//另一種獲取方式:
oFirst = obj.children[0];//這中寫法要確保他有子元素,沒有的話會報錯;
獲取尾節(jié)點(兼容):
oLast = obj.lastElementChild || obj.lastChild;
//另一種獲取方式:
oLast = obj.children[obj.children.length-1];//同樣需要確保有子元素;
創(chuàng)建DOM元素:
document.createElement('標簽名');
添加DOM元素:
//在后面添加子元素
obj.appendChild(obj對象);
//在前面添加:
obj.insertBefore(插入子元素對象,那個子對象之前);
刪除DOM元素:
//在父級內(nèi)刪除一個子元素;
oParent.removeChild(obj);
獲取滾動條滾動距離:
//橫向滾動距離
scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
//縱向滾動距離
scrollTop = document.documentElement.scrollTop || document.body.scrollTop
獲取可視區(qū)寬高
//獲取可視去寬度
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];
}
