【javascript】充实文档的内容

最新推荐文章于 2024-07-26 11:41:15 发布

荔枝之之

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量193

点赞数

分类专栏：前端学习文章标签： javascript dom 前端

本文链接：https://blog.csdn.net/weixin_44699681/article/details/93654204

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、显示缩略语
缩略语（<abbr>标签）的title属性在浏览器中是隐藏的，我们可以通过JS来动态加载并显示缩略语
希望得到的定义列表：

<dl>
    <dt>W3C</dt>
    <dd>World Wide Web Consortium</dd>
    <dt>DOM</dt>
    <dd>Document Object Model</dd>
    <dt>API</dt>
    <dd>Application Programming Interface</dd>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>XML</dt>
    <dd>eXtensible Markup Language</dd>
</dl>

【编写displayAbbreviations函数】
首先找出所有的abbr元素：使用getElementByTagName方法，它返回一个数组，保存在变量abbreviations中。

var abbreviations = document.getElementsByTagName("abbr");

开始遍历数组：(1)首先检查文档是否有缩略词，没有就结束函数。(2)使用数组defs将每个bbr元素提供的信息保存起来，即<abbr>标签中的文本及其title属性。(3)为了得到缩略语中的解释词语，使用getAttribute方法得到title的属性值，并把它保存在变量definition中。(4)为得到缩略语文本，使用nodeValue属性，这个文本节点是<abbr>的最后一个节点，使用lastChild属性。

if (abbreviations.length < 1) return false;
var defs = new Array();
//遍历缩略词
for (var i=0;i<abbreviations.length;i++){
	var current_abbr = abbreviations[i]
	var definition = current_abbr.getAttribute("title");
	var key = current_abbr.lastChild.nodeValue;
    defs[key] = definition;
}

创建标记：(1)使用createElement方法创建定义列表，并把该元素存在变量dlist中。(2)遍历数组defs，每次循环要创建一个dt和dd元素，还需要创建文本节点并把它们分别添加到dt和dd元素，最后把新创建的dt和dd元素追加到dl元素上。

var dlist = document.createElement("dl");
for (key in defs){
    var definition = defs[key];
    //创建定义标题
    var dtitle = document.createElement("dt");
    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);
}

插入定义列表：(1)先给这个定义列表一个标题，先创建一个h2，再创建一个文本节点并添加到h2上。(2)将缩略列表标题和缩略列表插入到body中。
【引用<body>标签的方法】
DOM Core：即引用给定文档的第一个body标签，document.getElementByTagName(“body”)[0]
HTML-DOM：即给定文档的属性，document.body

var header = document.createElement("h2");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
//把标题添加到页面主体
document.body.appendChild(header);
//把定义列表添加到页面主体
document.body.appendChild(dlist);

由于IE浏览器知道IE7才支持<abbr>元素，因此displayAbbreviations函数在早期浏览器无法使用。
【可供解决办法】

把abbr元素统一替换成acronym元素。不提倡。
在元素中使用html命名空间（<html:abbr>abbt</html:abbr>），这样IE就可以认出这些元素。但这个方法涉及到修改标记，如果在其他文档中使用该函数，问题依然无法解决。
保证该函数在IE中平稳退化。

这里，第三种方式：
1.在负责从abbr元素中提取title属性值和文本值的for循环中添加一条语句。如果当当前元素没有子节点就开始下一次循环。

if (current_abbr.childNodes.length < 1) continue;

2.在负责创建缩略语列表的for循环中添加一条语句。如果dl元素没有子节点，就立刻退出该函数。

if (dlist.childNodes.length < 1) return false;

displayAbbreviations函数完整代码：

function displayAbbreviations(){
	if (!document.getElementsByTagName) return false;
	if(!document.createElement) return false;
	if(!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 = document.createElement("dt");
        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);
}

二、显示文献来源链接表
blockquote元素包含一个cite属性，用来标明出处，即文章的url地址。这里，通过JS将地址动态地加载到引用段落的最后位置。
【编写displayCitations函数】
首先，找出文档中所有blockquote元素，通过getElementByTagName，它返回一个数组，保存在变量quotes中。

