<!DOCTYPEhtml><html><head><metahttp-equiv="content-type"content="text.html; charset=utf-8"/><title>Explaining the Document Object Model</title><linkrel="stylesheet"type="text/css"media="screen"href="styles/typography.css"/><scripttype="text/javascript"src="scripts/addLoadEvent.js"></script><scripttype="text/javascript"src="scripts/displayAbbreviations.js"></script><scripttype="text/javascript"src="scripts/displayCitations.js"></script><scripttype="text/javascript"src="scripts/displayAccesskeys.js"></script></head><body><ulid="navigation"><li><ahref="index.html"accesskey="1">Home</a></li><li><ahref="search.html"accesskey="4">Search</a></li><li><ahref="contact.html"accesskey="9">Contact</a></li></ul><h1>What is the Document Objec Model?</h1><p>
The <abbrtitle="World Wide Web Consortium">W3C</abbr> defines the <abbrtitle="Document Object Model">DOM</abbr> as:
</p><blockquotecite="http://www.w3.org/DOM/"><p>
A platform- and language-neutral interface that will allow programs and scripts to dynamically access and
update the content, structure and style of documents.
</p></blockquote><p>
It is an <abbrtitle="Application Programming Interface">API</abbr> that can be used to navigate <abbrtitle="HyperText Markup Language">HTML</abbr> and <abbrtitle="eXtensible Markup Language">XML</abbr>
documents.
</p></body></html>
functiondisplayAbbreviations(){if(!document.getElementsByTagName ||!document.createElement ||!document.createTextNode)returnfalse;//get all the abbreviationsvar abbreviations = document.getElementsByTagName("abbr");if(abbreviations.length <1)returnfalse;var defs =newArray();//loop through the abbreviationsfor(var i =0; i < abbreviations.length; i++){var current_abbr = abbreviations[i];var definition = current_abbr.getAttribute("title");var key = current_abbr.lastChild.nodeValue;
defs[key]= definition;}//create the definition listvar dlist = document.createElement("dl");//loop through the definitionsfor(key in defs){var definition = defs[key];//create the definition titlevar dtitle = document.createElement("dt");var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);//create the definition decriptionvar ddesc = document.createElement("dd");var ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);//add them to the definition list
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);}//create a headlinevar header = document.createElement("h2");var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);//add the headline to the body
document.body.appendChild(header);//add the definition list to the body
document.body.appendChild(dlist);}addLoadEvent(displayAbbreviations);
scripts/displayCitations.js
functiondisplayCitations(){if(!document.getElementsByTagName ||!document.createElement ||!document.createTextNode)returnfalse;// get all the blockquotesvar quotes = document.getElementsByTagName("blockquote");// loop through all the blockquotesfor(var i =0; i < quotes.length; i++){// if there is no cite attribute, continue the loopif(!quotes[i].getAttribute("cite"))continue;// store the cite attributevar url = quotes[i].getAttribute("cite");// get all the element nodes in the blockquotevar quoteChildren = quotes[i].getElementsByTagName('*');// if there are no element node, continue the loopif(quoteChildren.length <1)continue;// get the last element node in the blockquotevar elem = quoteChildren[quoteChildren.length -1];// create the markupvar link = document.createElement("a");var link_text = document.createTextNode("source");
link.appendChild(link_text);
link.setAttribute("href", url);var superscript = document.createElement("sup");
superscript.appendChild(link);// add the markup to the last element node in the blockquote
elem.appendChild(superscript);}}addLoadEvent(displayCitations);
scripts/displayAccesskeys.js
functiondisplayAccesskeys(){if(!document.getElementsByTagName ||!document.createElement ||!document.createTextNode)returnfalse;// get all the links in the documentvar links = document.getElementsByTagName("a");// create an array to store the access keysvar akeys =newArray();// loop through the linksfor(var i =0; i < links.length; i++){var current_link = links[i];// if there is no accesskey attribute, continue the loopif(!current_link.getAttribute("accesskey"))continue;// get the value of the accesskeyvar key = current_link.getAttribute("accesskey");// get the value of the link textvar text = current_link.lastChild.nodeValue;// add them to the array
akeys[key]= text;}// create the listvar list = document.createElement("ul");// loop through the access keysfor(key in akeys){var text = akeys[key];// create the string to put in the list itemvar str = key +": "+ text;// create the list itemvar item = document.createElement("li");var item_text = document.createTextNode(str);
item.appendChild(item_text);// add the list item to the list
list.appendChild(item);}// create a headlinevar header = document.createElement("h3");var header_text = document.createTextNode("Accesskeys");
header.appendChild(header_text);// add the headline to the body
document.body.appendChild(header);// add the list to the body
document.body.appendChild(list);}addLoadEvent(displayAccesskeys);