《DOM Scripting》学习笔记-——第八章充实文档的内容

本章内容

一、一个为文档创建“缩略词语表”的函数

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

三、一个为文档创建“快速访问键清单”的函数

利用DOM动态的收集和创建一些有用的辅助信息，并把它们呈现在网页上的基本思路：

1、把隐藏在属性里的信息检索出来（遍历、提取）

2、把这些信息动态的创建为一些html内容（创建元素节点、将内容插入元素节点）

3、把这些html内容插入到文档里（追加）

一、一个为文档创建“缩略词语表”的函数

Html代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

   <head>

     <meta http-equiv="content-type" content="text/html;charset=utf-8" />

     <title>Explaining the Document Object Model</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="http://www.w3.org/DOM/">

       <p>

         A platform- and language-neutral interface that will allow programsand scripts to dynamically access and update thecontent, structure and style of documents.

       </p>

     </blockquote>

     <p>

       It is an <abbr title="Application Programming Interface">API</abbr>that can be used to navigate <abbr title="HyperText Markup Language">HTML</abbr> and 
19       <abbr title="eXtensible Markup Language">XML</abbr> documents.

     </p>

   </body>

 </html>

命名：explanation.html

目的：创建“缩略词语表”，把html文档中<abbr>标签的title属性值收集起来，并将其集中显示在页面里。

具体步骤及实现方法：

js代码：

function displayAbbreviations() 
 {

  if (!document.getElementsByTagName || !document.createElement

    || !document.createTextNode) return false;

    // 获取abbr元素

  var abbreviations = document.getElementsByTagName("abbr");

  if (abbreviations.length < 1) return false;

  var defs = new Array();

    // 遍历abbr元素并获取abbr元素值及其title属性
  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;

   }

  // 创建dl元素

  var dlist = document.createElement("dl");

  // 遍历abbr元素值及其title属性

  for (key in defs) 
   {

     var definition = defs[key];

  // 创建dt元素、文本节点，将文本节点插入dt元素

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

     var dtitle_text = document.createTextNode(key);

     dtitle.appendChild(dtitle_text);

  // 创建dd元素、文本节点，将文本节点插入dd元素

     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("Abbreviations");

  header.appendChild(header_text);

// 将标题追加到html文档

  document.body.appendChild(header);

// 将dl元素追加到html文档

  document.body.appendChild(dlist);

}

二、显示“文献来源链接表”

收集和显示blockquote元素的cite属性所包含的信息：

（1）遍历这个文档里所有的blockquote元素。

（2）从blockquote元素提取出cite属性值

（3）创建一个标识文本是“source”的链接

（4）把这个链接赋值为blockquote元素的cite属性值

（5）把这个链接插入到文献节选的末尾

js代码

function displayCitations()

  {

    if (!document.getElementsByTagName || !document.createElement|| !document.createTextNode) return false;

    // 获取所有的blockquote元素

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

    //遍历所有blockquote元素

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

        // 如果节点没有cite属性，就跳转到下一次循环的开始，不再继续执行本次循环中的后续语句

        if (!quotes[i].getAttribute("cite")) continue;

        // 把cite属性值存入变量url

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

        // 获取所有的元素节点（不用lastChild，因为有些浏览器会把换行符当做文本节点）

        var quoteChildren = quotes[i].getElementsByTagName('*');

        / /如果没有元素节点，就跳到下一次循环的开始

        if (quoteChildren.length < 1) continue;

        // 获取blockquote的最后一个元素

        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);

    }

  }

三、显示“快速访问键清单”

编写一个能够把文档里用到的所有快速访问键显示在页面里的函数。

在html文档的<body>标签开头添加以下代码：

<ul id="navigation">

<li><a href="index.html" accesskey="1">Home</a></li>

<li><a href="search.html" accesskey="4">Search</a></li>

<li><a href="contact.html" accesskey="9">Contact</a></li>

</ul>

js代码如下：

function displayAccesskeys() 
{

  if (!document.getElementsByTagName || !document.createElement ||!document.createTextNode) return false;

  // 获取文档中所有的links

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

  // 创建一个存储access keys的数组

  var akeys = new Array();

  // 遍历links

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

    var current_link = links[i];

    //如果没有 accesskey属性,就跳到下一次循环

    if (!current_link.getAttribute("accesskey")) continue;

    //获取accesskey的value

    var key = current_link.getAttribute("accesskey");

    // 获取a的value

    var text = current_link.lastChild.nodeValue;

    // 把a的value和accesskey的value存入数组

    akeys[key] = text;

  }

  // 创建list

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

  // 遍历accesskey的value

  for (key in akeys) 
  {

    var text = akeys[key];

    // 创建要追加到list里的变量

    var str = key + ": "+text;

    // 创建list的内容

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

    var item_text = document.createTextNode(str);

    item.appendChild(item_text);

    // 将list内容追加到list

    list.appendChild(item);

  }

  // 创建标题

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

  var header_text = document.createTextNode("Accesskeys");

  header.appendChild(header_text);

  // 将标题追加到body

  document.body.appendChild(header);

  // 将list追加到body

  document.body.appendChild(list);

}

addLoadEvent(displayAccesskeys);

小结：

需要对文档里的现有信息进行检索时，可用以下DOM方法：

