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

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

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

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

<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. CentOS7+Apache+MySQL+PHP环境

    Apache 1.安装Apache:yum -y install httpd 2.开启apache服务:systemctl start httpd.service 3.设置apache服务开机启动:s ...

  2. Shell脚本：while read line无法读取最后一行的问题

    [1]Shell脚本:while read line无法读取最后一行的问题 刚刚利用shell脚本处理日志文件时,发现了一个问题:while read line无法读取到最后一行 通过编辑器可以看到待 ...

  3. git忽略某些文件的几种方法

    不知道为什么我记得我写过这个内容但是又找不到了,只好照着大致记忆写一下以备留存. 1.首先肯定是.gitignore文件 .gitignore文件适合在文件尚未被追踪时加入,将其忽略便可以不上传到远程 ...

  4. GitHub linux 提交文件及403错误处理

    $git  clone  "Clone with HTTPS(自己生成的地址,如:https://github.com/******(用户名)/test.git)" 这时在你git ...

  5. 2019/4/11 wen 常用类2

  6. Python RabbitMQ消息分发轮询

    1.收消息:一对多,默认依次轮询的发给每个消费端. 2.消息确认:默认RabbitMQ不会设置no_ack=Ture,意思是,当生产者给消费者发送发送消息时,消费者处理这个消息,处理完后会手动确认发送 ...

  7. 在线视频下载利器——youtube-dl

    youtube-dl是谷歌出品的在线视频下载利器,可以用来下载youtube视频(前提是你得能上youtube). 使用方法很简单,只需要在cmd下执行youtube-de.exe +视频页面网址,程 ...

  8. python阶段性总结

    一,学习方法 说起来我也是第一次学习python,一开始也是什么都不懂.当开始学习一个新的知识时,我觉得第一件事便是了解它的基本概念.一定要认认真真的阅读参考书至少一次,用笔勾画出你所认为的重点和难点 ...

  9. C#方法过滤器

    方法过滤器 使用Emit和注解属性Attribute实现 使用方式 1. 自定义方法过滤器 可分别定义方法执行前过滤器, 方法执行结束过滤器, 方法异常过滤器 执行前过滤器继承 ExecutingFi ...

  10. server time zone

    问题原因 由于使用的Mysql数据库驱动版本太高,存在数据库和系统时区差异,所以出问题. 问题解决 Spring Boot配置文件中在url: jdbc:mysql://127.0.0.1:3306/ ...