DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript DOM 學習總結(五)
JavaScript DOM 學習總結(五)
編輯:關於JavaScript     

1、DOM簡介。

  當頁面加載時,浏覽器會創建頁面的文檔對象模型(Document Object Model)。文檔對象模型定義訪問和處理HTML文檔的標准方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構,即節點樹。通過DOM,JS可創建動態的HTML,可以使網頁顯示動態效果並實現與用戶的交互功能。JS能夠改變頁面中所有的HTML元素、屬性和CSS樣式,並對頁面中所有事件做出響應。所以學習JS的起點就是處理網頁,處理網頁就需要使用DOM進行操作。

2、DOM獲取元素。

  JS要想操作HTML元素,那麼首先就必須先找到該元素。通常使用以下幾種方法完成:

  通過元素設置的id找到HTML元素。

  通過標簽名找到HTML元素。

  通過元素設置的名稱(name)找到HTML元素。

  所謂的DOM,實際上就是document,獲取元素就是操作document。

  (1)、通過id找到元素

  方法:document.getElementById('id');

  網頁是由標簽將信息組合起來的,id屬性值是唯一的,就像身份證一樣,通過一個身份證可以找到相對應的人,所以通過該方法,可以獲取到與之相對應的標簽,而獲取的元素在JS中是一個對象,若想對元素進行操作,則需要通過他的屬性或方法。

  (2)、通過標簽名找到元素

  方法:document.getElementsByTagName('Tagname');

  通過該方法,返回的是帶有指定標簽名的對象的集合,也就是以數組的形式返回,返回的順序是他們在文檔中的順序。

  (3)、通過name找到元素

  方法:document.getElementsByName('name');

  該方法與getElementById()方法有點相似,都是通過設置的屬性值找到元素,只不過該方法是通過設置的name屬性值查找元素。name屬性在文檔中可能不唯一,所以該方法返回的也是元素的數組,而不是一個元素。

