DOM的屬性和方法
特點(diǎn):凡是好用的都是不兼容的
1.DOM的定義
“W3C 文檔對象模型 （DOM） 是中立于平臺和語言的接口类浪，它允許程序和腳本動態(tài)地訪問和更新文檔的內(nèi)容席爽、樣式和結(jié)構(gòu)∶龉眩”
HTML Dom是關(guān)于如何增,刪,改,查 HTML 元素的標(biāo)準(zhǔn)霸株。
2.DOM節(jié)點(diǎn)
2.1節(jié)點(diǎn)childNodes,parentNode,offsetParent
childNodes //所有類型的子節(jié)點(diǎn) 獲取的都是親兒子
children //只獲取元素節(jié)點(diǎn) 親兒子
parentNode //獲取元素的父節(jié)點(diǎn),親生父親
//HTML
<ul id="test">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
//JS
var test = document.getElementById("test");
alert(test.childNodes.length); //chrome下結(jié)果為7,IE9以下結(jié)果為3
//在chrome下將空的文本節(jié)點(diǎn),也算在內(nèi)容
nodeType //節(jié)點(diǎn)的類型
1.為元素節(jié)點(diǎn)
2.為文本節(jié)點(diǎn)
3.為屬性節(jié)點(diǎn)
var test = document.getElementById("test");
var childs =test.childNodes;
for(key in childs){
if(childs[key].nodeType==1){
childs[key].style.background="red";
}
}
//parentNode
//HTML
/*點(diǎn)擊a,對應(yīng)的li隱藏*/
<ul>
<li>蘋果<a href="#">隱藏</a></li>
<li>梨子<a href="#">隱藏</a></li>
<li>香蕉<a href="#">隱藏</a></li>
<li>菠蘿<a href="#">隱藏</a></li>
</ul>
//JS
var aTags = document.getElementsByTagName("a");
for(var i =0;i<aTags.length;i++){
aTags[i].onclick=function () {
this.parentNode.style.display="none";
return false;
}
}
offsetParent //獲取給了定位元素的父級
offsetLeft //返回元素的水平偏移位置。
offsetTop //返回元素的垂直偏移位置芭届。
offsetWidth //返回元素的寬度
offsetHeight //返回元素的高度
2.2節(jié)點(diǎn)childNodes,parentNode,offsetParent
//可用document.all解決瀏覽器兼容性問題
if(document.all){
//IE下
}else{
//其他瀏覽器下
}
- 首尾子節(jié)點(diǎn)
- 有兼容問題
firstChild //包含所有類型的節(jié)點(diǎn)
firstElementChild //IE9以下不兼容
lastChild //所有類型的節(jié)點(diǎn)
lastElementChild //IE9以下不支持
fistElementChild.png
- 兄弟節(jié)點(diǎn)
- 有兼容問題
nextSibling
nextElementSibling //IE9以下不支持
previousSibling
previousElementSibling //IE9以下不支持
<ul id="test">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var test = document.getElementById("test");
if(document.all){
test.firstChild.style.background="pink"
}else{
test.firstElementChild.style.background="pink"
}
</script>
3.操作元素的屬性
oDiv.style.display = "none";
oDiv.style["display"]="none";
oDiv.setAttribute("style","display:none");
<input type="text" id="input"/>
<button id="btn">改變</button>
<script>
var input = document.getElementById("input");
var btn = document.getElementById("btn");
btn.onclick=function () {
//input.value="hello world"
input.setAttribute("value","hello world")
}
</script>
3.1獲取,設(shè)置,刪除
getAttribute();
setAttribute();
removeAttribute();
4.用className選取元素
function getByClass(oParent,aclassName) {
var result=[];
var Eles = oParent.getElementsByTagName("*");
for(var i =0;i<Eles.length;i++){
if(Eles[i].className==aclassName){
result.push(Eles[i]);
}
}
return result;
}
