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

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

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

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

<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. rocketmq源码打包步骤

    1,从git上面克隆好源码之后,进入rocketmq目录,执行: mvn -Prelease-all -DskipTests clean install 2,打包完成之后,进入distribution ...

  2. GTK# on Ubuntu DllMap

    修改配置:/etc/mono/config 新增以下代码 <dllmap dll="libglib-2.0-0.dll" target="libglib-2.0.s ...

  3. Nginx 解析PHP的原理 | CGI、FastCGI及php-fpm的关系

    Nginx解析PHP的原理,CGI/FastCGI以及PHP-Fpm的关系. 一.PHP+Nginx应运而生的场景.随着互联网的发展,用户对此接受面广,数据流的增大使得Web端的运行承载压力日益增大, ...

  4. C#计算重重字符串，出现的次数

    int bac = System.Text.RegularExpressions.Regex.Matches(“字符串”, @"要计算的").Count;        //字符串 ...

  5. Matlab的用法总结

    1. 对序列进行洗牌 randperm() randperm()产生随机的序列 %if filepaths 是一个5*1的结构体,then cshuffle = randperm(length(fil ...

  6. FTR-B3GA003Z-信号继电器

    IC名称:B3GA003Z 数据手册:链接:https://pan.baidu.com/s/1MNe-fcKNAnuXyRLxhfUhjA 密码:6mo2 芯片自拍照: 封装尺寸以及引脚说明: 信号电 ...

  7. Why Choose MB SD C5 with Engineer Software

    MB SD C5 with engineer software performed good and now is released. Unlike the old clone C5 which us ...

  8. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  9. Linux 修改SWAP分区后导致开机问题

    Linux 系统出现提示原因 扩容后,修改了SWAP,或者安装了双 Linux 系统,在安装后一种 Linux 系统时把 SWAP分区 重新格式化,导致UUID 改变,所以启动时无法加载原来对应UUI ...

  10. script利用src引用外部js文件，如果内部嵌套了js代码呢

    <script src='test.js' defer async> var a = 5; </script> 这个时候 var a = 5;会被忽略.