<body>
 <input name="txt" type="text" value="">
 <input name="txt" type="text" value=""><br>
 <input name="txt" type="text" value="">
 <input name="txt" type="text" value=""><br>
 <input name="txt" type="text" value="">
 <input name="aaa" type="text" value="">
 <script>
 //獲取所有name值為txt的元素
 var oTxt=document.getElementsByName("txt"); 
 //獲取元素的個數
 alert(oTxt.length);    //返回:
 //獲取第二個元素的值
 alert(oTxt[].value);  //返回:
 </script>
 </body> 

  既然可以通過id找到元素,那麼也就可以通過class找到元素。className屬性用於設置或者返回元素的class類名。

  語法:object.className = 'className'

  該方法可以控制class類名,返回元素的class屬性,作用是可以為網頁中某個元素指定一個className來更改該元素的外觀。

  實例:簡單的網頁換膚效果

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>網頁換膚</title>
 <style>
 body{
   background:lightgreen;
 }
 .col{
   background:lightgray;
 }
 .col{
   background:lightblue;
 }
 .col{
   background:violet;
 }
 .col{
   background:pink;
 }
 .col{
   background:#f;
 }
 </style>
 </head>
 <body id="boy">
 點擊切換:<input type="button" value="灰色" onclick="gr()">
 <input type="button" value="藍色" onclick="bl()">
 <input type="button" value="紫色" onclick="vi()">
 <input type="button" value="粉色" onclick="pi()">
 <input type="button" value="橘色" onclick="or()">
 <script>
 var x = document.getElementById('boy');
 function gr(){
   x.className='col';
 }
 function bl(){
   x.className='col';
 }
 function vi(){
   x.className='col';
 }
 function pi(){
   x.className='col';
 }
 function or(){
   x.className='col';
 }
 </script>
 </body>
 </html>

   這只是一個簡單的切換背景色效果,如果想切換網頁的整體樣式,可以使用外部CSS文件,通過JS改變link標簽的href屬性來完成。

  如果想設置多個class類名相同的元素的樣式,就需要借助數組的方法來完成,其實現原理也很簡單,首先通過id獲取其父元素,再獲取父元素下所有子元素的標簽名,獲取標簽名返回的是元素的數組,所以就可以和訪問數組一樣的方法來訪問元素的數組,那麼先使用循環遍歷該元素數組,再做判斷,如果這個元素的className等於我們設置的class屬性值,就說明這是我們要找的元素。

  實例:將有序列表中所有class屬性值為"col"的元素背景顏色設置為綠色。

 <body>
 <ol id="o">
   <li>熱點</li>
   <li class="col">美食</li>
   <li>數碼</li>
   <li class="col">科技</li>
   <li>社會</li>
   <li class="col">養生</li>
 </ol>
 <script>
 //通過id獲取父元素
 var aOl = document.getElementById('o');
 //通過標簽名獲取父元素下所有子元素
 var oLi = aOl.getElementsByTagName('li');
 //循環遍歷返回的子元素數組
 for(var i=;i<oLi.length;i++){
   //如果當前子元素的className等於設置的class屬性值,則將其背景設置為綠色
   if(oLi[i].className=='col') oLi[i].style.background='green';
 }
 </script>
 </body>

   下面是一個通過class屬性值獲取元素的封裝函數,方便以後使用。

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>封裝getByClass函數</title>
 <script>
  //第一個參數為獲取的父元素,第二個參數為class屬性值。
  function getByClass(oParent,aClass){
   //空數組可以把找到的所有className都存放在裡邊,最後返回。
   var aResult=[];
   //通過標簽名獲取父元素下所有子元素。標簽名不固定,所以設置為*,便於傳入。
   var aEle=oParent.getElementsByTagName('*');
   //循環遍歷返回的子元素數組
   for(var i=;i<aEle.length;i++){
     //如果當前子元素的className等於傳入的class屬性值,則將其添加到數值中。
     if(aEle[i].className==aClass) aResult.push(aEle[i]);
   }
   //最後將這個數組返回
   return aResult;
 }
 </script>
 </head>
 <body>
 <ol id="o">
   <li>熱點</li>
   <li class="col">美食</li>
   <li>數碼</li>
   <li class="col">科技</li>
   <li>社會</li>
   <li class="col">養生</li>
 </ol>
 <script>
 //封裝函數的使用:
 //先通過id獲取父元素
 var aOl=document.getElementById('o');
 //再調用封裝好的函數傳入參數,獲取的父元素,子元素的class屬性值
 var oCol=getByClass(aOl,'col');
 //最後循環遍歷,設置樣式
 for(var i=;i<oCol.length;i++){
   oCol[i].style.background='green';
 }
 </script>
 </body>
 </html>

3、DOM操作。

  獲取到HTML元素之後,就可以進行相應的操作。

  (1)、改變HTML

  修改HTML內容的最簡單的方法時使用 innerHTML 屬性。innerHTML顧名思義,inner就是內部的,既然是HTML,那麼就可以給裡邊放HTML。該屬性可用於獲取和替換HTML元素的內容。

  語法:document.getElementById(id).innerHTML = new HTML

