This chapter is about the application and practice of the previous chapter.
The basic idea is to use JavaScript functions to extract some of the existing information in the document structure, and then re-insert that information into the document in a clear and meaningful way.
The reference HTML is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>8</title>
<link rel="stylesheet" type="text/css" href="8.css">
</head>
<body>
<div class="body">
<ul class="navigate">
<li>
<a href="#" accesskey="1">Home</a>
</li>
<li>
<a href="#" accesskey="4">Search</a>
</li>
<li>
<a href="#" accesskey="9">Contact</a>
</li>
</ul>
<h1>What is the Document Object Model?</h1>
<p>The <abbr title="World Wide Web Consortium">W3C</abbr> defines the <abbr title="Document Object Model" >DOM</abbr> as:
</p>
<blockquote cite="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 <abbr title="Application Programming Interface">API</abbr> that
can be used to navigate <abbr title="HyperText Markup Language">HTML</abbr>
and <abbr title="eXtensible Markup Language">XML</abbr> documents.
</p>
<script type="text/javascript" src="8.js"></script>
</div>
</body>
</html>Show the list of acronyms
That is to extract title attributes and text from < abbr > tags.
Make lists in the form of key-value pairs.
The specific steps are as follows:
- Traverse all abbr elements in this document
- Save the title attribute for each abbr element
- Save the text contained in each abbr element
- Create a Definition List element (that is, dl element)
- Traverse the text of the title attribute and abbr element that you just saved
- Create a Definition Title element (that is, dt element)
- Insert the text of the abbr element into the dt element
- Create a Definition Description element (dd element)
- Insert the title attribute into the dd element
- Append the dt element to the dl element created in step 4
- Append the dd element to the dl element created in step 4
- Append the dl element to the body element of the document
Corresponding code:
function displayAbbreviations(){
if(!document.getElementsByTagName || !document.createElement || !document.createTextNode){
return false;
}
var abbreviations = document.getElementsByTagName("abbr");
if(abbreviations.length < 1)return false;
var defs = new Array();
for(var i=0; i<abbreviations.length; i++){
var current_i = abbreviations[i];
var definition = current_i.getAttribute("title");
var key = current_i.firstChild.nodeValue;
defs[key] = definition;
}
var dlist = document.createElement("dl");
for(key in defs){
var definition = defs[key];
var dtitle = document.createElement("dt");
var dtitle_text = document.createTextNode(key);
var ddesc = document.createElement("dd");
var ddesc_text = document.createTextNode(definition);
dtitle.appendChild(dtitle_text);
ddesc.appendChild(ddesc_text);
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
var header = document.createElement("h2");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
document.body.appendChild(header);
document.body.appendChild(dlist);
}In the code above, we use the for-in statement. It is a precise iteration statement that can be used to enumerate the attributes of an object.
The grammar is as follows: for (property in expression) statement
Display "Document Source Link Table"
function displayCitations(){
if(!document.getElementsByTagName || !document.createTextNode || !document.createElement){
return false;
}
var quotes = document.getElementsByTagName("blockquote");
var anchor_text = document.createTextNode("source");
for(var i=0; i<quotes.length; i++){
if(!quotes[i].getAttribute("cite"))continue;
var links = quotes[i].getAttribute("cite");
var quoteElem = quotes[i].getElementsByTagName("*");
if(quoteElem.length<1)continue;
var anchor = document.createElement("a");
anchor.appendChild(anchor_text);
anchor.setAttribute("href",links);
anchor.setAttribute("target", "_blank");
var sup = document.createElement("sup");
sup.appendChild(anchor);
var elem = quoteElem[quoteElem.length - 1];
elem.appendChild(sup);
}
}Show Shortcut List
function displayAccesskeys(){
if(!document.getElementsByTagName){
return false;
}
var links = document.getElementsByTagName("a");
var akeys = new Array();
for(var i=0; i<links.length; i++){
if(!links[i].getAttribute("accesskey"))continue;
var accesskey = links[i].getAttribute("accesskey");
if(links[i].firstChild.nodeType == 3){
var text = links[i].firstChild.nodeValue;
akeys[accesskey] = text;
}
}
var list = document.createElement("ul");
for(key in akeys){
var text = akeys[key];
var str = key + " : " + text;
var item = document.createElement("li");
var item_text = document.createTextNode(str);
item.appendChild(item_text);
list.appendChild(item);
}
var header = document.createElement("h2");
var header_text = document.createTextNode("Accesskey");
header.appendChild(header_text);
document.body.appendChild(header);
document.body.appendChild(list);
}The ultimate effect: 
These three exercises focus on the way we think when using DOM and the interconnection of different types of elements.