《DOM编程艺术》六、充实文档内容

来源：互联网发布：21天学通c语言 pdf 编辑：程序博客网时间：2024/05/29 11:17

title: 《DOM编程艺术》六、充实文档内容
date: 2017-06-03 10:28:24
tags: DOM编程艺术

这一章将继续在实践中应用动态创建标记

1、不应该做什么

从技术上讲，可以把任何内容动态添加到网页上，但重要的内容不要这么做，因为这样一来，javascript就没有任何空间去平稳退化，如果缺乏javascript的支持，用户会永远看不到重要的内容，而且各大搜索引擎也不支持javascript。

渐进增强和平稳退化两项原则要牢记在心，在这里再次总结一下这两项重要的原则。

渐进增强

应该从最核心的部分，也就是从内容开始，应该根据内容使用标记实现良好的结构，然后再逐步加强这些内容，这些增强工作既可以是通过css改进呈现效果，也可以是通过DOM添加各种行为，如果你正在使用DOM添加核心内容，那么添加的时机未免太迟，核心内容应在刚开始写文档时就成为文档的组成部分。

平稳退化

渐进增强的实现必然支持平稳退化，如果你按照渐进增强的原则去充实内容，你为文档添加的样式和行为自然就支持平稳退化。那些缺乏必要的css和DOM支持的访问者仍可以访问到你的核心内容，如果用javascript去添加这些内容，它就没法支持平稳退化，不支持javascript就看不到内容。

2、内容

和往常一样，任何网页都以内容为出发点，现在拿下面这段内容作为出发点。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>解释文档DOM</title>    <style>        body {            font-family:'Helvetica','Arial',sans-serif;            font-size: 10pt;        }        abbr {            text-decoration: none;            border: 0;            font-style: normal;        }    </style></head><body>    <h1>什么是DOM</h1>    <p><abbr title="万维网联盟">W3C</abbr>将<abbr title="文档对象模型">DOM</abbr>定义为:</p>    <blockquote cite="http://www.w3.org/DOM/">        <p>一个平台和语言中立的接口，将允许程序和脚本动态访问和更新的内容，结构和风格的文档。</p>    </blockquote>    <p>这是一个<abbr title="应用程序设计接口">API</abbr>可以用来浏览<abbr title="超文本标记语言">HTML</abbr>和<abbr title="可扩展标记语言">XML</abbr>文档。</p></body></html>

image

<abbr>标签用于缩略语的显示，默认情况会显示为带有下划线或下划点，但是通过css的设置已经代替了浏览器的默认样式。

<abbr>的title属性在浏览器里是隐藏的，有些浏览器会在你把鼠标指针悬停在缩略语上时，将它的title属性显示为一个弹出式的提示消息，这也是浏览器所使用的默认行为，而不同浏览器的默认样式也不尽相同。所以就像刚才用css样式去代替浏览器默认样式那样，我们也可以用DOM去改变浏览器的默认行为。

3、显示缩略语

下面我要做的是将<abbr>标签中的title属性集中起来显示在一个页面，我希望得到的定义列表是这个样子：

<dl>    <dt>W3C</dt>    <dd>万维网联盟</dd>    <dt>DOM</dt>    <dd>文档对象模型</dd>    <dt>API</dt>    <dd>应用程序设计接口</dd>    <dt>HTML</dt>    <dd>超文本标记语言</dd>    <dt>XML</dt>    <dd>可扩展标记语言</dd></dl>

用DOM来具体实现这个定义列表的步骤如下：

遍历这份文档中的所有<abbr>元素。
保存每个<abbr>元素的title属性。
保存每个<abbr>元素包含的文本。
创建一个<dl>自定义列表元素。
遍历刚才保存的title属性和<abbr>元素的文本。
创建一个<dt>标题元素。
把<abbr>元素的文本插入到这个<dt>元素。
创建一个<dd>列表项元素。
把title属性插入到这个<dd>元素。
把<dt>元素追加到第4步创建的<dl>元素上。
把<dd>元素追加到第4步创建的<dl>元素上。
把<dl>元素追加到explanation.html文档的body元素上。

按照上面的思路我将编写一个displayAbbreviations函数，并存入Enrich_document_content.js中。

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_abbr = abbreviations[i];        var definition = current_abbr.getAttribute('title');        var key = current_abbr.lastChild.nodeValue;        defs[key] = definition;    }    // 创建定义列表    var dlist = document.createElement('dl');    // 遍历定义    for(key in defs){        var definition = defs[key];        // 创建定义标题        var dtitle = document.createElement('dl');        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);    }    // 创建标题    var header = document.createElement('h2');    var header_text = document.createTextNode('缩略词');    header.appendChild(header_text);    // 把标题添加到页面主体    document.body.appendChild(header);    // 把定义列表添加到页面主体    document.body.appendChild(dlist);}

image

现在已经可以在页面显示出这个定义列表，不要忘记使用addLoadEvent函数加载。下面解析一下这个函数。

第一步仍然是检查我用到的DOM方法是否被支持。

第二步是遍历获取到的所有<abbr>元素，为了防止html中没有<abbr>元素，所以在遍历之前也做了检查，避免javascript报错。