var quotes = document.getElementsByTagName("blockquote");

遍历数组quotes，(1)首先测试本段落是否有cite属性，使用getAttribute方法，如果没有改属性，就跳到下一次循环。(2)获取当前blockquote元素的cite属性值并存入变量url。

if (!quotes[i].getAttribute("cite")) continue;
var url = quotes[i].getAttribute("cite");

决定文献来源链接存放位置，一个blockquote元素必定包含块级元素，以容纳大量文本。我们想要放在该元素所包含的最后一个元素节点之后。

var quoteChildren = quotes[i].getElementsByTagName("*");
if (quoteChildren.length < 1) continue;
var elem = quoteChildren[quoteChildren.length-1];

创建链接，用createElement方法创建一个a标签，并创建一个文本标签加载a标签上。然后把href属性添加给新链接。

var link = document.createElement("a");
var link_text = document.createTextNode("source");
link.appendChild(link_text);
link.setAttribute("href",url);

插入链接，使用元素sup包装该链接，使它在浏览器中呈现出上标的效果。首先，创建sup元素节点，并存入变量superscript中，再将新链接放入sup元素。最后将其插入到blockquote元素包含的的最后一个元素节点，即elem变量中。

var susperscript = document.createElement("sup");
susperscript.appendChild(link);
elem.appendChild(susperscript);

三、快捷显示清单
accesskey属性可以把一个元素与键盘的某个特定按键联系起来。
一些约定俗成的快捷键设置：

accesskey="1"对应“返回本网站主页”的链接
accesskey="2"对应“后退到前一个网页”的链接
accesskey="4"对应“打开本网站的搜索页表单/页面”的链接
accesskey="9"对应“本网站的联系方式”的链接
accesskey="0"对应“查看本网站的快捷键清单”的链接

利用DOM技术，可以动态地创建一份快捷键清单。

function displayAccessKeys(){
	if (!document.getElementsByTagName) return false;
	if(!document.createElement) return false;
	if(!document.createTextNode) return false;
	//获得文档中的所有链接
	var links = document.getElementsByTagName("a");
	//创建一个数组，保存访问键
	var akeys = new Array();
	//遍历链接
	for(var i=0;i<links.length;i++){
        var current_link = links[i];
        //如果没有accesskey属性，继续循环
        if(!current_link.getAttribute("accesskey")) continue;
        //取得accesskey的值
        var key = current_link.getAttribute("accesskey");
        //取得链接文本
        var text = current_link.lastChild.nodeValue;
        //添加到数组
        akeys[key] = text;
	}
	//创建列表
	var list = document.createElement("ul");
	//遍历访问键
	for (key in akeys){
        var text = akeys[key];
        //创建放到列表项中的字符串
        var str = key + ":" + text;
        //创建列表向
        var item = document.createElement("li");
        var item_text = document.createTextNode(str);
        item.appendChild(item_text);
        //把列表项添加到列表中
        list.appendChild(item);
	}
	//创建标题
	var header = document.createElement("h3");
	var header_text = document.createTextNode("AccessKeys");
    header.appendChild(header_text);
    //把标题添加到页面主题
    document.body.appendChild(header);
    //把列表项添加到主页
    document.body.appendChild(list);
}

addLoadEvent(displayAccessKeys);

四、检索和添加信息
在需要对文档里的信息进行检索时，以下DOM方法最有用：

getElementById
getElementsByTagName
getAttribute

在需要把信息添加到文档里去时，以下DOM方法最有用：

createElement
createTextNode
appendChild
insertBefore
setAttribute

以上DOM方法组合可以让我们编写出功能非常强大的DOM脚本来。
注意：javascript脚本只应该用于充实文档的内容，要避免用DOM技术来创建核心内容。

荔枝之之

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【javascript】充实文档的内容

一、显示缩略语缩略语（<abbr>标签）的title属性在浏览器中是隐藏的，我们可以通过JS来动态加载并显示缩略语希望得到的定义列表：<dl> <dt>W3C</dt> <dd>World Wide Web Consortium</dd> <dt>DOM</dt> ...
复制链接

扫一扫