Use JS to achieve abbreviations list, document source links and shortcut list _javascript skills

1 Abbreviations list problem starting point: a text containing a large number of abbreviations, such as:

<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 would 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>< C14/>and <abbr title= "extensible Markup Language" >XML</abbr> documents.
 </p>

The title attribute of the abbreviation label is hidden in the browser, and the default rendering style of the abbreviations is different for different browsers, so this will affect the user's experience. A better solution would be to show these indented words through a list. Such as:

<dl>
 <dt> abbreviation title/abbr.lastchild.nodevalue</dt>
 <dd> abbreviation definition description/abbr.getattribute< /dd> ...
</dl>

Use the DOM to create this list (that is, use JS to dynamically create HTML tags, the common way to see the details of JS event handling functions and the dynamic creation of HTML markup method), the approximate process is as follows:

(1) Traverse abbr
(2) Save abbr Title attribute and text
(3) Create a definition list element DL
(4) Create a definition header element DT
(5) Inserting abbr text into this dt element
(6) Create a definition description element DD
(7) Insert the ABBR title attribute into this DD element
(9) Append the elements created above

The code is as follows:

function Displayabbreviations () {//NOTE 1: Note There is no compatibility check for the DOM method var abbreviations = document.getElementsByTagName ("abbr"); var defs = new Array ()///NOTE 2: Save the Title property and text of the abbr with an array of key values//loop through the abbr list for (var i=0; i<abbreviations.le Ngth;
 i++) {var current_abbr = abbrevaitons[i];
 Note 3:if (Current_abbr.childNodes.length < 1) continue;
 var defination = current_abbr.getattributes ("title");
 var key = Current_abbr.lastChild.nodeValue;
 Defs[key] = defination;
 var dlist = document.createelement ("DL");
 Loop through the defs for (key in defs) {var defination = Defs[key];
 var dtitle = document.createelement ("DT");
 var dtitle_text = document.createTextNode (key);
 Dtitle.appendchild (Dtitle_text);
 var Ddesc = document.createelement ("dd");
 var ddesc_text = document.createTextNode (defination);
 Ddesc.appendchild (Ddesc_text);
 Dlist.appendchild (Dtitle);
 Dlist.appendchild (DDESC);
 }//Note 4:if (Dlist.childNodes.length < 1) return false; var Header = Document.createElement ("H2");
 var header_text = document.createelement ("abbreviations");
 Header.appendchild (Header_text);
 Note 5: The following two lines use the Html-dom property: Document.body, or you can use the DOM core document.getElementsByTagName ("body") [0] method;
 Document.body.appendChild (header);
Document.body.appendChild (dlist); }

Displayabbreviations has a lot of room for improvement, such as the DOM method compatibility check problem mentioned in Note 1. Also, IE6 does not support <abbr>, the problem can be solved by adding the statements in comments 3 and 5. Note 3 resolved IE6 and previous versions of IE in the statistics ABBR element node always return 0 of the problem, note 5 to solve the browser does not support the ABBR element and the problem of JS error.

2 dynamically creating a document Source link implementation method and a list of indented words are roughly the same

<blockquote> Label definition block reference, which has an optional cite attribute that defines the source of the reference. The value of this property is a URL address that is enclosed in quotation marks and points to a Web page. This property is useful for linking documents to related pages. But the mainstream browser does not support the cite property, generally will ignore it, users can not see.

Display the cite property of <blockquote> in the HTML code in 1 as a link to the following code:

function Displaycitations () {//compatibility check if (!document.getelementsbytagname | |!document.createelement | |!document.cr
 Eatetextnode) return false;
 Gets all the blockquote elements var quotes = document.getElementsByTagName ("blockquote"); 1 traverse blockquote element for (var i=0; i<quotes.length; i++) {//Check for cite property if (!quotes[i].getattribute ("cite")) Contin
 Ue
 2 Extract the value of the cite attribute var url = quotes[i].getattribute ("cite");
 Gets all the element nodes that the blockquote contains, noting that the element nodes are removed so that the text node is excluded from the var Quotechildren = quotes[i].getelementsbytagname ("*");
 Determine if the element is an empty if (Quotechildren.length < 1) continue; var elem = quotechildren[quotechildren.length-1];//Get last element node var link = document.createelement ("a");//3 create link node var li
 Nk_text = document.createTextNode ("source");
 Link.appendchild (Link_text);
 Link.setattribute ("href", url);//4 assign value to the href attribute of a link node var superscript = document.createelement ("sup");
 Superscript.appendchild (link); Elem.appendchild (superscript);//5 append node to end of <blockquote> include Node}}

3 The AccessKey property can associate <a> links with specific keystrokes of the keyboard, such as: <a href= "index.html" accesskey= "1" >HOME</A> But it seems that not all browsers support this attribute, such as opera.

Display the accesskey attribute in the HTML code below as a list of the above indented language.

<ul id= "Navigation" >
 <li><a href= "index.html" accesskey= "1" >Home</a></li>
 <li><a href= "search.html" accesskey= "4" >Search</a></li>
 <li><a href= " contact.html "accesskey=" 0 ">Contact</a></li>
 </ul>

The code is as follows:

function Displayaccesskeys () {if (!document.getelementsbytagname | |!document.createelement | |!)
document.createTextNode) return false;
Get all of the links in the document var links = document.getelementsbytagname ("a");
Create an array to store the Accesskeys var akeys = new Array (); Loop through the links for (Var i=0, i<links.length; i++) {var current_link = links[i];//If there is no ACCESSK
EY attribute, continue the loop if (Current_link.getattribute ("accesskey") = = null) continue;
Get the value of the accesskey var key = Current_link.getattribute ("accesskey");
Get the value of the link text var text = Current_link.lastChild.nodeValue;
 Add them to the array akeys[key] = text;
//Create the list var list = document.createelement ("ul");
 Loop through the Accesskeys for (key in Akeys) {var text = Akeys[key];//Create the string to put in the list item
var str = key + ":" +text; Create the list item var 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 headline var 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);

The final web page effect is as follows:

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!