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

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

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

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

<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. 压缩图片 Image

    图片压缩 class resizeImg: """缩略图""" def __init__(self,**args): self.args_k ...

  2. 主线程——main线程

    定义一个普通的类: 引用这个类,执行main方法,main方法就是一个主线程: 线程:进程的执行单元,可以理解为栈内存中的所执行的方法(除了main方法之外都是线程中的run方法)地址开辟通往cpu的 ...

  3. uboot移植阶段二--3串口终结篇

    2011-03-20 23:00:37 前天U-boot移植串口后,能成功显示数据. 今天的主要目的是再次进行U-boot移植.看是否成功.花了40分钟,很顺利. 接着就是要把之前有问题的U-boot ...

  4. Python socket文件传送md5校验

    soket_server import socket,os,hashlib server = socket.socket() server.bind(('0.0.0.0',9999)) server. ...

  5. mac 遇到的奇怪问题？

    1: 卸载 xcode,发现git报错了. mac git xcrun error active developer path 错误 解决办法:sudo xcode-select -switch / ...

  6. 从路由器镜像中提取uImage头信息

    uImage header为64字节,文件头为27 05 19 56 hexdump -C a.bin | grep "27 05 19 56" 或者 hd aa.bin | gr ...

  7. HAOI（多省联考）2019退役记

    等着回头写 算了今天先写点 Day -1 打扫下机房,不想写题,不想考试.... Day 0 上午颓了一上午 下午看下考场结果去早了 ZYZ 全员进队! Day 1 上来T1,01Tire!,开码,半 ...

  8. [python]PyPI使用国内源

    PyPI使用国内源 对于默认的pip源的速度太慢,一些国内的pip源,如下: 豆瓣(douban) https://pypi.douban.com/simple 阿里云 http://mirrors. ...

  9. yum命令报错 yum update File "/usr/bin/yum", line 30 except KeyboardInterrupt, e: --CentOS7.5

    1.问题: 使用yum命令如:yum update 报SyntaxError invalid syntax 2.原因分析 yum的解释器是Python,CentOS自带的yum采用(自带的)pytho ...

  10. node.js调用google翻译api

    源码下载:https://pan.baidu.com/s/1nxoodst 使用:(只支持get) http://39.106.33.56:3001/translate?text=Failure is ...