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. javaEE之--------统计站点在线人数，安全登录等（观察者设计模式）

    整体介绍下:  监听器:监听器-就是一个实现待定接口的普通Java程序,此程序专门用于监听别一个类的方法调用.都是使用观察者设计模式. 小弟刚接触这个,做了些简单的介绍.大神请绕道,技术仅仅是一点点, ...

  2. poj 1080 Human Gene Functions (最长公共子序列变形)

    题意:有两个代表基因序列的字符串s1和s2,在两个基因序列中通过添加"-"来使得两个序列等长:其中每对基因匹配时会形成题中图片所示匹配值,求所能得到的总的最大匹配值. 题解:这题运 ...

  3. 本地项目上传虚拟机的gitlab

    前提:在虚拟机安装了gitlab服务,并且本机可以访问到虚拟机的gitlab 自己本机项目上传到gitlab 1.先在gitlab上建立项目 拷贝项目地址: http://192.168.1.105/ ...

  4. spring mvc文件上传,request对象转换异常

    spring 文件上传有现成的工具用起来也挺简单.就是在还不是非常熟悉的时候可能会出一些错. 近期碰到了 org.apache.catalina.connector.RequestFacade can ...

  5. 在ubuntu中安装photoshop cs6

    对于很多专业的PS高手来说,真心难以找到顺手的且可以完美替代PS的软件,所以我们这里的解决办法就是用wine来安装. 虽然网上有很多的wine安装ps的方法,但是在使用过程往住会发生莫名其妙的崩溃,体 ...

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

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

  7. python-day4 运算符,if判断, for循环

    1.运算符 算术运算符 +   -    *    /    % 赋值运算符 =   +=  -= 比较运算符 ==    <   <=    >    >=    != 逻辑 ...

  8. ArrayList 扩容原理

    面试中经常问到的问题之一就是List的扩容机制了,他是怎么做到扩容的,大家都能答出来底层是数组,复制一个数组来扩容,但是再具体一点来说,大家就不知道该怎么说了,如果不看源码说这么多确实就差不多了,但是 ...

  9. 使用javac编译java文件

    过程中遇到的几个问题记录如下: 1.java -version正常显示java版本,但是javac却显示[不是内部外部命令] 原因:JAVA_HOME设置成了用户环境变量,Path里用%JAVA_HO ...

  10. cocos2d-x https

    cocos2d-x :2.1.3HttpClient.cpp文件中  bool configureCURL(CURL *handle)后边添加如下两句: curl_easy_setopt(handle ...