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. linux下环境变量C_INCLUDE_PATH

    环境变量定义一般都是/etc/profile文件(对所有用户有效),或者在Home目录下的.bashrc或.profile(只对当前用户有效)一般系统安装了编译工具之后无需设置这些变量编译都不会出现问 ...

  2. Oracle数据库导出导入

    需求为将数据库A中的数据导出为*.dmp文件.然后将*.dmp文件导入到数据库B. 1.导出数据库A     在cmd窗体输入下面命令: 导出所有数据库 exp username/password@数 ...

  3. GDUT Krito的讨伐(bfs&amp;&amp;优先队列)

    题意 Description Krito最终干掉了99层的boss,来到了第100层. 第100层能够表示成一颗树.这棵树有n个节点(编号从0到n-1),树上每个节点可能有非常多仅仅怪物. Krito ...

  4. Android 依据EditText搜索框ListView动态显示数据

    依据EditText搜索框ListView动态显示数据是依据需求来的,认为这之中涉及的东西可能比較的有意思,所以动手来写一写.希望对大家有点帮助. 首先.我们来分析下整个过程: 1.建立一个layou ...

  5. cocos2d-x开发的《派对小游戏》-github源代码分享

    这是博主非常久曾经写的一个cocos2d-x跨平台小游戏,我称它为<派对小游戏>,如今分享给大家.希望对大家有所帮助的话. 项目源代码地址:https://github.com/xieba ...

  6. Get-Acl 查看文件权限

    https://blogs.msmvps.com/erikr/2007/09/26/set-permissions-on-a-specific-service-windows/ Get-Acl .\L ...

  7. css中的绝对定位和相对定位（详解，总结）

    css中的绝对定位和相对定位(详解,总结) 总结: 设置绝对定位或者相对定位后都从文档中浮起来了,区别是相对定位还占着原来的位置,绝对定位不占着原来的位置,可以种z-index来改变元素的浮动的堆叠次 ...

  8. Anaconda/kickstart

    http://fedoraproject.org/wiki/Anaconda/Kickstart/zh-cn

  9. go之switch

    switch 条件语句一 格式 switch initialization{ case v1: // do something case v2: // do something case v2: // ...

  10. 工具分享2：Python 3.6.4、文本编辑器EditPlus、文本编辑器Geany

    工具官网下载地址: https://www.python.org/downloads/ python 3.6.0下载链接: 链接:https://pan.baidu.com/s/1snuSxsx 密码 ...