getElementById()
getElementsByTagName()
getAttribute()

需要把信息添加到文档里时，可用以下DOM方法：

createElement()
createTextNode()
appendChild()
insertBefore()
setAttribute()

《DOM Scripting》学习笔记-——第八章充实文档的内容的更多相关文章

SpringBoot学习笔记：Swagger实现文档管理
SpringBoot学习笔记:Swagger实现文档管理 Swagger Swagger是一个规范且完整的框架,用于生成.描述.调用和可视化RESTful风格的Web服务.Swagger的目标是对RE ...
【Javascript DOM读书笔记】chapter8 充实文档内容
本章目的作者举出了第一个实例,为一篇 web 页面动态创建缩略语(abbreviation)的列表.大家知道,我们可以使用 <abbr>...</abbr> 来指示一个缩略语 ...
AngularJS1.X学习笔记14-动画(解读文档)
最近在看算法分析,那个大O啊,小o啊,分治法啊(目前就看到这里),真是搞死了.这回呢休息一下,学学AngularJS动画,上一篇文章根据自由男人的书简单谈到了动画的话题,发现反响很大(好吧,我说慌了, ...
MongoDB学习笔记四—增删改文档下
$slice 如果希望数组的最大长度是固定的,那么可以将 $slice 和 $push 组合在一起使用,就可以保证数组不会超出设定好的最大长度.$slice 的值必须是负整数. 假设$slice的值为 ...
MongoDB学习笔记三—增删改文档上
插入insert 单条插入 > db.foo.insert({"bar":"baz"}) WriteResult({ }) 批量插入 > db.fo ...
HTML&CSS基础学习笔记1.4-定义文档类型
Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面 ...
MongoDB快速入门学习笔记3 MongoDB的文档插入操作
1.文档的数据存储格式为BSON,类似于JSON.MongoDB插入数据时会检验数据中是否有“_id”,如果没有会自动生成.shell操作有insert和save两种方法.当插入一条数据有“_id”值 ...
latex学习笔记----基本知识、文档排版
1.空格和制表符等空白字符视为相同的空白距离,多个连续的空白字符等同为一个字符. 2.# $ % ^ _ { } ~ 在这些字符前面加上反斜线,就可以在文本中得到它们. 反斜线\不 ...
吴裕雄--天生自然python学习笔记：python设置文档的格式
Win32com 组件可为特定范围的内容设置格式, 较常用的格式有标题格式.对齐方式格式及字体格式 . 许多格式使用常量表示 , 所以需先导入 constants常量模块 : 设置标题格式的 ...

随机推荐

java-同一用户顶替操作（session过期或无效）
同一账号后者登录前者被强制退出:(可以通过监听器或过滤器进行监测session是否无效) 首先根据输入的用户名和密码做验证,通过验证查询用户信息.在用户信息不为空的前提下,比较静态变量中的sessio ...
Java小问题
Java中的小问题,放在这里备查. 1.匿名类模仿block排序 Collections.sort(names, new Comparator<String>() { @Override ...
Hadoop 管理工具HUE配置-HBase配置
1 前言首先要陪只好HBase,可以参见http://www.cnblogs.com/liuchangchun/p/4096891.html,完全分布式类似 2 HBase配置 2.1 HUE 配置 ...
简单快速的Android打渠道包的方法
APK其实就是ZIP的格式,所以,解压apk后,会看到里面有个META-INF目录. 思路:由于META-INF目录并不会影响到APK的签名和运行,所以我们可以在META-INF目录里添 ...
crf++实现中文分词简单例子（Windows crf++0.58 python3）
学习自然语言处理的同学都知道,条件随机场(crf)是个好东西.虽然它的原理确实理解起来有点困难,但是对于我们今天用到的这个crf工具crf++,用起来却是挺简单方便的. 今天只是简单试个水,参考别人的 ...
使用Navicat连接阿里云mysql报错10061
1.添加一个远程访问账号admin mysql> use mysql; mysql> GRANT ALL ON *.* TO 账户@'%' IDENTIFIED BY '密码' WITH ...
Jmeter发送邮件功能SMTP Sampler
介绍Jmeter的发送邮件功能,使用的Sampler是SMTP Sampler,详细说明每个配置项的功能从上往下介绍需要用到的配置项: Server settings Server: 服务器地址 P ...
js obj对象转formdata格式代码
import isArray from "lodash/isArray" export function objToFormData(config) { //对象转formdata ...
进程、线程与GIL全局解释器锁详解
进程与线程的关系: . 线程是最小的调度单位 . 进程是最小的管理单元 . 一个进程必须至少一个线程 . 没有线程,进程也就不复存在线程特点: 线程的并发是利用cpu上下文的切换(是并发,不是并行) ...
Startup 类
Startup 类的作用: 配置应用所需的任何服务定义请求处理管道配置(或注册)服务的代码添加到Startup.ConfigureServices方法中.服务是应用使用的组件.例如,Entity ...

《DOM Scripting》学习笔记-——第八章 充实文档的内容

《DOM Scripting》学习笔记-——第八章 充实文档的内容的更多相关文章

随机推荐

热门专题

《DOM Scripting》学习笔记-——第八章充实文档的内容

《DOM Scripting》学习笔记-——第八章充实文档的内容的更多相关文章