JavaScript DOM 编程艺术（第2版）读书笔记 (8)

时间：2024-01-09 17:08:20

<!--这章的内容略奇怪啊！可能是因为我之前没有接触过这些知识点，等以后用到的时候再回来翻阅吧，现在先简要介绍一下

js权限已通过，博客园好快的效率啊，谢谢O(∩_∩)O

-->

缩略语

这段文本包含大量的缩略语，上面都已经用<abbr>标签把它们标识出来了。

有些浏览器会把文档中的缩略语（<abbr>标签）显示为带有下划线或下划点的文本，另一些浏览器则会把缩略语显示为斜体字。

缩略语（<abbr>标签）的title属性在浏览器里是隐藏的。有些浏览器会在你把鼠标指针悬停在缩略语上时，将它的title属性显示为一个弹出式的提示消息。就像浏览器所使用的默认样式那样，浏览器对缩略语的默认呈现行为也是各有各的做法。

我们可以使用DOM去改变浏览器的默认行为。

用一个定义列表元素来集中显示这些<abbr>标签包含的文本和title属性最合适不过了。代码如下：

<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>

你可以使用DOM来创建这个定义列表:

一个浏览器“地雷”

displayAbbreviations函数确实工作的不错，但是如果你使用的浏览器是IE6或更早的Windows版本，极有可能会看到一条JavaScript出错消息。

事情还要从本书第1章里提到的浏览器大战说起。在那场大战中，网景公司和微软公司曾把<abbr>和<acronym>标签当作它们的武器之一。在竞争最激烈时，微软决定不在自己的浏览器里实现abbr元素。

那场浏览器大战早已烟消云散，最终结果是微软打败了网景，但微软的IE浏览器直到IE7才支持abbr元素。displayAbbreviations函数在早期版本中失败，是因为它试图从一些abbr元素节点那里提取属性节点和文本节点，而IE浏览器却拒绝承认那些abbr节点的“元素”地位。

可供选择的解决方案有三种：

1，把abbr元素统一替换为acronym元素。我对这种解决方案不感兴趣，因为我不想为了迁就一种顽固不化的浏览器而“牺牲”一大批语义正确的标记。

2，在元素中使用html命名空间（<html:abbr>abbr</html:abbr>),这样IE就可以认出这些元素。这个方案涉及修改标记，如果要在其它文档中使用displayAbbreviations函数，问题仍得不到解决。

3，保证displayAbbreviations函数在IE中能够平稳退化。这个方案实现起来最简单，也最容易被人接受。只要多写几行代码，IE（或其他不能识别abbr元素的浏览器）就可以提前退出。

所以，我们选用第三种。

首先，在负责从abbr元素提取title属性值和文本值得for循环里添加一条语句：

 for(var i=0; i<abbreviations.length;i++){

        var current_abbr = abbreviations[i];

        if(current_abbr .childNodes.length<1) continue;

        var definition = current_abbr.getAttribute("title");

        var key = current_abbr.lastChild.nodeValue;

        defs[key] = definition;

    }

这条新语句是的含义是：“如果当前元素没有子节点，就立刻开始下一次循环”。因为IE浏览器在统计abbr元素的子节点个数时总是会返回一个错误的值——零，所以这条新语句会让IE浏览器不再继续执行这个循环中的后续代码。

其次，在负责创建“缩略语列表“的那个for循环后面添加这样一条语句：

 //遍历定义

    for(key in defs){

        var definition = 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(definition);

        ddesc.appendChild(ddesc_text);

        //把它们添加到定义列表

        dlist.appendChild(dtitle);

        dlist.appendChild(ddesc);

    }

    if(dlist.childNodes.length<1) return false;

当IE浏览器执行到这个for循环时，因为defs数组是空的，所以它将不会创建出任何dt和dd元素。我们在for循环后面添加的这条新语句会让程序立刻退出displayAbbreviations函数。虽然新添加的这条if语句又一次违背了结构化程序设计原则（一个函数应该只有一个入口和一个出口）——它等于是在函数的中间增加了一个出口点。但这应该是既可以解决IE浏览器的问题，又不需要对现有的函数代码大动干戈的最简单的办法了。

文献来源链接表

blockquote元素包含一个cite属性，这是一个可选属性，你可以给它一个URL地址，告诉人们blockquote元素的内容引自哪里。从理论上讲，这是一个把文献资料与相关网页链接起来的好办法；但在实践中，浏览器完全忽视cite属性的存在。虽然信息就在那里，但用户却无法看到它们。利用JavaScript和DOM，我们完全可以把那些信息收集起来，并利用sup元素把它插入文档。

快捷键清单

accesskey属性可以把一个元素（如链接）与键盘上的某个特定按键关联在一起。这对那些不能或不喜欢使用鼠标来浏览网页的人们很有用。

一般来说，在适用于Windows系统的浏览器里，快捷键的用法是在键盘上同时按下Alt键和特定按键；在适用于Mac系统的浏览器里，快捷键的用法是同时按下Ctrl键和特定按键。

下面是accesskey属性的一个例子：

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

一些基本的快捷键都有约定俗成的设置办法，对此感兴趣的读者可以浏览http://www.clagnut.com/blog/193/。

accesskey="1"对应着一个“返回到本网站主页”的链接；

accesskey="2"对应着一个“后退到前一页面”的链接；

accesskey="4"对应着一个“打开本网站的搜索表单/页面”的链接；

accesskey="9"对应着一个“本网站联系办法”的链接；

accesskey="0"对应着一个“查看本网站的快捷键清单”的链接；

有许多网站都会在一个快捷键清单页面上列明该网站都支持哪些快捷键。

<!--

作者：纤锐
出处：http://www.cnblogs.com/beginner2014/p/4176730.html
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。谢谢合作。

-->

相关文章