<body>
 <h id="tit">原標題</h>
 <script>
 //改變原有標題
 var aH=document.getElementById('tit');
 aH.innerHTML='新標題';
 </script>
 <div id="div" style="width:px;height:px;border:px solid black;"></div>
 <script>
 //創建HTML內容
 var oDiv=document.getElementById('div');
 oDiv.innerHTML='<h>我是h標題</h><p>我是一個段落</p>';
 </script>
 </body>

  (2)、操作元素屬性

  修改元素屬性最簡單的方法就是直接修改,語法:document.getElementById(id).屬性名 = new value 比如修改圖片src屬性的指向路徑。

  此外還可以通過DOM方法獲取、添加、刪除元素的屬性。

  ①、getAttribute()

  getAttribute()方法通過元素節點的屬性名獲取屬性的值。

  語法:elementNode.getAttribute(name)  name是想要獲取的元素節點的屬性名

  ②、setAttribute()

  setAttribute()方法添加一個新屬性並指定值,或者把一個現有的屬性設定為指定的值。

  語法:elementNode.setAttribute(name,value)  name是屬性名,value是屬性值。

  ③、removeAttribute()

  removeAttribute()方法可刪除元素的屬性。

  語法:elementNode.removeAttribute(name)  name是屬性名。

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript實例</title>
 </head>
 <body>
 <input id="txt" type="text">
 <input id="btn" type="button" value="按鈕">
 <script>
 var oTxt=document.getElementById('txt');
 var oBtn=document.getElementById('btn');
 //獲取按鈕value屬性的值
 var a=oBtn.getAttribute('value');
 alert(a);  //返回:按鈕
 oBtn.onclick=function (){
   //操作元素屬性有三種方法:
   //第一種方法
   //oTxt.value='請輸入文字';
   //第二種方法
   //oTxt['value']='請輸入文字';
   //第三種方法
   //修改文本框value屬性的值
   oTxt.setAttribute('value','請輸入文字');
   //刪除按鈕type屬性
   oBtn.removeAttribute('type');
   //刪除後默認為文本框
 };
 </script>
 </body>
 </html>

   (3)、改變CSS

  改變HTML元素的CSS樣式可直接使用該語法:document.getElementById(id).style.樣式名 = new style

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript實例</title>
 <style>
 #div{
   height:px;
   width:px;
   border:px solid black;
   padding:px;
 }
 p{
   line-height:px;
   text-indent:em;
 }
 </style>
 </head>
 <body>
 <h>HTML DOM</h>
 <div id="div">
   <h>JS可以使網頁添加動態效果並實現與用戶交互的功能。</h>
   <p>. JS能夠改變頁面中所有的 HTML 元素。</p>
   <p>. JS能夠改變頁面中所有的 HTML 屬性。</p>
   <p>. JS能夠改變頁面中所有的 HTML 元素的CSS樣式。</p>
 </div>
 <input type="button" value="改變顏色" onclick="color()">
 <input type="button" value="改變寬高" onclick="hig()">
 <input type="button" value="隱藏內容" onclick="none()">
 <input type="button" value="顯示內容" onclick="block()">
 <input type="button" value="取消設置" onclick="cancel()">
 <script>
 var oDiv = document.getElementById('div');
 function color(){
   oDiv.style.color = 'white';
   oDiv.style.fontFamily = 'Microsoft YaHei';
   oDiv.style.backgroundColor = 'green';
 }
 function hig(){
   oDiv.style.width = 'px';
   oDiv.style.height = 'px';
   oDiv.style.border = 'px solid #ccc';
 }
 function none(){
   oDiv.style.display = 'none';
 }
 function block(){
   oDiv.style.display = 'block';
 }
 //取消設置
 function cancel(){
   var clean = confirm('確定取消所有設置?');
   if(clean == true){
     oDiv.removeAttribute('style');
   }
 }
 </script>
 </body>
 </html>

   上面的代碼,通過style設置的樣式,都是行間樣式,可以使用火狐的Firebug點擊相應的按鈕,就能看到所有設置的CSS樣式都出現在了行間。

  可以直接通過style獲取和設置CSS樣式,那麼有沒有更簡潔的方法呢?可以借助於函數使用JS的內置對象arguments完成,所謂arguments,就是可變參,不定參,參數的個數可變,是一個參數數組,無需指出參數名,就可訪問他們,但是為了增強可讀性,給參數取名,還是很有必要的。

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript實例</title>
 </head>
 <body>
 <div id="div" style="width:px;height:px;background:red"></div>
 <script>
 //獲取行間樣式
 function css(){
   //如果傳入參數的個數等於
   if(arguments.length==){
     //則返回第二個參數樣式名的值
     return arguments[].style[arguments[]];
   }
   else{
     //否則就是設置CSS樣式
     //第二個參數樣式名的值就等於傳入的第三個參數
     arguments[].style[arguments[]]=arguments[];
   }
 }
 
 var oDiv=document.getElementById('div');
 alert(css(oDiv,'width'));  //獲取對象的寬 返回:px
 css(oDiv,'background','green');  //將對象的背景顏色改為綠色
 </script>
 </body>
 </html>

  下面是一個獲取和設置行間樣式的封裝函數,以便以後使用。

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>獲取行間樣式</title>
 <script>
 function css(obj, name, value){
   if(arguments.length==){
     return obj.style[name];
   }
   else{
     obj.style[name]=value;
   }
 }
 </script>
 </head>
 <body>
 <div id="div" style="width:px;height:px;background:red"></div>
 <script>
 var oDiv=document.getElementById('div');
 alert(css(oDiv,'width'));  //獲取div的寬
 css(oDiv,'background','green');  //設置div的背景顏色
 </script>
 </body>
 </html>

  我們都知道,在實際的WEB項目開發中,要遵循結果、表現、行為相分離的原則,以增強可讀性,優化代碼,便於後期維護。所以通常我們設置元素的樣式,並非都是在行間設置。使用style方法獲取的只是DOM元素style屬性裡的樣式規則,對於通過class屬性設置的外部樣式表,style就顯得力不從心了。那要如何獲取元素的非行間樣式呢?DOM標准中有個全局方法getComputedStyle,通過該方法可以獲取當前對象的樣式信息。比如:getComputedStyle(obj, false).paddingLeft,可以獲取到對象的左內邊距。這裡需要注意:在獲取元素的復合樣式時,一定要使用精確的值,復合樣式比如background、border,如果要獲取元素的背景顏色,只使用background會出錯,一定要寫成backgroundColor。

  JS只能修改元素的行間樣式,並不能修改獲取到的非行間樣式。那麼很多人可能會產生疑問,既然可以獲取到又不能修改,那還獲取有什麼用。其實獲取非行間樣式是非常有必要的,如果是外部樣式表,樣式都是密密麻麻一片英文的存在,不可能一個個去找,到底該元素設置的什麼樣子,再回頭修改,那豈不是太浪費精力了,所以該方法就顯得尤為重要,而且返回的值都是精確值,通過獲取的非行間樣式信息,也有利於更精細的修改元素的當前樣式,這是多麼美妙的一件事,直接使用style設置元素的行間樣式,因為行間樣式的優先級最高,所以就覆蓋掉了非行間樣式,其實也就相當於跟修改了非行間樣式一樣,只是顯示在了行間,我們目的反著是已經達到了。

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>獲取非行間樣式</title>
 <style>
 #div{
   width:px;
   height:px;
   background:red;
   margin-top:px;
 }
 </style>
 <script>
 window.onload=function (){
   var oDiv=document.getElementById('div');
   alert(getComputedStyle(oDiv,false).width);
   oDiv.style.width='px';
   alert(getComputedStyle(oDiv,false).height);
   oDiv.style.height='px';
   //注意這裡修改復合樣式時,使用的background,可在FF下用Firebug查看具體的行間樣式。
   alert(getComputedStyle(oDiv,false).backgroundColor);
   oDiv.style.background='green';
 };
 </script>
 </head>
 <body>
 <div id="div"></div>
 </body>
 </html>

   (4)、對事件做出響應

  實例:全選和反選,輸入對應的序號選中

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript實例</title>
 </head>
 <body>
 <form id="list">
   請選擇你的業余愛好:<br>
   . 音樂<input type="checkbox" name="love" id="like">
   . 閱讀<input type="checkbox" name="love" id="like">
   . 游泳<input type="checkbox" name="love" id="like">
   . 籃球<input type="checkbox" name="love" id="like">
   . 足球<input type="checkbox" name="love" id="like">
   . 散步<input type="checkbox" name="love" id="like">
   . 泡吧<input type="checkbox" name="love" id="like">
   . 逛街<input type="checkbox" name="love" id="like"><br>
   <input type="button" value = "全選" onclick="optAll()">
   <input type="button" value = "反選" onclick="noAll()">
   <p>輸入-序號選擇,每次只可以選擇一項:</p>
   <input id="txt" type="text">
   <input id="btn" type="button" value="確定">
 </form>
 <script>
 function optAll(){
   //通過獲取標簽名設置全選
   var oList = document.getElementById('list');
   var aCheck = oList.getElementsByTagName('input');
   for(var i=;i<aCheck.length;i++){
     if(aCheck[i].type =='checkbox'){
       aCheck[i].checked=true;
     }
   }
 }
 function noAll(){
   //通過獲取設置的name屬性值設置反選
   var aLove = document.getElementsByName('love'); 
   for(var i=;i<aLove.length;i++){
     if(aLove[i].type =='checkbox'){
       aLove[i].checked=false;
     }
   }
 }
 var oBtn = document.getElementById('btn');
 //給獲取的按鈕添加點擊事件
 oBtn.onclick = function (){
   //獲取文本框輸入的值
   var oTxt = document.getElementById("txt").value;
   //定義的復選框id值為like-。括號中進行的是字符串連接,id+輸入到文本框的值=該元素的id值
   var oLike = document.getElementById('like' + oTxt);
   oLike.checked = true;
 }
 </script>
 </body>
 </html>

