當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

JavaScript学习系列6 充实文档的内容

發布時間：2023/11/27 生活经验 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript学习系列6 充实文档的内容小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JavaScript 兩項基本原則

漸進增強：你應該總是從最核心的部分，也就是從內容開始。應該根據內容使用標記實現良好的結構；然后再逐步加強這些內容。
平穩退化：不支持JavaScript也能訪問基本內容。

內容：我們在Html文件中編輯如下的內容 <!DOCTYPE html> ? ??
<html lang="en">
? <head>
??? <meta http-equiv="content-type" content="text/html; charset=utf-8" />
??? <title>Explaining the Document Object Model</title>
? ?? ? ? <link rel="stylesheet" type="text/css" media="screen" href="styles/typography.css" /> ? ? ??
??? <script type="text/javascript" src="scripts/addLoadEvent.js"></script>
??? <script type="text/javascript" src="scripts/displayAbbreviations.js"></script>
??? <script type="text/javascript" src="scripts/displayCitations.js"></script>
? </head>
? <body>
??? <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 <abbr title="HyperText Markup Language">
????????? HTML</abbr> and <abbr title="eXtensible Markup Language">XML
????????? </abbr> documents.
??? </p>
? </body>
</html> <abbr>：文檔類型說明編寫displayAbbreviations函數：把<abbr>標簽中的title屬性集中起來顯示在一個頁面。 function displayAbbreviations() { //檢查瀏覽器是否支持函數
? ?????if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) ?????return false;
? ? ? ?// 獲取所有的縮略詞
? ?????var abbreviations = document.getElementsByTagName("abbr");
? ?????if (abbreviations.length < 1) ?????return false; ? ? ? ? ? ? ??//如果沒有直接返回
? ?????var defs = new Array();
? ? ? ?
? ?????for (var i=0; i<abbreviations.length; i++) {
? ? ? ?var current_abbr = abbreviations[i];
? ? ? ?if (current_abbr.childNodes.length < 1) continue;
? ? ? ?var definition = current_abbr.getAttribute("title"); ? ? ? ? ?//縮略語的解釋文本
? ? ? ?var key = current_abbr.lastChild.nodeValue;
? ? ? ?defs[key] = definition; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//縮略語
? ? ? ?}
?????// 創建列表
? ? ?var dlist = document.createElement("dl");

? ? ?for (key in defs) {

var definition = 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(definition);
? ? ? ? ? ? ddesc.appendChild(ddesc_text);
? ? ? ? ? ??// 以上加入的列表當中并進行循環
? ? ? ? ? ? dlist.appendChild(dtitle);
? ? ? ? ? ? dlist.appendChild(ddesc);
? ? ?}
? if (dlist.childNodes.length < 1) return false; //創建標題，內容為Abbreviations
? var header = document.createElement("h2");
? var header_text = document.createTextNode("Abbreviations");
? header.appendChild(header_text);

? document.body.appendChild(header);
? document.body.appendChild(dlist);
} 顯示“快捷鍵清單” accesskey：屬性可以把一個元素與鍵盤上的某個特定按鍵關聯在一起。 Windows：快捷鍵的用法是同時按ALT鍵和特定鍵 Mac：同時按Ctrl和特定鍵下面是accesskey的一個例子： <a href="index.html" accesskey="1">Home</a>

轉載于:https://www.cnblogs.com/tcpcg/archive/2012/02/12/2347946.html

總結

以上是生活随笔為你收集整理的JavaScript学习系列6 充实文档的内容的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： really want是什么歌啊？
下一篇：思念水饺吃成泡沫水饺（图）思念质量门