/ 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);
Comments
 Subscribe to comments
                    Subscribe to comments
                
                