JavaScript學習筆記之DOM基礎操作實例小結
更新時間：2019年01月09日 10:18:59 作者：致Great
這篇文章主要介紹了JavaScript學習筆記之DOM基礎操作,結合實例形式總結分析了javascript針對dom元素節(jié)點、屬性的相關獲取、設置等操作技巧,需要的朋友可以參考下
本文實例講述了JavaScript DOM基礎操作。分享給大家供大家參考，具體如下：
一、子節(jié)點
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>
二、父節(jié)點
實例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>
三、firstChild
<!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>
四、通過class類獲取元素、以及函數(shù)封裝
<!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>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行結果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
Nginx默認會對上傳的文件先在本地進行緩存，再轉發(fā)到應用服務器。請問怎么禁止掉這個緩存，讓Nginx只轉發(fā)而不緩存文件？本文給大家詳細介紹Nginx上傳文件全部緩存解決方案，有需要的朋友來參考下2015-08-08
這篇文章主要為大家詳細介紹了微信小程序自定義底部彈出框動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
寫給小白看的JavaScript異步，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
有時候我們在設計網(wǎng)頁的時候想動態(tài)的加載css文件,并不是將css文件寫死在頁面中,這時就可以使用下面方法.2009-07-07
bootstrap 模態(tài)框（modal）實現(xiàn)水平垂直居中顯示
這篇文章主要為大家詳細介紹了bootstrap 模態(tài)框modal實現(xiàn)水平垂直居中顯示，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了Js數(shù)組扁平化實現(xiàn)方法代碼總匯,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了js獲取今天、昨天、明天的日期函數(shù)代碼,需要的朋友可以參考下2023-05-05
JavaScript中 ES6 generator數(shù)據(jù)類型詳解
generator 是ES6引入的新的數(shù)據(jù)類型，由function* 定義, (注意*號),接下來通過本文給大家介紹js中 ES6 generator數(shù)據(jù)類型，非常不錯，感興趣的朋友一起學習吧2016-08-08
這篇文章主要介紹了JavaScript實現(xiàn)的超簡單計算器功能,可實現(xiàn)基本的四則運算并帶有驗證功能,代碼中備有較為詳盡的注釋便于理解,需要的朋友可以參考下2017-12-12
JavaScript webpack模塊打包器如何優(yōu)化前端性能
本系列主要整理前端面試中需要掌握的知識點。本節(jié)介紹webpack如何優(yōu)化前端性能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08