Dom enhancing content


/ Published in: JavaScript
Save to your folder(s)

This is another script from the DOM scripting book. Not really relevant to anybody else. Useful for reminding myself about the DOM.


Copy this code and paste it in your HTML
  1. function addLoadEvent(func) {
  2. var oldonload = window.onload;
  3. if (typeof window.onload != 'function') {
  4. window.onload = func;
  5. } else {
  6. window.onload = function() {
  7. oldonload();
  8. func();
  9. }
  10. }
  11. }
  12. function displayAbbreviations() {
  13. var abbr = document.getElementsByTagName("abbr");//grab all abbr functions.
  14. if(abbr.length < 1) return false;//if there are no abbr tags, return.
  15. if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;//tests for old browsers.
  16.  
  17. abbrTitle = new Array();//create an array for the titles.
  18. abbrAbbr = new Array();//create a new array for the actual markup.
  19. dtElement = new Array();//create a new array for the dt element.
  20. dtElementText = new Array();//create a new array for the dt element text.
  21. ddElement = new Array();//create a new array for the dd element.
  22. ddElementText = new Array();//create a new array for the dd element text.
  23.  
  24. var definitionList = document.createElement("dl");//create the definition list
  25. for(i=0; i < abbr.length; i++) {//loop through the abbr's and grab the titles.
  26.  
  27. abbrTitle[i] = abbr[i].getAttribute("title");//grab the titles and insert into new array.
  28. if(abbr[i].childNodes.length < 1) continue;//IE6, abbr has 0 child nodes, CONTINUE to the next loop.ie skip.
  29. abbrAbbr[i] = abbr[i].firstChild.nodeValue;//grab the markup and insert it into an array
  30.  
  31. dtElement[i] = document.createElement("dt");//create the new dt element in the array.
  32. dtElementText[i] = document.createTextNode(abbrAbbr[i]);//create the new text node for the dtElement and insert markup.
  33. dtElement[i].appendChild(dtElementText[i]);//stick the text node to the dt Element.
  34.  
  35. ddElement[i] = document.createElement("dd");//create the new dd element in the array.
  36. ddElementText[i] = document.createTextNode(abbrTitle[i]);//create the new dd element text node and insert title.
  37. ddElement[i].appendChild(ddElementText[i]);//stick the text node to the ddElement.
  38.  
  39. definitionList.appendChild(dtElement[i]);//stick the dt element to the definitionList.
  40. definitionList.appendChild(ddElement[i]);//stick the dd element to the definitionList.
  41. }
  42. if(definitionList.childNodes.length < 1) return false;//since the definition list wasn't built in IE, it has no childnodes so escape.
  43.  
  44. var dlHeader = document.createElement("h2");//create a header element.
  45. var dlHeaderText = document.createTextNode("List of Definitions");//create the definition header text node.
  46. dlHeader.appendChild(dlHeaderText);//stick the text node to the dlHeader.
  47.  
  48. document.body.appendChild(dlHeader);//stick the definition header to the body of the document.
  49. document.body.appendChild(definitionList);//stick the definitionlist to the document.
  50. }
  51. function displayCitations() {
  52. var blockquotes = document.getElementsByTagName("blockquote");//grab all blockquote elements in the document
  53. if(blockquotes.length < 1) return false;//if there are no blockquotes, return.
  54.  
  55. var citations = new Array();//create new array for sitations.
  56. var sourceAnchor = new Array();//create a new array for the made links.
  57. var sourceAnchorText = new Array();//create a new array for the text.
  58.  
  59. for(i=0; i < blockquotes.length; i++){
  60. if(!blockquotes[i].getAttribute("cite")) continue;
  61. citations[i] = blockquotes[i].getAttribute("cite");
  62.  
  63. sourceAnchor[i] = document.createElement("a");//create the anchor link
  64. sourceAnchorText[i] = document.createTextNode("Source");//set the anchor link text to source
  65. sourceAnchor[i].appendChild(sourceAnchorText[i]);//stick the text to the anchor
  66.  
  67. sourceAnchor[i].href = citations[i];//set the anchor source to what was grabbed
  68. sourceAnchor[i].setAttribute("title", citations[i]);//set the anchor title to what was grabbed
  69.  
  70. var allElm = blockquotes[i].getElementsByTagName("*");//grab all the elements inside the blockquotes including any breaks.
  71. if(allElm.length < 1) continue;//if the quotes contains no elements continue to the next loop.
  72. var lastElm = allElm[allElm.length - 1];//the last element is the length of all the elements in the block minus one.
  73. var superscript = document.createElement("sup");
  74. superscript.appendChild(sourceAnchor[i]);//stick the link inside a superscript.
  75. lastElm.appendChild(superscript);//stick the superscript to the last child in the blockquote.
  76. }
  77. }
  78. function displayAccesskeys() {
  79. if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;//tests for old browsers.
  80. var allAnchors = document.getElementsByTagName("a");// get all anchors in the document.
  81. var theTitle = new Array();//new array for the title.
  82. var theNumber = new Array();//new array for the number.
  83. var liElement = new Array();//new array for the li elements
  84. var liElementText = new Array();//new array for the li element text.
  85.  
  86. var accessList = document.createElement("ul");//create a new list for the links.
  87. for(i=0; i < allAnchors.length; i++) {
  88. if(!allAnchors[i].getAttribute("accesskey")) continue;//if it doesn't have an acceskey, skip to the next loop.
  89. theTitle[i] = allAnchors[i].firstChild.nodeValue;//grab the title for the list.
  90. theNumber[i] = allAnchors[i].getAttribute("accesskey");//grab the number for the list.
  91.  
  92. liElement[i] = document.createElement("li");//create a new li element.
  93. liElementText[i] = document.createTextNode(theNumber[i] + ": " + theTitle[i]);//insert the text into the text node
  94. liElement[i].appendChild(liElementText[i]);//stick the text node to the li.
  95.  
  96. accessList.appendChild(liElement[i]);//stick the list item to the main list
  97. }
  98. var accessHeader = document.createElement("h2");//create a h2 for the header.
  99. var accessHeaderText = document.createTextNode("Access Keys");//create the text node for the header.
  100. accessHeader.appendChild(accessHeaderText);//stick the header text to the h2.
  101.  
  102. document.body.appendChild(accessHeader);//stick the header to the child.
  103. document.body.appendChild(accessList);//stick the list to the body.
  104. }
  105.  
  106. addLoadEvent(displayAbbreviations);
  107. addLoadEvent(displayCitations);
  108. addLoadEvent(displayAccesskeys);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.