HTML代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>充实文档内容</title>

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

</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="www.w3c.org/DOM/">

        <p>

            Aplatform- and language-neutral interface that will allow programs and scripts to dynamically

            access and update the content,structure and style of documnents.

        </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 <abbr title="eXtensible Markup Language">XML</abbr>documents.

    </p>

    <script type="text/javascript" src="js/displayAbbreviations.js"></script>

</body>

</html>

JavaScript代码

//页面加载完时执行函数

function addloadevent(func) { //参数放入你界面加载完要执行的函数

    var oldonload = window.onload;

    if (typeof window.onload != 'function') {

        window.onload = func;

    } else {

        oldonload();

        func();

    }

}

function displayAbbreviations() {

    // 检查元素是否兼容

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

    //获取文档所有abbr标签

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

    //判断如果文档没有abbr标签，函数执行结束。

    if(abbreviations.length < 1) return false;

    //创建一个数组用来存储abbr的title属性值

    var defs = new  Array();

    //便利abbr标签

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

        //获取abbr中的属性值存入definition变量中

        var definition =  abbreviations[i].getAttribute("title");

        //获取abbr中的缩略语句

        var key = abbreviations[i].lastChild.nodeValue;

        //将2个变量存入数组中，key用作数组元素的小标(键)来存储，definition用作数组元素的值来存储

        defs[key] = definition;

    }

    //创建标记节点

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

    //循环取出数组中的键 和值

    for (key in defs) {

        var definition = defs[key];

        //创建一个dt标签

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

        //用变量key的值创建一个文本节点

        var dtitle_text = document.createTextNode(key);

        dtitle.appendChild(dtitle_text);

        //同样操作 ↑ 创建dd标签

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

        var ddesc_text = document.createTextNode(definition);

        ddesc.appendChild(ddesc_text);

        //创建好的标签插入dl中

        dlist.appendChild(dtitle);

        dlist.appendChild(ddesc);

    }

    //创建一个H2标题

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

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

    header.appendChild(header_text);

    //创建好的列表和标题插入body中

    document.body.appendChild(header);

    document.body.appendChild(dlist);

}

addloadevent(displayAbbreviations);

DOM学习之充实文档内容的更多相关文章

  1. python 学习之FAQ:文档内容写入报错

    2017.3.29 FAQ 1. 文档内容写入报错 使用with open() as file: 写入文档时,出现'\xa9'特殊字符写入报错,通过print('\xa9')打印输出“©”. > ...

  2. 【Javascript DOM读书笔记】chapter8 充实文档内容

    本章目的 作者举出了第一个实例,为一篇 web 页面动态创建缩略语(abbreviation)的列表.大家知道,我们可以使用 <abbr>...</abbr> 来指示一个缩略语 ...

  3. DOM操作-遍历HTML文档内容

    基础:   JS nodeType返回类型:http://blog.csdn.net/qyf_5445/article/details/9232907 代码: <!DOCTYPE html> ...

  4. java操作office和pdf文件java读取word，excel和pdf文档内容

    在平常应用程序中,对office和pdf文档进行读取数据是比较常见的功能,尤其在很多web应用程序中.所以今天我们就简单来看一下Java对word.excel.pdf文件的读取.本篇博客只是讲解简单应 ...

  5. 运用 Range 对象处理 Word 文档内容

    运用 Range 对象处理 Word 文档内容   在所有 Office 应用程序中,Microsoft Word 可能是应用最广泛的应用程序,它还经常在自定义 Office 解决方案中扮演重要的角色 ...

  6. apidoc学习（接口文档定义取代word）

    apidoc的安装,参考:https://blog.csdn.net/qq_36386771/article/details/82149848 生产文档,需要先编写一个apidoc.json对接口文档 ...

  7. 织梦DedeCMS首页调用单页文档内容的方法

    很多使用织梦dedecms单页文档功能的朋友都想知道如何在织梦首页调用单页文档的内容,下面就教大家具体的实现方法: 具体步骤如下: 首先在首页模板需要显示单页文档内容的地方插入如下代码: {dede: ...

  8. Mongodb（2）创建数据库，删除数据库，创建集合，删除集合，显示文档内容

    显示所有数据库列表:show dbs > show dbs local .078GB runoob .078GB > 显示当前数据库:db > db runoob > 显示所有 ...

  9. Citrix 服务器虚拟化之二十八 XenApp6.5发布文档内容

    Citrix 服务器虚拟化之二十八  XenApp 6.5发布文档内容 XenApp可发布以下类型的资源向用户提供信息访问,这些资源可在服务器或桌面上虚拟化: 1)  服务器桌面:发布场中服务器的整个 ...

随机推荐

  1. cppunit 的使用

    原文: http://blog.csdn.net/abcdef0966/article/details/5699248

  2. Maven中的dependency的scope作用域详解

    1.test范围指的是测试范围有效,在编译和打包时都不会使用这个依赖 2.compile范围指的是编译范围有效,在编译和打包时都会将依赖存储进去 3.provided依赖:在编译和测试的过程有效,最后 ...

  3. iOS 通讯录编程【总结】

    第一大块儿:读取通讯录 1.iOS 6以上系统,争取获取用户允许: 初始化的时候须要推断.设备是否授权 -(id)init{ self = [super init]; [self createdABH ...

  4. js原生offsetParent解析

    offsetParent是个仅仅读属性,返回近期显示指定位置的容器元素的引用. 假设元素没有指定位置,近期的元素或者根元素(标准模式下是html,怪异模式下是body)就是offsetParent. ...

  5. Google Code Jam在线測试题目--Alien Language

    Problem After years of study, scientists at Google Labs have discovered an alien language transmitte ...

  6. hdu 5094 Maze bfs

    传送门:上海邀请赛E 给定一个n×m的迷宫,给出相邻格子之间的墙或者门的信息,墙说明不可走,假设是门则须要有相应的钥匙才干通过,问是否可以从(1,1)到达(n,m) 一个带状态的bfs,再另记一个状态 ...

  7. Linux vs Window

    目前国内Linux更多的是应用于服务器上,而桌面操作系统更多使用的是Window.主要区别如下: 比较 Windows Linux 界面 界面统一,外壳程序固定所有Windows程序菜单几乎一致,快捷 ...

  8. Android休眠唤醒机制简介（二）

    本文转载自:http://blog.csdn.net/zhaoxiaoqiang10_/article/details/24408911 Android休眠唤醒机制简介(二)************* ...

  9. GitHub上排名前100的Android开源库介绍

    GitHub上排名前100的Android开源库介绍 文章来源: http://www.open-open.com/news/view/1587067#6734290-qzone-1-31660-bf ...

  10. git强制放弃本地更改

    git fetch --allgit reset --hard origin/master origin是服务器上的本地仓库master是分支