JavaScript DOM Programming Art (2nd edition) reading notes (8)

<!--the content of this chapter is slightly strange! May be because I have not been exposed to these knowledge points, and so on later used to come back to read it, now briefly introduce

JS permissions have not passed, so the Jsfiddle demo code is not shown

-

Abbreviations

This text contains a large number of acronyms, which have been identified with the <abbr> tag.

Some browsers display acronyms (<abbr> tags) in the document as text with underscores or down points, while others display abbreviations in italics.

The title attribute of the abbreviation (<abbr> tag) is hidden in the browser. Some browsers display the title property as a pop-up message when you hover the mouse pointer over the abbreviation. Just like the default style used by the browser, the default rendering behavior of the browser for abbreviations is also a different practice.

We can use the DOM to change the browser's default behavior.

It is most appropriate to use a definition list element to centrally display the text and title attributes contained in these <abbr> tags. The code is as follows:

<DL>  <DT>W3c</DT>  <DD>World Wide Web Consortium</DD>  <DT>Dom</DT>  <DD>Document Object Model</DD>  <DT>Api</DT>  <DD>Application Programming Interface</DD>  <DT>Html</DT>  <DD>Hypertext Markup Language</DD>  <DT>Xml</DT>  <DD>Extensible Markup Language</DD></DL>

You can use the DOM to create this definition list:

A browser "landmine"

The Displayabbreviations function does work fine, but if you're using a browser that's IE6 or earlier, you'll most likely see a JavaScript error message.

It also starts with the browser war mentioned in the 1th chapter of this book. In that war, Netscape and Microsoft had used <abbr> and <acronym> tags as one of their weapons. When the competition was most intense, Microsoft decided not to implement ABBR elements in its own browser.

The browser war had already vanished, and the end result was that Microsoft had defeated Netscape, but Microsoft's IE browser didn't support abbr elements until IE7. The Displayabbreviations function failed in earlier versions because it attempted to extract attribute nodes and text nodes from some abbr element nodes, while IE refused to acknowledge the "element" status of those abbr nodes.

There are three types of solutions to choose from:

1, replace the ABBR element with the acronym element uniformly. I'm not interested in this solution because I don't want to "sacrifice" a large number of semantically correct tags to accommodate a stubborn browser.

2, use the HTML namespace (

3, ensure that the displayabbreviations function in IE can be degraded smoothly. The solution is the simplest and most easily accepted. As long as you write more lines of code, IE (or other browsers that do not recognize abbr elements) can exit early.

So, we choose the Third kind.

First, in charge of extracting the title attribute value from the abbr element and the text is worth adding a statement to the FOR loop:

 for (var i=0; i<abbreviations.length;i++) {        var current_abbr = abbreviations[i];         ifcontinue;         var definition = Current_abbr.getattribute ("title");         var key = current_abbr.lastChild.nodeValue;         = definition;    }

The new statement means: "If the current element has no child nodes, start the next loop immediately." Because IE browser will always return an incorrect value-0 when counting the number of child nodes of the abbr element, this new statement will allow IE to no longer execute subsequent code in this loop.

Next, add such a statement after the for loop that is responsible for creating the list of abbreviations:

 //Traversal definition     for(Keyinchdefs) {        varDefinition =Defs[key]; //Create a definition list        varDtitle = document.createelement ("DT"); varDtitle_text =document.createTextNode (key);        Dtitle.appendchild (Dtitle_text); //Create definition Description        varDdesc = document.createelement ("DD"); varDdesc_text =document.createtextnode (definition);        Ddesc.appendchild (Ddesc_text); //add them to the definition listDlist.appendchild (Dtitle);    Dlist.appendchild (DDESC); }    if(dlist.childnodes.length<1)return false;

When the IE browser executes to this for loop, because the defs array is empty, it will not create any DT and DD elements. The new statement we added after the for loop causes the program to exit the Displayabbreviations function immediately. Although the newly added if statement violates the structural programming principle once again (a function should have only one entry and one exit)-it is equal to the addition of an exit point in the middle of the function. But this should be the easiest way to solve the problem of IE browser and not need to make a fuss of the existing function code.

Document Source Link Table

The BLOCKQUOTE element contains a cite attribute, which is an optional attribute that you can give it a URL address that tells people where the content of the BLOCKQUOTE element is quoted. Theoretically, this is a good way to link the literature and related pages, but in practice, the browser completely ignores the existence of the cite attribute. Although the information is there, users cannot see them. With JavaScript and DOM, we can completely collect that information and insert it into the document using the SUP element.

List of shortcut keys

The AccessKey property can associate an element (such as a link) with a specific key on the keyboard. This is useful for people who can't or don't like using a mouse to browse the Web.

In general, in browsers for Windows systems, the use of shortcut keys is to press the ALT key and specific keys at the same time on the keyboard, and in browsers for Mac systems, the use of shortcut keys is to press the CTRL key and the specific keys at the same time.

Here is an example of the AccessKey property:

<a href= "index.html" accesskey= "1" >Home</a>

Some of the basic shortcuts have a conventional set of methods, interested readers can browse http://www.clagnut.com/blog/193/.

accesskey= "1" corresponds to a "return to the homepage of this website" link;

accesskey= "2" corresponds to a "back to the previous page" link;

accesskey= "4" corresponds to a "Open search Form/page of this website" link;

accesskey= "9" corresponds to a "contact method of this Site" link;

accesskey= "0" corresponds to a "View the shortcut list of this website" link;

There are a number of websites that list the shortcut keys that are supported on a shortcut lists page.

<!--

Fiber Sharp
Source: http://www.cnblogs.com/beginner2014/p/4176730.html
This article is copyrighted by the author and the blog Park, Welcome to reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original link. Thank you for your cooperation.

-

JavaScript DOM Programming Art (2nd edition) reading notes (8)