第三步用数组保存<abbr>元素的文本和title属性，当一个元素中只有一个子节点，用lastChild获取其子节点是一个好的方法，这里将文本作为数组的下标使用，将字符串作为数组的下标也是一种常用的方式，不要被数组的下标通常为数字就被禁锢住想法。

第四步用for...in循环，去遍历之前的数组，for...in是遍历用字符串作为下标的数组的首选，将下标(key)和下标对应的值(value)添加到<dt>和<dl>元素中。

第五步是将这个定义列表和标题插入到body中，这一步没什么特别的。

4、displayAbbreviations函数的兼容性问题

按理说这个函数即检查了方法、又全部使用的DOM方法，应该不存在兼容性问题，但问题还是有，就是有的浏览器不支持<abbr>元素，如果是这样那么不仅没有缩略语列表，还会导致javascript报错。

出现这个隐患，如果现在去替换<abbr>元素太过麻烦，不论何时，要替换html中的元素都不应该作为首选。所以保证displayAbbreviations函数在IE中能够平稳退化没这个方案实现起来最简单，也就是如果浏览器不支持<abbr>元素就可以提前退出。

接下来要解决这个兼容性问题，做到平稳退化，我要在第一个for循环中加入一个判断。if(current_abbr.childNodes.length < 1) continue;这条语句会让当前元素没有子节点的话就进入下一次循环，不支持<abbr>元素的浏览器在统计<abbr>元素的子节点个数总会返回错误值。

此时因为defs数组是空的，所以它将不会创建出任何<dt>和<dd>元素，在for...in循环之后，写一个函数出口，if(dlist.childNodes.length < 1) return false;如果dlist没有子节点，那么直接跳出函数，这样就避免了报错的可能性。以下是改进后的代码

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_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;    }    // 创建定义列表    var dlist = document.createElement('dl');    // 遍历定义    for(key in defs){        var definition = defs[key];        // 创建定义标题        var dtitle = document.createElement('dl');        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;    // 创建标题    var header = document.createElement('h2');    var header_text = document.createTextNode('缩略词');    header.appendChild(header_text);    // 把标题添加到页面主体    document.body.appendChild(header);    // 把定义列表添加到页面主体    document.body.appendChild(dlist);}

如果浏览器不支持<abbr>标签，也不会出任何错误，但是也会看不到缩略语列表，不过缩略语列表也算不上页面必不可少的组成部分，如果真的是必不可少的内容，从一开始就应该把它包括在标记里。

5、显示文献来源链接表

在这个案例中，还有另一个增强文档的例子，先来看看html中这段标记。

<blockquote cite="http://www.w3.org/DOM/">    <p>一个平台和语言中立的接口，将允许程序和脚本动态访问和更新的内容，结构和风格的文档。</p></blockquote>

<blockquote>元素包含一个cite属性，它可以是一个URL地址，告诉人们<blockquote>元素的内容引自哪里，从理论上讲这是一个文献资料与县官网页链接起来的好办法。但实际上浏览器会完全忽略cite属性，所以我要把这些信息收集起来，以一种更有意义的方式把它们显示在网页上。

按照以下步骤完成displayCitetions函数，并存入Enrich_document_content.js文件中。

遍历这个文档里所有<blockquote>元素。
从<blockquote>元素提取出cite属性的值。
创建一个标识文本是source的链接。
把这个链接赋值为<blockquote>元素的cite属性值。
把这个链接插入到文献节选的末尾。

function displayCitetions(){    if(!document.getElementsByTagName || !document.createElement || !document.createTextNode){        return false;    }    // 取得所有引用    var quotes = document.getElementsByTagName('blockquote');    // 遍历引用    for(var i = 0;i < quotes.length;i++){        // 如果没有cite属性，继续循环        if(!quotes[i].getAttribute('cite')) continue;        // 保存cite属性        var url = quotes[i].getAttribute('cite');        // 取得引用中的所有元素节点        var quoteChildren = quotes[i].getElementsByTagName('*');        // 如果没有元素节点进入下一次循环        if(quoteChildren.length < 1) continue;        // 取得引用中的最后一个元素节点        var elem = quoteChildren[quoteChildren.length - 1];        // 创建标记        var link = document.createElement('a');        var link_text = document.createTextNode('source');        link.appendChild(link_text);        link.setAttribute('href',url);        var superscript = document.createElement('sup');        superscript.appendChild(link);        // 把标记添加到引用中的最后一个元素节点        elem.appendChild(superscript)    }}

image

函数执行完毕后这个<blockquote>元素的引用将会添加到段落最后的source上标中。下面来解析一下这个函数。

第一部分是筛选出cite属性，再去获取<blockquote>元素的最后一个子节点，这里<blockquote>的lastChild有可能是个换行符，所以在函数中是获取的<blockquote>下的所有元素对象，这样就可以方便的获取<blockquote>的最后一个子元素。

第二部分是创建链接和插入链接，最终让<sup>元素包含<a>元素，而<a>元素href属性保存了cite的属性值，也就是一个url地址。最后将<sup>元素插入到<blockquote>元素的最后。

阅读全文

0 0