【乾貨】JavaScript DOM編程藝術學習筆記7-9

標籤：highlight   world   連結   list   快捷   事件   子節點   family   根據   

七、動態建立標記

在文檔中不寫佔位圖片和文字代碼，在能調用js的情況下動態建立，文檔支援性更好。

在原來的addLoadEvent prepareGallery showPic的基礎上增加函數preparePlaceHolder

最後調用preparePlaceHolder和prepareGallery兩個函數

function preparePlaceHolder(){

   //對象檢測

   if(!document.createElement) return false;

   if(!document.creatTextNode) return false;

   if(!document.getElementById) return false;

   if(!document.getElementById("imagegallery")) return false;

   //建立佔位圖片元素

   var placeholder=document.createElement("img");

   placeholder.setAttribute("id" ,"placeholder");

   placeholder.setAttribute("src" ,"images/placeholder.gif");

   placeholder.setAttribute("alt" ,"my image gallery");

   //建立文本段元素節點

   var description=document.createElement("p");

   description.setAttribute("id","description");

   //建立文本節點

   var destext=document.createTextNode("choose an image");

   description.appendChild(destext);

   var gallery=document.getElementById("imagegallery");

   //將placeholder插入gallery後

   insertAfter(placeholder,gallery);

   //將description插入placeholder後

   insertAfter(description,placeholder);   

}

function insertAfter(newElement, targetElement){

   //取出目標元素的父元素

   var parent=targetElement.parentNode;

   //如果目標元素是父元素最後一個子節點，則追加到父元素最後

   if(parent.lastChild==targetElement){

      parent.appendChild(newElement);

   }

   //如果不是，則插入到目標元素的下一個兄弟元素之前

   else{

      parent.insertBefore(newElement, targetElement.nextSibling);

   }

}

註：

innerHTML：需要插入一大段內容時用，比如testdiv.innerHTML="<p>I insert <em>this</em> content</p>";可以放在外部js中與文檔分離。屬於html專用屬性，其他標記語言不支援。

document.creatElement(nodeName):添加元素節點。

document.creatTextNode(text):添加文本節點。

parent.appendChild(child):使child元素成為parent元素最後一個子節點。

targetElement.parentNode.insertBefore(newElement, targetElement):將newElement插入targetElement之前。

targetElement.nextSibling:targetElment元素的下一個兄弟元素。

Ajiax和Hijax後面講。

 

八、充實文檔內容

把文檔中的現有資訊用另一種結構呈現，比如縮減語列表，文獻來源連結，快速鍵清單。基本步驟都是，先建立一個特定元素（如縮減語）構成的節點集合，然後迴圈遍曆這個集合，在每次迴圈裡建立一些標記，最後把新建立的標記插入到文檔裡。

縮減語列表：

在文檔中是<p>The <abbr title="world wide web consortium">w3c</abbr></p>用abbr來標記，裡面的title內容不顯示，只顯示文本w3c

function displayAbbreviations(){

   if(!doucument.getElementsByTagName||!document.createElement||!document.createTextNode) return false;

   //取得所有縮減語元素

   var abbreviations=document.getElementsByTagName("abbr");

   if(abbreviations.length<1) returen false;

   //建立儲存數組

   var defs=new Array();

   //遍曆縮減語元素

   for(i=0; i<abbreviations.length; i++){

       var current_abbr=abbreviations[i];

      //如果是空的繼續下一個迴圈

      if(current_abbr.childNodes.length<1) continue;

      //儲存對應的key和defination

      var key=current_abbr.lastChild.nodeValue;

      var defination=current_abbr.getAttribute("title");

      defs[key]=definition;

   }

   //建立定義列表

   var dlist=document.createElement("dl");

   //遍曆縮減語數組defs

   for(key in defs){

      //為每一個建立定義標題dt對應key

      var dtitle=document.createElement("dt");

      var dtitle_text=document.createTextNode(key);

      dtitle.appendChild(dtitle_text);

      //建立定義描述dd對應defination

      var ddesc=document.createElement("dd");

      var ddesc_text=docuement.createTextNode(defination);

      ddesc.appendChild(ddesc_text);

      //將每組dt dd添加到列表dl

      dlist.appendChild(dtitle);

      dlist.appendChild(ddesc);      

   }

   if(dlist.childNodes.length<1) return false;

   //將定義列表添加到頁面

   document.body.appendChild(dlist);

}

文獻來源串連表：

