JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ)操作實(shí)例小結(jié)

更新時(shí)間：2019年01月09日 10:18:59 作者：致Great

這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ)操作,結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)dom元素節(jié)點(diǎn)、屬性的相關(guān)獲取、設(shè)置等操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript DOM基礎(chǔ)操作。分享給大家供大家參考，具體如下：

一、子節(jié)點(diǎn)

1、元素節(jié)點(diǎn)、文本節(jié)點(diǎn)

實(shí)例01

html

<body>
 <ulid="ul1">
文本節(jié)點(diǎn)1 <li></li>
文本節(jié)點(diǎn)2<li></li>
文本節(jié)點(diǎn)3<li></li>
文本節(jié)點(diǎn)4<li></li>
文本節(jié)點(diǎn)5<li></li>
文本節(jié)點(diǎn)6</ul>
<!--文本節(jié)點(diǎn)adsasda-->
<!--<span>元素節(jié)點(diǎn) qeqweq</span>-->
</body>

javascript

<script>
 window.onload=function(){
  varoUl=document.getElementById('ul1');
  alert(oUl.childNodes.length);
 };
</script>

2、nodeType屬性

常見(jiàn)節(jié)點(diǎn)	nodeType值
元素節(jié)點(diǎn)	1
屬性節(jié)點(diǎn)	2
文本節(jié)點(diǎn)	3

實(shí)例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é)點(diǎn)

實(shí)例03

html代碼

<ulid="ul1">
 <li>
  <!--子節(jié)點(diǎn)只算第一層的，在這里span是li的子節(jié)點(diǎn)，而不是ul的子節(jié)點(diǎn)-->
  <span>子節(jié)點(diǎn)</span>
 </li>
 <li></li>
</ul>

javascript代碼

<script>
 window.onload=function(){
  varoUl=document.getElementById('ul1');
  //children獲取元素節(jié)點(diǎn)
  //alert(oUl.children.length);
  for(vari=0;i<oUl.children.length;i++){
   oUl.children[i].style.background='red';
  }
 };
</script>

二、父節(jié)點(diǎn)

實(shí)例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>

實(shí)例05 父節(jié)點(diǎn)的應(yīng)用

html代碼

<ulid="ul1">
 <li>父節(jié)點(diǎn)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é)點(diǎn)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é)點(diǎn)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é)點(diǎn)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é)點(diǎn)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é)點(diǎn)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é)點(diǎn)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';
   //高級(jí)瀏覽器
   //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>

四、通過(guò)class類(lèi)獲取元素、以及函數(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>

感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行結(jié)果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: