充实文档的内容，包括几个方面：

一个为文档创建“缩略图列表”的函数；

一个为文档创建“文献来源链接”的函数；

一个为文档创建“快捷键清单”的函数。

<abbr>在HTML5 中以取代<acronym>。

标记选择：

HTML，允许省略部分结束标签（</p>，</li>）。标签和属性可以大写和小写。

XHTML，有严格要求，督促我们写出更严谨清晰的文档。仅允许标签名和属性名用小写字母。所有标签必须闭合。

HTML5，<!DOCTYPE html> 改标记支持HTML，XHTML。

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <link rel="stylesheet" media="screen" href="typography.css" />

  <title>Document</title>

 </head>

 <body>

 <h1>what is the document object model</h1>

 <p>

 The <abbr title="world wide web consortium">W3C </abbr>defines the <abbr title ="document object model">DOM</abbr> as:

 </p>

 <blockquote cite="https://www.baidu.com">

 <p>

 A platform- and language-neutral interface that will 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 programs interface"> API </abbr> that can be used to navigate <abbr title ="HyperText Markup Language"> HTML </abbr> and <abbr title="eXtensible markup language"> XML </abbr> documents.

  </p>

 </body>

</html>

在浏览器中的显示：

<abbr>标签的title属性在浏览器中是隐藏的。但在鼠标指针悬浮在缩略语上是，title属性会根据不同的浏览器显示不同。让JS集中页面的缩略图，显示缩略图列表脚本

定义列表是表现缩略图及其解释的理想结构。

定义列表<dl>由一系列“定义标题”<dt>和相应的“定义描述”<dd>构成。

window.onload=displayAbbreviation;

function displayAbbreviation(){

    if (!document.getElementsByTagName) return false;

    if (!document.createElement) return false;

    if (!document.createTextNode) return false;

    var abbreviation=document.getElementsByTagName("abbr"); //知道所有缩略词

    var tabletitle=document.createElement("dl");//建表

    var defs=new Array();//存入数组

    for (i=0;i<abbreviation.length ;i++ )

    {

        if (abbreviation[1].childNodes.length<1)

        {

            continue;

        }

        var key=abbreviation[i].firstChild.nodeValue;

        var value=abbreviation[i].getAttribute("title");

        defs[key]=value;

        var abbrvia=document.createElement("dt");

        var txt=document.createTextNode(key);

        abbrvia.appendChild(txt);

        tabletitle.appendChild(abbrvia);

        var descrip=document.createElement("dd");

        txt=document.createTextNode(value);

        descrip.appendChild(txt);

        tabletitle.appendChild(descrip);

    }

    if (defs)

    {

        var bodyelement=document.getElementsByTagName("body")[0];

        var de=document.createElement("h2");

        txt=document.createTextNode("abbreviation");

        de.append(txt);

        bodyelement.appendChild(de);

        bodyelement.appendChild(tabletitle);

    }

}

显示“文献来源链接表”

function displayCitations(){

    if (!document.getElementsByTagName)

    {

        return false;

    }

    if (!document.createElement)

    {

        return false;

    }

    if (!document.createTextNode)

    {

        return false;

    }

    var cite=document.getElementsByTagName("blockquote");

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

    {

        if (!cite[i].getAttribute("cite"))

        {

            continue;

        }

        var webcite=cite[i].getAttribute("cite");

        var source=document.createElement("a");

        var txt=document.createTextNode("cite");

        source.setAttribute("href",webcite);

        source.appendChild(txt);

        var supscript=document.createElement("sup");

        supscript.appendChild(source);

        var citeChildren=cite[i].getElementsByTagName("*");

        citeChildren[citeChildren.length-1].appendChild(supscript);

    }

}

显示“快捷键清单”

function displayAccessKeys(){

    if (!document.getElementsByTagName) return false;

    if (!document.createElement) return false;

    if (!document.createTextNode) return false;

    var link=document.getElementsByTagName("a");

    var acckey=new Array();

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

    {

        if(!link[i].getAttribute("accesskey") || !link[i].getAttribute("href"))

            continue;

        var key=link[i].getAttribute("accesskey");

        var value=link[i].getAttribute("href");

        acckey[key]=value;

    }

    var list=document.createElement("ul");

    for (key in acckey)

    {

        var alist=document.createElement("li");

        var txt=key+" : "+value;

        var txtnode=document.createTextNode(txt);

        alist.appendChild(txtnode);

        list.append(alist);

    }

    var head=document.createElement("h3");

    txt=document.createTextNode("AccessKey");

    head.appendChild(txt);

    document.body.appendChild(head);

    document.body.appendChild(list);

}

小结：

1. 本章提供了几个有意思的脚本，还可以为文档生成目录：把文档里的h1和h2元素提取出来放入一份清单，再将其插入到文档的开头。甚至可以把这份清单里的列表项加强为一些可以让用户快速到达各有关标题的内部链接。

2. 最有用的DOM方法：

getElementsByTagName

getElementById

getAttribute

createElement

createTextNode

appendChild

insertBefore

setAttribute

《JavaScript Dom 编程艺术》读书笔记-第8章的更多相关文章

  1. JavaScript DOM编程艺术读书笔记(三)

    第七章 动态创建标记 在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> ...

  2. JavaScript DOM编程艺术读书笔记(二)

    第五章 最佳实践 平稳退化(graceful degradation):如果正确使用了JavaScript脚本,可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站.虽然某 ...

  3. JavaScript DOM编程艺术读书笔记(一)

    第一章,第二章 DOM:是一套对文档的内容进行抽象和概念化的方法. W3C中的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容,结构和样式. DHTML( ...

  4. JavaScript DOM编程艺术 - 读书笔记1-3章

    1.JavaScript语法 准备工作 一个普通的文本编辑器,一个Web浏览器. JavaScript代码必须通过Html文档才能执行,第一种方式是将JavaScript代码放到文档<head& ...

  5. JavaScript DOM编程艺术 读书笔记

    2. JavaScript语法 2.1 注释      HTML允许使用"<!--"注释跨越多个行,但JavaScript要求这种注释的每行都必须在开头加上"< ...

  6. JavaScript DOM编程艺术读书笔记(四)

    第十章 实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+fin ...

  7. JavaScript DOM编程艺术-学习笔记（第二章）

    1.好习惯从末尾加分号:开始 2.js区分大小写 3.程序界万能的命名法则:①不以,数字开头的数字.字母.下划线.美元符号 ②提倡以下划线命名法来命名变量,以驼峰命名法来命名函数.但是到了公司往往会身 ...

  8. 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  9. JavaScript DOM编程艺术学习笔记（一）

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

  10. JavaScript DOM编程艺术-学习笔记

    发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...

随机推荐

  1. K-wolf Number (数位DP)

    题意:求区间内有多少个数满足条件:任意相邻的k个数位都不相等. 思路:老套路 #include<bits/stdc++.h> using namespace std; typedef lo ...

  2. 解决mysql中文乱码问题？

    mysql是我们项目中非常常用的数据型数据库.但是因为我们需要在数据库保存中文字符,所以经常遇到数据库乱码情况.下面就来介绍一下如何彻底解决数据库中文乱码情况. 1.中文乱码 1.1.中文乱码 cre ...

  3. 一个HttpClient使用Windows认证请求WCF服务的例子

    有个项目需要调用第三方SDK,而SDK获取服务器的已安装的特殊打印机列表返回给调用方. 但我不想依赖这个SDK,因为这个SDK是使用.NET Framework编写的,而我的项目是使用.NET Cor ...

  4. Docker Kubernetes Volume 网络数据卷

    Docker Kubernetes Volume 网络数据卷 由于支持网络数据卷众多 今天只拿nfs作为案例. 支持网络数据卷 nfs iscsi glusterfs awsElasticBlockS ...

  5. dataguard从库数据库丢失恢复例子(模拟丢失数据文件)

    准备工作,使用如下脚本进行数据库的全备份[oracle@localhost ~]$ more rman_backup.sh #!/bin/sh RMAN_OUTPUT_LOG=/home/oracle ...

  6. 单元测试系列之四：Sonar平台中项目主要指标以及代码坏味道详解

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6766994.html 众所周知Sona ...

  7. CSDN不登录阅读全文（最新更新

    CSDN真的烦...然而没卵用 用stylus加两行css就行了: .article_content{height:auto!important} .hide-article-box{display: ...

  8. visio连接线设置

    以下画图是在新建空白模式的 默认的连线,如下图, 通过设置设计模式,可以把直角线编程直的线段, 设置如下图, 效果,如下图, 如果想在上面的图的线加箭头,可以一条一条加,但是,但是效率太低,我们可以通 ...

  9. 补充一下 sizeof

    sizeof是一个运算符,给出某个类型或变量在内存中所占据的字节数 sizeof(int) //告诉你int占据几个字节 sizeof(i) //告诉你i这个变量占据几个字节 注:sizeof是静态运 ...

  10. IOS 应用发布流程

    发布流程总结成三个步骤: iOS应用发布流程(一)------相关app证书的申请.下载以及安装 http://blog.csdn.net/ys371277787/article/details/50 ...