在頁面中是blockquote的cite屬性：<blockquote cite="http://www.w3.org/DOM"><p></p></blockquote>，想把cite內內容添加到p的最後。在頁面中用sup元素封裝，顯示為上標。

function displayCitations(){

   if(!document.getElementsByTagName||!document.createElement||!document.createTextNode) return false;

   //取得所有引用

   var quotes=document.getElementsByTagName("blockquote");

   //遍曆引用

  for(i=0; i<quotes.length; i++){

      //如果沒有cite屬性進入下一個迴圈

      if(!quotes[i].getAttribute("cite")) continue;

      //取出cite屬性

      var url=quotes[i].getAttribute("cite");

      //取得引用中所有元素節點

      var quoteChildren=quotes[i].getElementsByTagName("*");

      //如果引用中沒有元素節點，繼續迴圈

     if(quotoChildren.length<1) continue;

     //取得引用中最後一個元素節點

    var elem=quoteChildren[quoteChildren.length-1];

     //建立標記a

     var link=document.createElement("a");

     var link_text=document.createTextNode("source");

     link.appendChild(link_text):

     link.setAttribute("href",url);

     //封裝到sup元素裡

     var superscript=document.createElement("sup");

     superscript.appendChild(link);

     //添加到引用的最後一個元素裡

     elem.appendChild(superscript);

   }

}

顯示快速鍵清單：

a元素的accesskey屬性，如<a href="index.html" accesskey="1">Home</a>，方法與上同。

 

九、CSS-DOM

1、style屬性

通過DOM style屬性擷取樣式：elem.style.fontFamily，可以識別速記屬性，另外有連接線的屬性名稱在dom中採用駝峰法表示。

但是，這種方式只能擷取內嵌在html代碼裡的屬性聲明，外部連結的樣式表和文檔head裡聲明的style屬性，用這種方法都提取不到。

用這種方式設定樣式：para.style.font="2em ‘Times‘, serif";

2、什麼時候使用DOM設定屬性

一般情況下樣式應該用CSS去設定，只有當CSS無法找到想要處理的目標元素，或者是用CSS找目標元素的方法還未得到廣泛的支援時，採用DOM的方法，另外用DOM的方法盡量不直接設定style屬性，而是更新className屬性。

（1）根據元素節點的位置設定樣式styleHeaderSiblings

（2）遍曆一個節點集合設定有關元素的樣式stripeTables

（3）在事件發生時設定有關元素的樣式highLightRows

（1）：根據元素在節點樹的位置來設定樣式

function styleHeaderSiblings(){

   //對象檢測

   if(!document.getElementsByTagName) return false;

   //選出h1元素

   var headers=document.getElementsByTagName("h1");

   var elem;

   for(var i=0; i<headers.length; i++){

      //找到header後面一個元素節點

      elem=getNextElement(headers[i].nextSibling);

      //為該元素增加一個屬性，而不是改變屬性

      addClass(elem,"intro");

   }

}

function getNextElement(node){

   //擷取下一個元素節點，而不是下一個節點

   if(node.nodeType==1) return node;

   if(node.nextSibling){

      return getNextElement(node.nextSibling);

   }

}

function addClass(element,value){

   if(!element.className) element.className=value;

   else{

      element.className+=" intro";

   }

}

最後在CSS中設定intro類的屬性：.intro{font-weight:bold; font-size:1.4em};

（2）：根據某種條件反覆設定某種樣式

function stripeTables(){

   if(!document.getElementsByTagName) return false;

   //取出所有列表

   var tables=document.getElementsByTagName("table");

   var odd,rows;

   //遍曆列表

   for(var i=0; i<tables.length; i++){

      odd=false;

      //取出列表所有行

      rows=tables[i].getElementsByTagName("tr");

      for(var j=0; j<rows.length; j++){

         //根據行的奇偶性設定屬性

         if(odd==true){

            addClass(rows[j],"odd");

            odd=false;

         }

         else{

             odd=true;

         }

      }

   }

}

再在CSS中設定odd類樣式： .odd{background-color:#ffc};

（3）：根據相應事件設定樣式

function highLightRows(){

   if(!document.getElementsByTagName) return false;

   var rows=document.getElementsByTagName("tr");

   for(var i=0; i<rows.length; i++){

      rows[i].onmousover=function(){this.style.fontWeight="bold";}

      rows[i].onmouseout=function(){this.style.fontWeight="normal";}

   }

}

 

【乾貨】JavaScript DOM編程藝術學習筆記7-9