顯示“縮略詞語(yǔ)”

---

• <abbr> 標(biāo)簽指示簡(jiǎn)稱或縮寫，比如

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

• <acronym> 標(biāo)簽定義首字母縮寫。HTML5中已經(jīng)不支持該標(biāo)簽。建議用<abbr>標(biāo)簽代替。
• ”定義表“（<dl>）由一系列“定義標(biāo)題”<dt>和相應(yīng)的“定義描述”<dd>構(gòu)成。
• for/in循環(huán)

它的獨(dú)特之處是可以把某個(gè)數(shù)組的下標(biāo)鍵字臨時(shí)賦值給一個(gè)變量：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顯示一個(gè)縮略詞語(yǔ)表，結(jié)構(gòu)如下圖：

js文件如下：

/*編寫displayAbbr函數(shù)*/ 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>標(biāo)簽里的縮略詞語(yǔ)//abbrTitle和key這兩個(gè)變量的值保存到defs數(shù)組里，其一用作數(shù)組下標(biāo)鍵字，另一個(gè)用作數(shù)組元素的值：defs[key] = abbrTitle; }/*創(chuàng)建HTML內(nèi)容*/ var dlist = document.createElement("dl");//用一個(gè)for/in循環(huán)去遍歷defs數(shù)組： 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);//以上創(chuàng)建了兩個(gè)分別包含著文本節(jié)點(diǎn)的元素節(jié)點(diǎn) 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;

最后效果圖示：

?

顯示“文獻(xiàn)來(lái)源連接”

---

?

• continue

continue和break有點(diǎn)類似，區(qū)別在于continue只是終止本次循環(huán)，接著還執(zhí)行后面的循環(huán)，break則完全終止循環(huán)。
可以理解為continue是跳過(guò)當(dāng)次循環(huán)中剩下的語(yǔ)句，執(zhí)行下一次循環(huán)。

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

/*顯示文獻(xiàn)來(lái)源*/ /*編寫displayCite函數(shù)*/ 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("*");//取得當(dāng)前blockquote元素里所有元素點(diǎn)if (quoteChildren.length<1) continue;var elem = quoteChildren[quoteChildren.length-1]; //取得blockquote元素里的最后一個(gè)元素點(diǎn)var link = document.createElement("a");var link_text = document.createTextNode("source");link.appendChild(link_text);link.setAttribute("href",url);//用sup元素節(jié)點(diǎn)包裝link,呈現(xiàn)上標(biāo)效果var sup = document.createElement("sup");sup.appendChild(link);elem.appendChild(sup);} } window.onload = displayAbbr;

?

轉(zhuǎn)載于:https://www.cnblogs.com/afighter/p/5447981.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。