3、DOM節點。

  HTML文檔可以說是由節點構成的集合,常見的DOM節點有三種,即元素節點、屬性節點和文本節點。元素節點就是HTML標簽,標簽的屬性就是屬性節點,文本節點就是頁面可以浏覽的內容。

  在文檔對象模型中,每一個節點都是一個對象,DOM節點有三個重要的屬性:節點的名稱,節點的值和節點的類型。

  (1)、nodeName:節點的名稱

  nodeName屬性返回節點的名稱。元素節點的名稱與標簽名相同(大寫),屬性節點的名稱是屬性的名稱,文本節點的名稱永遠都是#text,文檔節點的名稱永遠都是#document。

  (2)、nodeValue:節點的值

  nodeValue屬性返回節點的值。元素節點的值是undegined或null,屬性節點的值是屬性的值,文本節點的值是文本自身。

  (3)、nodeType:節點的類型

  nodeType屬性返回節點的類型。以下是常見的節點類型:

 <body>
 <ul>
   <li>JS</li>
   <li>DOM</li>
 </ul>
 <script>
 var nodes=document.getElementsByTagName('li');
 for(var i=;i<nodes.length;i++){
   document.write('第'+(i+)+'個節點的名稱是'+nodes[i].nodeName+'<br>');
   document.write('第'+(i+)+'個節點的值是'+nodes[i].nodeValue+'<br>');
   document.write('第'+(i+)+'個節點的類型是'+nodes[i].nodeType+'<br>');
   document.write('<br>');
 } 
 /*
 返回:
 第個節點的名稱是LI
 第個節點的值是null
 第個節點的類型是
 第個節點的名稱是LI
 第個節點的值是null
 第個節點的類型是
 */
 </script>
 </body>

  JS中函數可以嵌套使用,有父函數有子函數,HTML標簽也可以嵌套使用,那麼就說明存在著各種不同的節點關系,比如父節點、子節點和兄弟節點。為了方便操作,DOM定義了一些節點的公共屬性。

  (1)、子節點

  childNodes屬性返回節點的子節點集合,可使用length屬性返回子節點的數量,然後就可以和數組一樣獲取需要的信息。

