本文實例講述了JavaScript DOM基礎操作。分享給大家供大家參考，具體如下：
1、元素節點、文本節點
實例01
html
<body> <ulid="ul1">文本節點1 <li></li>文本節點2<li></li>文本節點3<li></li>文本節點4<li></li>文本節點5<li></li>文本節點6</ul><!--文本節點adsasda--><!--<span>元素節點 qeqweq</span>--></body>
javascript
<script> window.onload=function(){ varoUl=document.getElementById('ul1'); alert(oUl.childNodes.length); };</script>
2、nodeType屬性
| 常見節點 | nodeType值 |
| 元素節點 | 1 |
| 屬性節點 | 2 |
| 文本節點 | 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獲取元素節點
實例03
html代碼
<ulid="ul1"> <li> <!--子節點只算第一層的，在這里span是li的子節點，而不是ul的子節點--> <span>子節點</span> </li> <li></li></ul>
javascript代碼
<script> window.onload=function(){ varoUl=document.getElementById('ul1'); //children獲取元素節點 //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 父節點的應用
html代碼
<ulid="ul1"> <li>父節點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>父節點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>父節點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>父節點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>父節點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>父節點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>父節點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>感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行結果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
