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. Java三行代码搞定MD5加密

    Java三行代码搞定MD5加密 https://www.dexcoder.com/selfly/article/4026 public class MD5Test { public static vo ...

  2. Codeforces Round #250 Div. 2(C.The Child and Toy)

    题目例如以下: C. The Child and Toy time limit per test 1 second memory limit per test 256 megabytes input ...

  3. linux中两个缓冲区

    不同于Windows,Linux系统里存在两个剪切板:一个叫做选择缓冲区(X11 selection buffer),另一个才是剪切板(clipboard). 01)选择缓冲区(缓冲内容在其他位置可用 ...

  4. ASP.NET快速开发框架不得不做的几个功能、高大上档次后台管理UI界面

    俗话说磨刀不误砍柴工,确实,一早上花一个小时去磨刀一天下来肯定能多砍很多柴.我们做软件开发也是同样的道理,有套好开发框架在手里,开发也是事半功倍.那么一套MVC快速开发框架至少得具有哪些功能才能帮我们 ...

  5. Spring Boot 特性 —— SpringApplication

    转自:https://blog.csdn.net/cqdz_dj/article/details/52910317

  6. PCB LDI 实现周期自动更新 实现思路

    一.基本思路整理如下: 二.封周期启动程序C#代码(部份代码) /// <summary> /// 单个生产型号 更新周期 /// </summary> /// <par ...

  7. html5 窗口之间的通信

    一般窗口通信分为三种: iframe嵌套:多个iframe之间通信. 父页面操作子页面元素:oFrame.contentWindow.document.body. 父页面调用子页面方法:oFrame. ...

  8. El和标准标签

    EL表达式针对于四大作用域:application,session,request,pagecontext(作用域由大倒小)${作用域获取内容的名字}是根据作用域最小的取,指定作用域${session ...

  9. jdbc数据库中的增删改

    HttpSession session=request.getSession(); session.setAttribute("currentUser",u.username);/ ...

  10. java 微信api开发

    最近使用了一个很好的微信api框架,比较好使. 源码地址:https://github.com/chanjarster/weixin-java-tools/wiki 微信公众平台:微信公众平台开发文档 ...