<body>
 <ul id="u">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
 </ul>
 <script>
 var oUl=document.getElementById('u');
 alert(oUl.childNodes.length);  //返回:
 </script>
 </body>

   通過上面的代碼,可以看到返回的是11。ul下明明只有5個li元素,怎麼會返回11呢?其實是這麼回事:

<ul id="u">  第個節點(文本節點)
   <li>第個節點(元素節點)</li> 第個節點(文本節點)
   <li>第個節點(元素節點)</li> 第個節點(文本節點)
   <li>第個節點(元素節點)</li> 第個節點(文本節點)
   <li>第個節點(元素節點)</li> 第個節點(文本節點)
   <li>第個節點(元素節點)</li> 第個節點(文本節點)
 </ul>

  因為通過childNodes屬性返回的子節點集合,不僅包括元素節點,而且還包括文本節點,浏覽會將標簽之間的空白默認為文本節點,在空白處輸入文字,會在浏覽器顯示。所以建議使用children屬性,該屬性只返回元素節點,不包括文本節點,並且不包括注釋節點。

 <body>
 <ul id="u">
   <li>
     我是個文本節點
     <span>我是span元素。</span>
   </li>
   <li></li>  <!-- 注釋 -->
   <li></li>
   <li></li>
   <li></li>
 </ul>
 <script>
 var oUl=document.getElementById('u');
 alert(oUl.children.length);  //返回:
 </script>
 </body>

  上面的代碼,ul下5個li元素,返回子節點個數為5。children屬性要比childNodes屬性好用太多了,只返回元素的子節點,還不包括孫子輩節點。

  (2)、首尾子節點

  firstElementChild屬性返回children數組的第一個節點。

  語法:node.firstElementChild  該方法相當於:element.children[0]

  lastElementChild屬性返回children數組的最後一個節點。

  語法:node.lastElementChild  該方法相對於:element.children[element.children.length-1]

