JavaScript enriched document content, javascript enriched document
Enrich JavaScript content
I. Introduction
Use JavaScript to enrich the document content. The main purpose is to create a list of abbreviations, links to documents, and shortcut keys for existing documents ". It is basically a function used previously, and there is nothing special to note.
II:
Iii. Details
You can use Sublime Text (install Emmet plug-in) or Jetbrain Webstorm to write HTML content, which improves efficiency by N times. If you are interested, you can introduce Baidu Google Emmet.
Example.html:
<!DOCTYPE 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;}