DOM : Document Object Model 文檔對象模型
文檔：html頁面
文檔對象：頁面中元素
文檔對象模型：定義 為了能夠讓程序(js)去操作頁面中的元素
DOM會把文檔看作是一棵樹，同時定義了很多方法來操作這棵數(shù)中的每一個元素（節(jié)點）
DOM節(jié)點
getElementById
getElementByTagName
document
document.body
1.childNodes和children
元素.childNodes :只讀 屬性 子節(jié)點列表集合
標(biāo)準(zhǔn)下:包含文本和元素類型的節(jié)點,也會包含非法嵌套的子節(jié)點
非標(biāo)準(zhǔn)下(ie9以下):包含元素類型的節(jié)點,ie7以下不包含非法嵌套子節(jié)點
childNodes只包含一級子節(jié)點,不包含后輩孫級以下的節(jié)點
不推薦使用
DOM節(jié)點類型有很多種 12種
元素.nodeType :只讀 屬性 當(dāng)前元素的節(jié)點類型
元素節(jié)點 nodeType 1
文本節(jié)點 nodeType 3
屬性節(jié)點 nodeType 2
元素.attributes : 只讀 屬性 屬性列表集合
oUl.attributes.length
name value nodeType
元素.children : 只讀 屬性 子節(jié)點列表集合
標(biāo)準(zhǔn)下:只包含元素類型節(jié)點
非標(biāo)準(zhǔn)下:只包含元素類型的節(jié)點
2.firstChild,lastChild,nextSibling,previousSibling
元素.firstChild : 只讀 屬性 第一個子節(jié)點
標(biāo)準(zhǔn)下:firstChild包含文本類型的節(jié)點
非標(biāo)準(zhǔn)下:只包含元素節(jié)點
元素.firstElementChild :只讀 屬性 標(biāo)準(zhǔn)下獲取第一個元素類型的子節(jié)點
if ( oUl.firstElementChild ) {
oUl.firstElementChild.style.background = 'red';
} else {
oUl.firstChild.style.background = 'red';
}
var oFirst = oUl.firstElementChild || oUl.firstChild;
oFirst.style.background = 'red';
問題?ul沒有子節(jié)點,返回文本節(jié)點oUl.firstChild,報錯
最好的做法
if ( oUl.children[0] ) {
oUl.children[0].style.background = 'red';
} else {
alert('沒有子節(jié)點可以設(shè)置')
}
元素.lastChild || 元素.lastElementChild 最后一個子節(jié)點
var oLast = oUl.lastElementChild || oUl.lastChild;
oLast.style.background = 'yellow';
元素.nextSibling || 元素.nextElementSibling 下一個兄弟節(jié)點
var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
oNext.style.background = 'blue';
元素.previousSibling || 元素.previousElementSibling 上一個兄弟節(jié)點
var oPrev = oLast.previousElementSibling || oLast.previousSibling;
oPrev.style.background = 'orange';
<ul id="ul1">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
3.父節(jié)點parentNode和offsetParent
元素.parentNode
實例
<script>
window.onload = function() {
var aA = document.getElementsByTagName('a');
for (var i=0; i<aA.length; i++) {
aA[i].onclick = function() {
/*
元素.parentNode : 只讀 屬性 當(dāng)前節(jié)點的父級節(jié)點
*/
this.parentNode.style.display = 'none';
}
}
}
</script>
<body>
<ul id="ul1">
<li>11111 <a href="javascript:;">隱藏</a></li>
<li>22222 <a href="javascript:;">隱藏</a></li>
<li>33333 <a href="javascript:;">隱藏</a></li>
<li>44444 <a href="javascript:;">隱藏</a></li>
</ul>
</body>
元素.offsetParent :只讀 屬性 當(dāng)前元素最近的有定位的父節(jié)點
如果沒有定位父級,默認(rèn)是body
ie7一下,如果當(dāng)前元素沒有定位,默認(rèn)是body,如果自身加了定位屬性,父級是html,或者觸發(fā)haslayout的上級元素
<script>
window.onload = function() {
var oDiv3 = document.getElementById('div3');
//parentNode : 父節(jié)點
//alert( oDiv3.parentNode.id );
/*
元素.offsetParent : 只讀 屬性 離當(dāng)前元素最近的一個有定位屬性的父節(jié)點
如果沒有定位父級抚岗，默認(rèn)是body
ie7以下良蛮，如果當(dāng)前元素沒有定位默認(rèn)是body帮寻，如果有定位則是html
ie7以下旺订，如果當(dāng)前元素的某個父級觸發(fā)了layout弄企，那么offsetParent就會被指向到這個觸發(fā)了layout特性的父節(jié)點上
*/
//layout
/*alert( document.getElementById('div2').currentStyle.hasLayout );*/
alert( oDiv3.offsetParent.id );
}
</script>
<body id="body1">
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
4.元素偏移位置
元素.offsetLeft[Top] : 只讀 屬性 當(dāng)前元素到定位父級的距離（偏移值）
到當(dāng)前元素的offsetParent的距離
如果沒有定位父級
offsetParent -> body
offsetLeft -> html
如果有定位父級
ie7以下：
如果自己沒有定位，那么offsetLeft[Top]是到body的距離
如果自己有定位区拳，那么就是到定位父級的距離
其他：到定位父級的距離
5.元素寬高
style.width 行間值
clientWidth 可視寬度 width+padding
offsetWidth 占位寬 可視寬+border
6.獲取元素相對頁面位置
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style>
div {padding: 40px 50px;}
#div1 {background: red;position: relative;}
#div2 {background: green; position: relative;}
#div3 {background: orange; position: relative;}
</style>
<script>
window.onload = function() {
var oDiv3 = document.getElementById('div3');
//alert( oDiv3.offsetLeft );
/*var iTop = 0;
var obj = oDiv3;
while (obj) {
alert( obj.id + ' : ' + obj.offsetTop );
iTop += obj.offsetTop;
obj = obj.offsetParent;
alert(obj + ' : ' + obj.id);
}
alert( iTop );*/
alert( document.body.offsetParent );//null
var p = getPos( oDiv3 );
//alert( p.top );
function getPos(obj) {
var pos = {left:0, top:0};
while (obj) {
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;
}
return pos;
}
}
</script>
</head>
<body id="body1">
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
7.操作元素屬性的方式
otext.value 訪問 賦值 value不可以是變量
otext['value'] 可使用變量
元素.getAttribute() ;方法獲取指定元素制定屬性值
otext.getAttribute('value') ;
元素.setAttribute() ;方法 給指定元素指定的屬性設(shè)置值
otext.setAttribute('value','hello') ;
元素.removeAttribute(屬性名稱) 移除元素屬性
區(qū)別
1.用.和[]無法操作元素自定義屬性,非標(biāo)準(zhǔn)下
getAttribute()可以操作自定義屬性
.[]src完整路徑
getAttribute(src)標(biāo)準(zhǔn)下是src設(shè)置值,ie7是絕對路徑值
oImg.style.getAttribute('width')標(biāo)準(zhǔn)下報錯
8.元素的動態(tài)創(chuàng)建
innerHTML開銷大,效率
document.createElement('li')
document.createElement(標(biāo)簽名稱); 創(chuàng)建元素
父級.removeChild(要刪除的元素); 刪除元素
父級.appendChild(要添加的元素) 方法 追加子元素
父級.insertBefore(新的元素拘领，被插入的元素) 方法 在指定元素前面插入一個新元素
在ie下如果第二個參數(shù)的節(jié)點不存在，會報錯
在其他標(biāo)準(zhǔn)瀏覽器下如果第二個參數(shù)的節(jié)點不存在樱调，則會以appendChild的形式進行添加
if ( oUl.children[0] ) {
oUl.insertBefore( oLi, oUl.children[0] );
} else {
oUl.appendChild( oLi );
}
父級.replaceChild(新節(jié)點约素，被替換節(jié)點) 替換子節(jié)點
appendChild,insertBefore,replaceChild都可以操作動態(tài)創(chuàng)建出來的節(jié)點，也可以操作已有節(jié)點
