溫馨提示×
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
這篇文章將為大家詳細講解有關JavaScript中怎么實現(xiàn)DOM操作，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
1、元素節(jié)點、文本節(jié)點
實例01
html
<body> <ulid="ul1"> 文本節(jié)點1 <li></li> 文本節(jié)點2<li></li> 文本節(jié)點3<li></li> 文本節(jié)點4<li></li> 文本節(jié)點5<li></li> 文本節(jié)點6</ul> <!--文本節(jié)點adsasda--> <!--<span>元素節(jié)點 qeqweq</span>--> </body>
javascript
<script>
window.onload=function(){
varoUl=document.getElementById('ul1');
alert(oUl.childNodes.length);
};
</script>
2、nodeType屬性
| 常見節(jié)點 | nodeType值 |
| 元素節(jié)點 | 1 |
| 屬性節(jié)點 | 2 |
| 文本節(jié)點 | 3 |
實例02
<script>
window.onload=function(){
varoUl=document.getElementById('ul1');
for(vari=0;i<oUl.childNodes.length;i++){
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background='red';
}
}
};
</script>
3、children獲取元素節(jié)點
實例03
html代碼
<ulid="ul1"> <li> <!--子節(jié)點只算第一層的，在這里span是li的子節(jié)點，而不是ul的子節(jié)點--> <span>子節(jié)點</span> </li> <li></li> </ul>
javascript代碼
<script>
window.onload=function(){
varoUl=document.getElementById('ul1');
//children獲取元素節(jié)點
//alert(oUl.children.length);
for(vari=0;i<oUl.children.length;i++){
oUl.children[i].style.background='red';
}
};
</script>實例04
html代碼
<script>
window.onload=function(){
varoUl=document.getElementById('ul1');
alert(oUl.parentNode);
};
</script>javascript代碼
<script>
window.onload=function(){
varoUl=document.getElementById('ul1');
alert(oUl.parentNode);
};
</script>
實例05 父節(jié)點的應用
html代碼
<ulid="ul1"> <li>父節(jié)點1<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隱藏</a></li> <li>父節(jié)點2<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隱藏</a></li> <li>父節(jié)點3<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隱藏</a></li> <li>父節(jié)點4<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隱藏</a></li> <li>父節(jié)點5<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隱藏</a></li> <li>父節(jié)點6<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隱藏</a></li> <li>父節(jié)點7<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隱藏</a></li> </ul>
javascript代碼
<script>
/*window.onload=function(){
varoUl=document.getElementById('ul1');
alert(oUl.parentNode);
};*/
window.onload=function(){
varoA=document.getElementsByTagName('a');
for(vari=0;i<oA.length;i++){
oA[i].onclick=function(){
this.parentNode.style.display='none';
};
}
};
</script>
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<script>
window.onload=function(){
varoUl=document.getElementById('ou1');
//IE6-8
//oUl.firstChild.style.background='red';
//高級瀏覽器
//oUl.firstElementChild.style.background='red';
//兼容
if(oUl.firstElementChild){
oUl.firstElementChild.style.background='red';
}
else{
oUl.firstChild.style.background='red';
}
};
</script>
</head>
<body>
<ulid="ou1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html><!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<script>
functiongetByClass(oParent,sClass){
varaResult=[];
varaEle=oParent.getElementsByTagName('*');
for(vari=0;i<aEle.length;i++){
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
returnaResult;
}
window.onload=function(){
varoUL=document.getElementById('ul1');
varaBox=getByClass(oUL,'box');
for(vari=0;i<aBox.length;i++){
aBox[i].style.background='red';
}
};
</script>
</head>
<body>
<ulid="ul1">
<liclass="box"></li>
<liclass="box"></li>
<li></li>
<li></li>
<liclass="box"></li>
<li></li>
</ul>
</body>
</html>關于JavaScript中怎么實現(xiàn)DOM操作就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
