html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="../css/demo01.css">
</head>
<body>
<h1>What's 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 alows programs
and scripts to dynamically access and update the content ,structure and style of document.
</p>
</blockquote>
<p> It is an <abbr title="Application Programing 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 src="../js/demo01.js"></script></body></html>
css部分
body{ font-family: 'Helvetica' ,'Arial' ,'sans-serif'; font-size: 10pt;}abbr{ text-decoration: none; border: 0; font-style: normal;}
js部分
/** * Created by Administrator on 2016/6/4 0004. */
//创建一个函数叫做despalyabbreviations
function displayAbbreviations() {
//新建一个变量abbrevitions获取文档中的abbr标签
var abbreviations = document.getElementsByTagName('abbr');
//如果abbr标签的数量小于1，停止运行这个函数
if(abbreviations < 1)return false;
//定义一个新的数组
var defs = new Array();
//遍历已经获取的abbreviations数组
for (var i = 0;i < abbreviations.length; i++){
//新建一个新的变量，获取 abbreviations数组
var current_abbr = abbreviations[i];
//新建一个变量获取到abbr标签的titie属性
var definition = current_abbr.getAttribute('title');
//新建一个变量，使用lastchild方法获取到nodevalue属性
var key = current_abbr.lastChild.nodeValue;
//将defunition获取到的title属性值赋予key
defs[key] = definition;
}
//新建一个列表标签
var dlist = document.createElement('dl');
//执行for/in循环，每循环一次将defs数组的值添加到key中。
for (key in defs){
//将key获取到的nodevalue属性赋予definition
var definition = defs[key];
//创建一个变量，创建一个新的元素，dt
var dtitle = document.createElement("dt");
//创建一个新的文本属性并且获取到key数组遍历得到的值
var dtitle_text = document.createTextNode(key);
//执行appchild方法将dtitle_text放到dtitle中
dtitle.appendChild(dtitle_text);
//创建一个新的元素dd
var ddesc = document.createElement('dd');
//创建一个新的text属性，并且获取到definition的值保存起来
var ddesc_text = document.createTextNode(definition);
//执行appchild方法并将ddesc_text放到ddesc中
ddesc.appendChild(ddesc_text);
//执行appchild方法，把ddesc和dtitle都放到dlist中
dlist.appendChild(ddesc);
dlist.appendChild(dtitle);
}
//创建一个header变量，创建一个h2标签
var header = document.createElement('h2');
//创建一个新的文本属性获取到abbrevitions的值
var header_text = document.createTextNode('Abbrevitions');
//执行appchild方法
header.appendChild(header_text);
document.body.appendChild(header);
document.body.appendChild(dlist);
}
//在文档加载的时候执行函数
window.onload = displayAbbreviations();
