发表于： 2019-04-20 22:11:55
1 225
看dom编程思想：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
font-family: "Helvetica", "Arial", sans-serif;
font-size: 10pt;
}
abbr {
text-decoration: none;
border: 0;
font-style: normal;
}
</style>
</head>
<body>
/*第八章 本章是第七章的延申 更加深入理解dom创建标记*/
<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.baidu.com">
<p>
A platform- and language-neutral interface that will allow programms
and scripts to dynamically access and update the
cotent, structure and style of documents.
</p>
</blockquote>
<p>
It is and <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>
addLoadEvent(displayAbbreviations);
addLoadEvent(displayCitations);
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 title_text = document.createTextNode(key);
dtitle.appendChild(title_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);
}
function displayCitations() {
//取得所有引用
var quotes = document.getElementsByTagName("blockquote");
//遍历引用
for (var i = 0; i < quotes.length; i++) {
//如果没有cite属性，继续循环
if (!quotes[i].getAttribute("cite")) {
continue;
}
//保存cite属性
var url = quotes[i].getAttribute("cite");
//取得引用中的所有元素界定啊
var quoteChildren = quotes[i].getElementsByTagName("*");
//如果没有元素节点，继续死循环
if (quoteChildren.length < 1) {
continue;
}
//取得引用中的最后一个元素节点
var elem = quoteChildren[quoteChildren.length - 1];
//创建标记
var link = document.createElement("a");
var link_text = document.createTextNode("sourse");
link.appendChild(link_text);
link.setAttribute("href",url);
var superscript = document.createElement("sup");
superscript.appendChild(link);
//把标记添加到引用中的最后一个元素节点
elem.appendChild(superscript);
}
}
//由Simon Willison提供的使onlond函数加载多次的函数！！
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function () {
oldonload();
func();
}
}
}
本章主要学习使用用dom动态生成标记！！！！！！
明天的计划
继续看书！！
返回列表
评论