/ 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.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function displayAbbreviations() { var abbr = document.getElementsByTagName("abbr");//grab all abbr functions. if(abbr.length < 1) return false;//if there are no abbr tags, return. if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;//tests for old browsers. abbrTitle = new Array();//create an array for the titles. abbrAbbr = new Array();//create a new array for the actual markup. dtElement = new Array();//create a new array for the dt element. dtElementText = new Array();//create a new array for the dt element text. ddElement = new Array();//create a new array for the dd element. ddElementText = new Array();//create a new array for the dd element text. var definitionList = document.createElement("dl");//create the definition list for(i=0; i < abbr.length; i++) {//loop through the abbr's and grab the titles. abbrTitle[i] = abbr[i].getAttribute("title");//grab the titles and insert into new array. if(abbr[i].childNodes.length < 1) continue;//IE6, abbr has 0 child nodes, CONTINUE to the next loop.ie skip. abbrAbbr[i] = abbr[i].firstChild.nodeValue;//grab the markup and insert it into an array dtElement[i] = document.createElement("dt");//create the new dt element in the array. dtElementText[i] = document.createTextNode(abbrAbbr[i]);//create the new text node for the dtElement and insert markup. dtElement[i].appendChild(dtElementText[i]);//stick the text node to the dt Element. ddElement[i] = document.createElement("dd");//create the new dd element in the array. ddElementText[i] = document.createTextNode(abbrTitle[i]);//create the new dd element text node and insert title. ddElement[i].appendChild(ddElementText[i]);//stick the text node to the ddElement. definitionList.appendChild(dtElement[i]);//stick the dt element to the definitionList. definitionList.appendChild(ddElement[i]);//stick the dd element to the definitionList. } if(definitionList.childNodes.length < 1) return false;//since the definition list wasn't built in IE, it has no childnodes so escape. var dlHeader = document.createElement("h2");//create a header element. var dlHeaderText = document.createTextNode("List of Definitions");//create the definition header text node. dlHeader.appendChild(dlHeaderText);//stick the text node to the dlHeader. document.body.appendChild(dlHeader);//stick the definition header to the body of the document. document.body.appendChild(definitionList);//stick the definitionlist to the document. } function displayCitations() { var blockquotes = document.getElementsByTagName("blockquote");//grab all blockquote elements in the document if(blockquotes.length < 1) return false;//if there are no blockquotes, return. var citations = new Array();//create new array for sitations. var sourceAnchor = new Array();//create a new array for the made links. var sourceAnchorText = new Array();//create a new array for the text. for(i=0; i < blockquotes.length; i++){ if(!blockquotes[i].getAttribute("cite")) continue; citations[i] = blockquotes[i].getAttribute("cite"); sourceAnchor[i] = document.createElement("a");//create the anchor link sourceAnchorText[i] = document.createTextNode("Source");//set the anchor link text to source sourceAnchor[i].appendChild(sourceAnchorText[i]);//stick the text to the anchor sourceAnchor[i].href = citations[i];//set the anchor source to what was grabbed sourceAnchor[i].setAttribute("title", citations[i]);//set the anchor title to what was grabbed var allElm = blockquotes[i].getElementsByTagName("*");//grab all the elements inside the blockquotes including any breaks. if(allElm.length < 1) continue;//if the quotes contains no elements continue to the next loop. var lastElm = allElm[allElm.length - 1];//the last element is the length of all the elements in the block minus one. var superscript = document.createElement("sup"); superscript.appendChild(sourceAnchor[i]);//stick the link inside a superscript. lastElm.appendChild(superscript);//stick the superscript to the last child in the blockquote. } } function displayAccesskeys() { if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;//tests for old browsers. var allAnchors = document.getElementsByTagName("a");// get all anchors in the document. var theTitle = new Array();//new array for the title. var theNumber = new Array();//new array for the number. var liElement = new Array();//new array for the li elements var liElementText = new Array();//new array for the li element text. var accessList = document.createElement("ul");//create a new list for the links. for(i=0; i < allAnchors.length; i++) { if(!allAnchors[i].getAttribute("accesskey")) continue;//if it doesn't have an acceskey, skip to the next loop. theTitle[i] = allAnchors[i].firstChild.nodeValue;//grab the title for the list. theNumber[i] = allAnchors[i].getAttribute("accesskey");//grab the number for the list. liElement[i] = document.createElement("li");//create a new li element. liElementText[i] = document.createTextNode(theNumber[i] + ": " + theTitle[i]);//insert the text into the text node liElement[i].appendChild(liElementText[i]);//stick the text node to the li. accessList.appendChild(liElement[i]);//stick the list item to the main list } var accessHeader = document.createElement("h2");//create a h2 for the header. var accessHeaderText = document.createTextNode("Access Keys");//create the text node for the header. accessHeader.appendChild(accessHeaderText);//stick the header text to the h2. document.body.appendChild(accessHeader);//stick the header to the child. document.body.appendChild(accessList);//stick the list to the body. } addLoadEvent(displayAbbreviations); addLoadEvent(displayCitations); addLoadEvent(displayAccesskeys);