JavaScript学习系列6 充实文档的内容
- 渐进增强:你应该总是从最核心的部分,也就是从内容开始。应该根据内容使用标记实现良好的结构;然后再逐步加强这些内容。
- 平稳退化:不支持JavaScript也能访问基本内容。
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Explaining the Document Object Model</title>
<!-- 引用自定义样式 -->
<script type="text/javascript" src="scripts/addLoadEvent.js"></script>
<script type="text/javascript" src="scripts/displayAbbreviations.js"></script>
<script type="text/javascript" src="scripts/displayCitations.js"></script>
</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="http://www.w3.org/DOM/">
<p>
A platform- and language-neutral interface that will allow programs
and scripts to dynamically access and update the
content, structure and style of documents.
</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>
</body>
</html>
if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// 获取所有的缩略词
var abbreviations = document.getElementsByTagName("abbr");
if (abbreviations.length < 1) return false; //如果没有直接返回
var defs = new Array();
for (var i=0; i<abbreviations.length; i++) {
var current_abbr = abbreviations[i];
if (current_abbr.childNodes.length < 1) continue;
var definition = current_abbr.getAttribute("title"); //缩略语的解释文本
var key = current_abbr.lastChild.nodeValue;
defs[key] = definition; //缩略语
}
// 创建列表
var dlist = document.createElement("dl");
for (key in defs) {
var definition = defs[key];//创建标题
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
// 创建解释文字
var ddesc = document.createElement("dd");
var ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);
// 以上加入的列表当中并进行循环
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
if (dlist.childNodes.length < 1) return false;
var header = document.createElement("h2");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
document.body.appendChild(header);
document.body.appendChild(dlist);
}
转载于:https://www.cnblogs.com/tcpcg/archive/2012/02/12/2347946.html
JavaScript学习系列6 充实文档的内容相关推荐
- sharepoint 2016 学习系列篇(23)-文档库应用篇-(5)文档权限配置
学习了关于文档的上传,下载,以及属性标签的应用,朋友们估计也会想到,前面学习到了关于列表的数据权限配置, sharepoint 2016 学习系列篇(15)-自定义列表应用篇-(4)数据权限配置 那么 ...
- sharepoint 2016 学习系列篇(24)-文档库应用篇-(6)文档版本控制
学习到这里,相信朋友们,应该是对文档库有了大概的认识.回顾一下,前面学习了一个 sharepoint 2016 学习系列篇(17)-自定义列表应用篇-(6)开启列表数据版本控制 那么对于文档来说,文档 ...
- JavaScript之充实文档的内容
1.我们在平时的开发中会碰到一些缩略语如:XML,HTML,API等专业术语:为了能使用户,更好的了解术语的意思,我们通常会给<abbr></abbr>标签加一个title属性 ...
- sharepoint 2016 学习系列篇(19)-文档库应用篇-(1)创建一个文档库
前面学习了有关数据列表的知识,包括列表的创建,字段的创建,数据增删改查,以及权限,以及列表的数据展示设置,相信大家对sharepoint的列表应用,应该有了一个初步的了解及使用,在我们平时的应用中,除 ...
- sharepoint 2016 学习系列篇(21)-文档库应用篇-(3)在文档库中上传文档和下载文档
在文档库中,上传文档到文档库中,有一下几种方式: 第一种,通过文档库页面,点击上载: 点击"浏览",选择需要上载的文件,点击确定 第二种,通过文档库页面,拖文档的方式上载: 在电脑 ...
- b站尚硅谷springmvc学习视频:springmvc文档
文章目录 一.SpringMVC简介 (b站尚硅谷springmvc学习视频:springmvc文档) 1.什么是MVC 2.什么是SpringMVC 3.SpringMVC的特点 二.HelloWo ...
- python mysql 遍历_Python自动化办公系列六(pdf文档处理)
PDF 表示 Portable Document Format,使用 .pdf 作为文件扩展名.虽然 PDF 支持许多功能,但现在我们专注于最常做的两件事:从 PDF 读取文本内容和从已有的文档生成新 ...
- php txtsql 说明,PHP学习笔记(2)txtSQL文档错误
PHP学习笔记(2)txtSQL文档错误 次阅读 在使用txtSQL的过程中,发现一处帮助文档错误. 在使用altertable命令改变表名称时,发现如果按照帮助文档所说,使用如下代码无法改变表的名称 ...
- webservice学习01:wsdl文档结构
webservice学习01:wsdl文档结构 wsdl文档结构 WSDL文档示例 <wsdl:definitions xmlns:xsd="http://www.w3.org/200 ...
最新文章
- 收藏:SqlServer
- 贝叶斯定理核心在后验概率是对先验概率的修正,即后验概率是描述来自先验概率的概率
- Spring AOP 切点(pointcut)表达式
- autotools入门笔记(二)——创建和使用静态库、动态库
- 原创内容将成网络视频的一支奇军
- 如何将PDF转换成xls格式的表格
- input中加入图标实现搜索框
- 闪电Android视频转换器,闪电Android视频转换器
- chrome 自动加载ajax.googleapis,使用Redirector插件解决googleapis公共库加载的问题
- 去年中国水上交通安全形势稳定
- Jsp 案例:商品浏览记录
- 线性代数 —— 线性组合与线性表出,线性相关与线性无关
- SAP 批量修改采购订单
- MySQL引擎和区别
- SQLsever数据库实例是啥子
- 窗口函数_LAG()与LEAD() 详解
- 我的物联网项目(十六) 项目工程
- 小豆苗服务器维护,小豆苗问题排查方法新版ppt课件
- “阿里云之父”王坚:硅谷不应当成为我们的天花板 | 腾讯2017年Q3营收同比增61%
- 毕业论文ppt的研究方法及过程计算机专业,本科毕业论文的开题报告ppt
热门文章
- idea java jni 调试_IntelliJ IDEA平台下JNI编程(一)—HelloWorld篇
- 查看本地oracle密码,Oracle 本地验证和密码文件
- PCL:英文参考链接
- face-swap.zip百度网盘下载
- 解决方案:__init__() got an unexpected keyword argument ‘kill_previous‘
- 结构光测距相位差_ROHM确立新型VCSEL模块技术 有助于提高测距精度
- win7系统开启休眠按钮
- 【全网唯一】全网唯一能够跑通的,跑不通你来找我~用node.js完成微信支付下单功能,且只需要一个文件wxpay.js就解决业务流程的node.js程序
- 在CentOS 6.9上从源码安装Go 1.10
- sohu广告js代码调研