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. Clojure：两步发送iOS推送通知（apns）

    首先在project.clj中,添加对notnoop 类库的引用:[com.notnoop.apns/apns "0.2.3"] 然后使用如下方法就可以发送推送消息了: (ns d ...

  2. HDU 3473

    分析可知,最优的x应该在区间中的数排列后最中间的地方选择.由于区间的数个数有奇偶之分,于是当奇数个时,就是中位数了.偶数个时,就是排列后中间两数区间的任意一个. 可以应用划分树求得前半部分,树状数组统 ...

  3. .Net程序猿玩转Android开发---(6)线性布局LinearLayout

                                LinearLayout控件是Android中重要的布局控件,是一个线性控件,所谓线性控件的意思是指该控件里面的内容仅仅能水平或垂直排列.也就 ...

  4. 【转】Maven的安装与使用(ubuntu)

    原文: http://www.cnblogs.com/yunwuzhan/p/5900311.html https://maven.apache.org/guides/getting-started/ ...

  5. 怎样在BIOS中设置RAID？

    随着价格的下降和相应主板的支持.眼下SATA硬盘已经逐渐成为主流. 但因为受芯片组和操作系统的影响.不少用户对SATA硬盘的使用及安装系统掌握不足,今天小编就给大家介绍一下SATA硬盘的日常应用技巧. ...

  6. Codeforces Round #257 (Div. 2/B)/Codeforces450B_Jzzhu and Sequences

    B解题报告 算是规律题吧,,,x y z -x -y -z 注意的是假设数是小于0,要先对负数求模再加模再求模,不能直接加mod,可能还是负数 给我的戳代码跪了,,. #include <ios ...

  7. CentOS 安装 MRTG 软件完成后的 403 Forbidden（转载）

    用 yum 安装 MRTG 並设定好之后也把 apache 的 httpd.conf 加上 mrtg 的目录,但 http://server/mrtg 卻一直出現 403 Forbidden.在 ht ...

  8. luogu1980 车站分级

    题目大意 一些火车站排成一行.给出一些火车的停靠站情况,要求对每一个火车,其经过且不停靠的站的级别比它任意停靠的站的级别小.问所有车站最少需要多少个级别. 题解 不要只看到这道题的背景设立在一个区间上 ...

  9. hdu 6112 今夕何夕(模拟）

    今夕何夕 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  10. 洛谷P3808 & P3796 AC自动机模板

    题目:P3808:https://www.luogu.org/problemnew/show/P3808 P3796:https://www.luogu.org/problemnew/show/P37 ...