Posted By

1man on 02/04/07


Tagged

javascript DOM tutorial


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

simpeligent
shachi
vali29


Dom enhancing content


 / Published in: JavaScript
 

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

  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  

You need to login to post a comment.