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類獲取元素、以及函數封裝

<!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數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

JS中頁面列表加載的常用方法總結
在日常前端開發(fā)過程中，常用到頁面列表加載。這篇文章主要為大家介紹三種常用方法，分別是分頁加載、按鈕加載以及滾動加載，需要的可以參考一下
2022-09-09
webpack 樣式加載的實現原理
本篇文章主要介紹了webpack 樣式加載的實現原理，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
教你JS中的運算符乘方、開方及變量格式轉換
本文運用實例教大家JS中的運算符乘方、開方及變量格式轉換，代碼簡單明了，有需要的可以參考學習。
2016-08-08
javascript 主動派發(fā)事件總結
有時需要模仿用戶的一些動作（鼠標/鍵盤操作），最常見的莫過于鼠標點擊。一一列舉
2011-08-08
如何利用JS判斷整數x是否是回文數
回文數是指正序（從左向右）和倒序（從右向左）讀都是一樣的整數,下面這篇文章主要給大家介紹了關于如何利用JS判斷整數x是否是回文數的相關資料,需要的朋友可以參考下
2022-01-01
JS煙花背景效果實現方法
這篇文章主要介紹了JS煙花背景效果實現方法,實例分析了javascript操作dom元素實現煙花特效的技巧,需要的朋友可以參考下
2015-03-03
JS監(jiān)聽滾動和id自動定位滾動
這篇文章主要為大家詳細介紹了JS監(jiān)聽滾動和id自動定位滾動，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12
js實現開啟密碼大寫提示
本文主要分享了js實現開啟密碼大寫提示的實例，代碼簡單易懂。需要的朋友一起來看下吧
2016-12-12
兩種方法實現在HTML頁面加載完畢后運行某個js
這篇文章主要介紹了通過兩種方法實現在HTML頁面加載完畢后運行某個js,需要的朋友可以參考下
2014-06-06
返回函數的JavaScript函數
理解返回函數的JavaScript函數是什么意思，通過幾個簡短的例子真正理解返回函數的JavaScript函數到底是什么？感興趣的小伙伴們可以參考一下
2016-06-06