首頁 > 開發者 > 網站開發

JavaScript 充實文檔內容，javascript充實文檔

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

JavaScript 充實文檔內容，javascript充實文檔
JavaScript 充實文檔內容

 

一：簡介

 

        使用JavaScript來充實文檔內容。主要目的是為現有文檔建立一個“縮減語列表”、“文獻來源連結”、“快速鍵清單”。基本都是前面使用過的函數、沒有什麼要特別說明的地方。

 

二：

 

 

 

三：具體內容

 

        HTML的內容的編寫可以使用Sublime Text （安裝Emmet外掛程式）、或者Jetbrain的Webstorm神器、效率提高N倍。有興趣的可以百度GoogleEmmet簡介。

   

        example.html：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>Enhancing Content</title>    <link rel="stylesheet" href="../style/example.css" />    <script src="../js/displayAbbreviations.js"></script>    <script src="../js/addLoadEvent.js"></script>    <script src="../js/displayAccessKeys.js"></script></head><body><ul id="navigation"><li><a href="home.html" accesskey="1">Home</a></li><li><a href="Search.html" accesskey="4">Search</a></li><li><a href="Contact.html" accesskey="9">Contact</a></li></ul><h1>What is the Document Object Model?</h1><p>The <abbr title="World Wide Web Consortium">W3C</abbr></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>


displayAbbreviations.js: 

/** * Created by andychen on 2015/1/8. *//** * Change abbreviations display style. */function displayAbbreviations() {    if (!document.createElement) {return false;}    if (!document.createTextNode) {return false;}    if (!document.getElementsByTagName) {return false;}var h2 = document.createElement("h2");var h2Text = document.createTextNode("Abbreviations");h2.appendChild(h2Text);    var dl = document.createElement("dl");    var abbrArray = document.getElementsByTagName('abbr');    if (abbrArray.length == 0) {return false;}    for (var i = 0; i < abbrArray.length; i++) {        //Continue for loop if abbr is not supported by the current browser.        if (abbrArray[i].childNodes.length < 1) continue;    var abbrTitleNode = document.createTextNode(abbrArray[i].title);    var abbrTextNode = document.createTextNode(abbrArray[i].firstChild.nodeValue);    var dt = document.createElement("dt");    var dd = document.createElement("dd");    dd.appendChild(abbrTitleNode);    dt.appendChild(abbrTextNode);    dl.appendChild(dt);    dl.appendChild(dd);    }//document.body.appendChild(h2).appendChild(dl);document.body.appendChild(h2);document.body.appendChild(dl);}


displayAccessKeys.js:

/** * Created by andychen on 2015/1/8. */function displayAccessKeys (){    if (!document.getElementById) {        return false;    }    if (!document.getElementsByTagName) {        return false;    }    if (!document.createElement) {        return false;    }    var ulNode = document.getElementById("navigation");    var aList = ulNode.getElementsByTagName("a");    if (aList.length <= 0) {        return false;    }    var h3 = document.createElement("h3");    var newUl = document.createElement("ul");    for (var i = 0; i < aList.length; i++) {        var current_link = aList[i];        var current_link_value = current_link.lastChild.nodeValue;        var current_link_accesskey = current_link.accessKey;        if (!current_link_accesskey) continue;        var newLi = document.createElement("li");        var str = current_link_accesskey + ":" + current_link_value;        var newALink = document.createElement("a");        newALink.innerText = str;        newALink.href = current_link.href;        newALink.accessKey = current_link_accesskey;        newLi.appendChild(newALink);        newUl.appendChild(newLi);        console.info("accesskey:" + current_link_accesskey)    }    var accessKeyTile = document.createTextNode("AccessKey : ");    h3.appendChild(accessKeyTile);    document.body.appendChild(h3);    document.body.appendChild(newUl);}addEvent(displayAccessKeys);


addLoadEvent.js:

/** * Created by andy on 1/7/2015. *//** * Multiple execute window.onload; */function addEvent(fun){var oldFunction = window.onload;if (!oldFunction) {window.onload = fun;} else {window.onload = function () {oldFunction();fun();}}}addEvent(displayAbbreviations);

example.css:

body {    font-family: Helvetica, Arial, sans-serif;    font-size: 10pt;}abbr{    text-decoration: none;}



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More