<body>
 <div style="border:px solid green" id="div">
   空白節點
  <p>JS</p>
  <div>DOM</div>
  <h>jQuery</h>
 </div>
 <script>
 var x=document.getElementById('div');
 document.write('第一個節點的名稱:'+x.firstElementChild.nodeName+'<br>');
 //返回:第一個子節點的名稱:P
 document.write('最後一個節點的名稱:'+x.lastElementChild.nodeName)
 //返回:最後一個子節點的名稱:H
 </script>
 </body>

  (3)、父節點

  parentNode屬性用於獲取指定節點的父節點。注意:父節點只能有一個。通過使用兩個獲取父節點,可獲取祖節點。

  實例:點擊子節點,隱藏父節點

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript實例</title>
 </head>
 <body>
 <ul id="u">
   <li>aaa <a href="javascript:;">點擊隱藏</a></li>
   <li>bbb <a href="javascript:;">點擊隱藏</a></li>
   <li>ccc <a href="javascript:;">點擊隱藏</a></li>
   <li>ddd <a href="javascript:;">點擊隱藏</a></li>
   <li>eee <a href="javascript:;">點擊隱藏</a></li>
 </ul>
 <script>
 var oUl=document.getElementById('u');
 //查看ul元素的父節點
 alert(oUl.parentNode);  //返回:[object HTMLBodyElement]
 //通過標簽名獲取所有的a元素
 var aA=document.getElementsByTagName('a');
 for(var i=;i<aA.length;i++){
   aA[i].onclick=function (){
     //設置當前節點的父節點為隱藏
     this.parentNode.style.display='none';
   };
 }
 </script>
 </body>
 </html>

  offsetParent屬性可返回一個元素用於定位的父級。

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript實例</title>
 <style>
 #div{
   width:px;
   height:px;
   background:green;
   margin:px;
   /*position:relative;*/
 }
 #div{
   width:px;
   height:px;
   background:red;
   position:absolute;
   left:px;
   top:px;
 }
 </style>
 </head>
 <body>
 <div id="div">
   <div id="div"></div>
 </div>
 <script>
 var oDiv=document.getElementById('div');
 alert(oDiv.offsetParent);
 //返回:[object HTMLBodyElement]
 //div的父級是div,如果取消div相對定位的注釋。則返回:[object HTMLDivElement]
 </script>
 </body>
 </html>

  (3)、兄弟節點

  nextElementSibling屬性返回同一樹層級中某個節點之後緊跟的節點。

  語法:element.nextElementSibling  

  previousElementSibling屬性返回同一樹層級中某個節點之前緊跟的節點。

  語法:element.previousElementSibling

  節點類型 說明 值 元素節點 每一個HTML標簽都是一個元素節點,如 <div> 、 <p>、<ul>等 1 屬性節點 元素節點(HTML標簽)的屬性,如 id 、class 、name 等。 2 文本節點 元素節點或屬性節點中的文本內容。 3 注釋節點 表示文檔注釋,形式為<!-- text content -->。 8 文檔節點 表示整個文檔(DOM 樹的根節點,即 document )。 9

  實例:獲取li元素節點的兄弟節點

  <body>
 

