顯示“縮略詞語”

---

• <abbr> 標簽指示簡稱或縮寫，比如

<abbr title="World Wide Web Consortium">W3C</abbr>

• <acronym> 標簽定義首字母縮寫。HTML5中已經不支持該標簽。建議用<abbr>標簽代替。
• ”定義表“（<dl>）由一系列“定義標題”<dt>和相應的“定義描述”<dd>構成。
• for/in循環

它的獨特之處是可以把某個數組的下標鍵字臨時賦值給一個變量：for(variable in arry)

?

<h1 >What is the Document Object Model?</h1> <p>The <abbr title="World Wide Web Consortium">W3C</abbr> defines the <abbr title="Document Object Model">DOM</abbr> as: </p> <blockquote cite="http://www.w3.org/DOM/"><p>A platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.</p> </blockquote> <p>It is an <abbr title="Application programming Interface">API</abbr> that can be used to navigate HTML and XML documents. </p>

從上面的html文件提取<abbr>,用js顯示一個縮略詞語表，結構如下圖：

js文件如下：

/*編寫displayAbbr函數*/ function displayAbbr(){if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;var abbr = document.getElementsByTagName("abbr") if (abbr.length<1) return false; //檢查是否有<abbr>var defs = new Array(); for (var i=0; i<abbr.length; i++){var abbrTitle = abbr[i].getAttribute("title");var key = abbr[i].lastChild.nodeValue;//提取<abbr>標簽里的縮略詞語//abbrTitle和key這兩個變量的值保存到defs數組里，其一用作數組下標鍵字，另一個用作數組元素的值：defs[key] = abbrTitle; }/*創建HTML內容*/ var dlist = document.createElement("dl");//用一個for/in循環去遍歷defs數組： for (key in defs){var abbrTitle = defs[key];var dtitle = document.createElement("dt");var dtitle_text = document.createTextNode(key);dtitle.appendChild(dtitle_text);var ddesc = document.createElement("dd");var ddesc_text = document.createTextNode(abbrTitle);ddesc.appendChild(ddesc_text);//以上創建了兩個分別包含著文本節點的元素節點 dlist.appendChild(dtitle);dlist.appendChild(ddesc); }var header = document.createElement("h2"); var header_text = document.createTextNode("Abbreviations"); header.appendChild(header_text);document.body.appendChild(header); document.body.appendChild(dlist);} window.onload = displayAbbr;

最后效果圖示：

?

顯示“文獻來源連接”

---

?

• continue

continue和break有點類似，區別在于continue只是終止本次循環，接著還執行后面的循環，break則完全終止循環。
可以理解為continue是跳過當次循環中剩下的語句，執行下一次循環。

• <blockquote>：定義塊引用，<blockquote> 與 </blockquote> 之間的所有文本都會從常規文本中分離出來，經常會在左、右兩邊進行縮進（增加外邊距），而且有時會使用斜體。 <q>元素標記短的引用。
• 該標簽含屬性cite，可選。用途是給出一個url地址告訴我們引用的來源。主流瀏覽器均忽視?cite 屬性的存在，用戶是無法看到的。利用js+dom，我們可以讓它顯示在網頁上。

/*顯示文獻來源*/ /*編寫displayCite函數*/ function displayCite(){if (!document.getElementsByTagName || !document.createTextNode || !document.createElement) return false;var quotes = document.getElementsByTagName("blockquote");for(var i=0; i<quotes.length; i++){if(!quotes[i].getAttribute("cite")){continue; //判斷是否有cite屬性 }var url = quotes[i].getAttribute("cite");var quoteChildren = quotes[i].getElementsByTagName("*");//取得當前blockquote元素里所有元素點if (quoteChildren.length<1) continue;var elem = quoteChildren[quoteChildren.length-1]; //取得blockquote元素里的最后一個元素點var link = document.createElement("a");var link_text = document.createTextNode("source");link.appendChild(link_text);link.setAttribute("href",url);//用sup元素節點包裝link,呈現上標效果var sup = document.createElement("sup");sup.appendChild(link);elem.appendChild(sup);} } window.onload = displayAbbr;

?

轉載于:https://www.cnblogs.com/afighter/p/5447981.html

總結

以上是生活随笔為你收集整理的第八章 熟练dom的几个常用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。