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

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

js权限还没通过,所以 jsfiddle演示代码没有显示出来

-->

缩略语

这段文本包含大量的缩略语,上面都已经用<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
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。谢谢合作。

-->

时间: 2024-11-16 18:04:56

JavaScript DOM 编程艺术(第2版)读书笔记 (8)的相关文章

JavaScript DOM编程艺术(第二版)读书笔记 ——(一)

学习和工作中经常会通过搜索引擎的引导进入到博客园中,技术大牛们的知识概括往往一针见血解决了困扰我很久的大大小小的问题.可是一直都是看别人写的博客,自己一直没动过手,直到看到一个博客说到,从简到繁地记记读书笔记或知识总结是促进技术进步的一个很好的方法,觉得非常在理,学习后的整理更能记得牢固,于是最近下定决心,开始我的博客园"生活". 说了从简到繁,作为一个前端小小小小白,我决定把经典的前端书籍的读书笔记写在这里,说不定以后遗忘的时候返回来看到会有豁然开朗的感觉(偷笑). 第一章--Jav

javascript dom编程艺术 第2版

W3C 推出了标准化的DOM, 就是我们现在常用方法, 比如获取一个元素:document.getElementById(id) 语法用JavaScript编写的脚本,都是由一系列指令构成,这些指令叫做语句(statement). 只要按照正确的语法编写出来的语句才能得到正确的解释.JavaScript 每条语句以换行符或分号视为结束. 如下为两条语句:first statementsecond statement也可以放在一行:first statment; second statment;建

《JavaScript DOM编程艺术(第二版)》读书总结

这本书是一本很基础的书,但对于刚入前端不久的我来说是一本不错的书,收获还是很大的,对一些基础的东西理解得更加透彻了. 1.DOM即document object model的缩写,文档对象模型,JavaScript做的就是对DOM的操作,或者说对节点(node)的操作. 2.js中DOM.this这是都是对象,有属性有方法. 3.document对象有body属性,所以可以直接写成document.body,无需再获取body元素(document.getElementsByTagName("b

JavaScript -- JavaScript DOM 编程艺术(第2版)

/* 渐进增强 平稳退化 网页 结构层(structural layer): HTML 表示层(presentation layer): CSS <link rel="stylesheet" href="style.css" media="screen"/> 行为层(behavior layer): JavaScript <script src="scripts.js"></script>

《JavaScript DOM 编程艺术 第 2 版》

第 5 章 最佳实践 平稳退化:现在基本所有带交互的网站都使用 Ajax,SAP 也火起来了,平稳退化真是很难实现了(看到第七章发现我之前的观点是错了) 分离 JS 向下兼容 性能考虑 第 6 章 案例研究:图片库改进版 键盘访问(提高可访问性) onclick 已经帮我们处理了,eg:下面这个绑定了 onclick 的按钮鼠标左键点击和 tab 然后回车一样弹出 "clicked" <!DOCTYPE html> <html lang="en"&

javascript DOM编程艺术中文pdf版提供

http://www.readnovel.com/novel/99350/5019.htmlhttp://www.readnovel.com/novel/99350/5020.htmlhttp://www.readnovel.com/novel/99350/5021.htmlhttp://www.readnovel.com/novel/99350/5022.htmlhttp://www.readnovel.com/novel/99350/5023.htmlhttp://www.readnovel

Javascript Dom编程艺术(第2版)读书笔记

Javascript Dom编程艺术这本书我看的是第2版的,真心觉得这本书不错,它将DOM编程的一些基本原则,及如何让Javascript代码在浏览器不支持的情况下,或浏览器支持了Javascript但用户禁用它的情况下做到平衡退化,让最基本的操作仍能顺利完成,以及如何让结构与样式分享做到真正的渐近增强叙述得很清楚,也很容易理解接受.我也是看了这本书之后,才对代码优化,结构,行为,样式有了进一步的加深理解. Javascript Dom编程艺术(第2版)读书笔记,布布扣,bubuko.com

Javascript DOM 编程艺术读书笔记16/04/01

愚人节快乐 开始用webstorm了,随着学习深入,代码越来越长,因为不借助ide还真是挺难的 今天发现了一个严重的误区,text和textNode是完全不同的两个概念,之前没有特别注意,写代码很容易跳过createTextNode直接用parentNode.appendChild(text) 单独拎出来晒一晒,以后引以为戒 Javascript DOM 编程艺术读书笔记16/04/01

JavaScript DOM编程艺术 读书笔记

3 DOM DOM分别指document,object和model. DOM中包含的节点主要分为三种:元素节点.文本节点和属性节点.DOM的原子是元素节点,标签的名字就是元素的名字,元素可以包含其他的元素.没有被包含在其他元素里的唯一元素是<html>元素,它是树节点的根元素:在XHTML文档里,文本节点总是被包含在元素节点的内部.但并非所有的元素节点都包含有文本节点:属性节点用来对元素做出更具体地描述. 有3种DOM方法可获取元素节点,分别是通过元素ID.通过标签名字和通过类名字来获取. 1

JavaScript DOM 编程艺术(第2版)---序中故

前言: 虽然已入行近乎一载,却还是对自己所处的职业-前端,模模糊糊,浑浑噩噩.故,不求鹤立独群,但略知一二.从<JavaScript DOM 编程艺术(第2版)>入手,打一打基础的同时,了解一下行业发展历史.多一些不明所以的坚持,少一丝追名逐利的执念. 明确词语含义: (X)HTML,DHTML 从知乎上扒来的图片: 图片出处:HTML4,HTML5,XHTML 之间有什么区别? "浏览器嗅探":用来探测浏览器的具体品牌和具体版本的测试及分支代码 DOM(Document