<ul>  
   <li>HTML</li>  
   <li>CSS</li>
   <li>JS</li>  
 </ul>   
 <script>
 var aLi=document.getElementsByTagName('li');
 //獲取第二個子節點之後緊跟的節點
 var x=aLi[].nextElementSibling;
 alert(x.innerHTML);  //返回:JS
 //獲取第二個子節點之前緊跟的節點
 var x=aLi[].previousElementSibling;
 alert(x.innerHTML);  //返回:HTML
 </script>
 </body>

4、DOM應用。

  DOM最實際的應用就是可以通過JS創建、插入和刪除節點。

  (1)、創建節點

  createElement()方法可創建元素節點。

  語法:document.createElement(tagName)

  appendChild()方法可在指定節點的末尾插入一個新的子節點,每次都向末尾添加。

  語法:父級.appendChild(new node)

  實例:創建並添加li元素

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript實例</title>
 <script>
 window.onload=function (){
   var oBtn=document.getElementById('btn');
   var oUl=document.getElementById('u');
   var oTxt=document.getElementById('txt');
   //文本框輸入提示
   oTxt.placeholder='請輸入文字創建li元素';
   oBtn.onclick=function (){
     //創建li元素
     var oLi=document.createElement('li');
     //創建的li元素的HTML=文本框輸入的值
     oLi.innerHTML=oTxt.value;
     //插入到oUl父級下,作為子節點,在每個創建的li末尾插入新創建的li元素
     oUl.appendChild(oLi);
     //父級.appendCild(子節點);
   };
 };
 </script>
 </head>
 <body>
 <input id="txt" type="text"value="">
 <input id="btn" type="button"value="創建li">
 <ul id="u"></ul>
 </body>
 </html>

   (2)、插入節點

  insertBefore()方法可在已有的子節點前插入一個新的子節點。

  語法:父級.insertBefore(new node, node)  第一個參數為要插入的新子節點。第二個參數是原有節點,也就是在誰之前插入。

  實例:創建並添加li元素,每個新創建的li元素都插入到之前插入的li元素之前

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript實例</title>
 <script>
 window.onload=function (){
   var oBtn=document.getElementById('btn');
   var oUl=document.getElementById('u');
   var oTxt=document.getElementById('txt');
   oBtn.onclick=function (){
     //創建li元素
     var oLi=document.createElement('li');
     //獲取所有li元素
     var aLi=oUl.getElementsByTagName('li');
     oLi.innerHTML=oTxt.value;
 
     //這裡需要注意:頁面中本沒有li元素,li元素是通過JS創建的
     //所以第一個li元素應該添加到父級下最後一個子節點
     //然後基於這個節點,將之後再插入的子節點插入到上一個節點之前
 
     //如果li元素本來不存在,則執行else,在父級插入一個子節點。
     //如果li元素的個數>,說明已經創建了,則插入到這個子節點之前。
     if(aLi.length>){
       oUl.insertBefore(oLi,aLi[]);
     }
     else{
       oUl.appendChild(oLi);
     }
   };
 };
 </script>
 </head>
 <body>
 <input id="txt" type="text" value="">
 <input id="btn" type="button" value="創建li">
 <ul id="u"></ul>
 </body>
 </html>

   (4)、刪除節點

  removeChild()方法用於刪除一個節點

  語法:父級.removeChild(node)  參數為要刪除的子節點。

  實例:簡單的表格添加和刪除

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-">
    <title>JavaScript實例</title>
  <script>
  window.onload=function (){
    var oTab=document.getElementById('tab');
    var oName=document.getElementById('user');
   var oAge=document.getElementById('age');
   var oBtn=document.getElementById('btn');
   //設置添加的ID項的值
   var id=oTab.tBodies[].rows.length+;
   oBtn.onclick=function (){
     //創建一個tr
     var oTr=document.createElement('tr');
     //創建第一個td(ID項)
     var oTd=document.createElement('td');
     //獲取ID,已經刪除的ID號,不能再重用。
     oTd.innerHTML=id++;
     //將創建的td放入創建的tr中
     oTr.appendChild(oTd);
     //創建第二個td(姓名項)
     var oTd = document.createElement('td');
     oTd.innerHTML=oName.value;
     oTr.appendChild(oTd);
     //創建第三個td(年齡項)
     var oTd = document.createElement('td');
     oTd.innerHTML=oAge.value;
     oTr.appendChild(oTd);
     //創建第四個td(操作項)
     var oTd = document.createElement('td');
     oTd.innerHTML='<a href="javascript:;">刪除</a>';
     oTr.appendChild(oTd);
     oTd.getElementsByTagName('a')[].onclick=function (){
       //刪除整行
       oTab.tBodies[].removeChild(this.parentNode.parentNode);
     };
     //將創建好的tr放入tbody中
     oTab.tBodies[].appendChild(oTr);
   };
 };
 </script>
 </head>
 <body>
 姓名:<input id="user"type="text">
 年齡:<input id="age"type="text">
 <input id="btn" type="button" value="添加">
 <table id="tab" border="" width="px">
   <caption>員工表</caption>
   <thead>
     <tr>
       <th>ID</th>
       <th>姓名</th>
       <th>年齡</th>
       <th>操作</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td></td>
       <td>小白</td>
       <td></td>
       <td></td>
     </tr>
     <tr>
       <td></td>
       <td>小明</td>
       <td></td>
       <td></td>
     </tr>
     <tr>
       <td></td>
       <td>小紅</td>
       <td></td>
       <td></td>
     </tr>
     <tr>
       <td></td>
       <td>張三</td>
       <td></td>
       <td></td>
     </tr>
     <tr>
       <td></td>
       <td>李四</td>
       <td></td>
       <td></td>
     </tr>
   </tbody>
 </table>
 </body>
 </html>

   這個實例只能很簡單的完成添加和刪除,並不對輸入進行判斷,如果想要做的完美,還需要做很多工作,可以對表格進行美化,設置背景色,鼠標移入高亮顯示,鼠標移出恢復背景色,最關鍵的就是要對表單輸入內容進行判斷,以確保每次提交的信息都是有效信息,如果表格信息量大,還可以添加支持模糊搜素,多關鍵字搜索,以提高用戶體驗度,當然在實際的項目中,這樣的情況幾乎不會出現,但可以作為自己的實踐,檢驗學習成果。

  (5)、替換節點和創建文本節點

  replaceChild()方法可用於替換元素節點。

  語法:node.replaceChild (new node, node)  第一個參數為用於替換的節點。第二個參數為原有節點。

  createTextNode()方法可創建新的文本節點,返回新創建的Text節點。

  語法:document.createTextNode(txt)

  這兩種方法平時幾乎用不到,但還是需要了解。

  實例:點擊按鈕將span標簽替換為b標簽。再創建一個文本節點插入到創建的p元素下,並設置className。

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript實例</title>
 <style>
 .p{
   width:px;
   height:px;
   background-color:#ccc;
 }  
 </style>
 </head>
 <body>
 <p>創建一個P標簽,設置<span id="s">className</span>屬性,創建文本節點。</p>
 <input type="button" value="點擊替換" onclick="change()">
 <script>
 function change(){
   //獲取span元素
   var oS=document.getElementById('s');
   //創建一個b元素
   var newnode=document.createElement('b');
   //要替換的文本節點
   var txt = document.createTextNode('className');
   //將文本節點插入到創建的b元素下
   newnode.appendChild(txt);
   //在span元素的父級下將span元素替換成新創建的b元素
   oS.parentNode.replaceChild(newnode,oS);
 }
 //創建一個p元素
 var oP=document.createElement('p');
 //設置className
 oP.className='p';
 //創建文本節點
 var txtNode=document.createTextNode('createTextNode用於創建文本節點!');
 //將創建的文本節點插入到p元素下
 oP.appendChild(txtNode);
 //再將p元素插入到父級body下
 document.body.appendChild(oP);
 </script> 
 </body>
 </html>

以上所述是小編給大家分享的關於JavaScript DOM 學習總結(五)的全部敘述,希望大家喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved