JavaScript DOM编程艺术—显示“缩略语列表”
2015-11-18 17:07
1021 查看
将文档中的<abbr>标签中的title属性集中起来显示在一个页面.
test.html
<!document html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Explaining the Document Object Model</title>
</head>
<body>
<h1>what is the Document Object Model?</h1>
<p>
The <abbr title="world wide webconsortium">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. structures and style of documents.
</p>
</blockquote>
<p>
it is an <abbr title="Application Programming InterFace">API</abbr> that can be used to navigate HTML and XML documents.
</p>
<script type="text/javascript" src="addLoadEvent.js"></script>
<script type="text/javascript" src="displayAbbr.js"></script>
</body>
</html>
addLoadEvent.js
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}
else{
window.onload = function(){
oldonload();
func();
}
}
}
displayAbbr.js
addLoadEvent(displayAbbr);
function displayAbbr(){
if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
if(!document.createElement) return false;
var abbrs = document.getElementsByTagName("abbr");
// if(abbrs.length < 1) return false;
var arr = new Array();
for(var i=0; i<abbrs.length; i++){
var abbr = abbrs[i];
if(abbr.childNodes.length < 1) continue;
var key = abbr.lastChild.nodeValue;
var description = abbr.getAttribute("title");
arr[key] = description;
}
//创建定义列表
var xdl = document.createElement("dl");
for(key in arr){
var xdt = document.createElement("dt");
var atxt = document.createTextNode(key);
xdt.appendChild(atxt);
var xdd = document.createElement("dd");
var btxt = document.createTextNode(arr[key]);
xdd.appendChild(btxt);
xdl.appendChild(xdt);
xdl.appendChild(xdd);
}
document.body.appendChild(xdl);
}显示效果:
DOM as:
A platform and language-neutral interface that will allow programs and scripts to dynamically access and update the content. structures and style of documents.
it is an API that can be used to navigate HTML and XML documents.
W3Cworld wide webconsortiumDOMDocument Object ModelAPIApplication Programming InterFace
test.html
<!document html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Explaining the Document Object Model</title>
</head>
<body>
<h1>what is the Document Object Model?</h1>
<p>
The <abbr title="world wide webconsortium">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. structures and style of documents.
</p>
</blockquote>
<p>
it is an <abbr title="Application Programming InterFace">API</abbr> that can be used to navigate HTML and XML documents.
</p>
<script type="text/javascript" src="addLoadEvent.js"></script>
<script type="text/javascript" src="displayAbbr.js"></script>
</body>
</html>
addLoadEvent.js
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}
else{
window.onload = function(){
oldonload();
func();
}
}
}
displayAbbr.js
addLoadEvent(displayAbbr);
function displayAbbr(){
if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
if(!document.createElement) return false;
var abbrs = document.getElementsByTagName("abbr");
// if(abbrs.length < 1) return false;
var arr = new Array();
for(var i=0; i<abbrs.length; i++){
var abbr = abbrs[i];
if(abbr.childNodes.length < 1) continue;
var key = abbr.lastChild.nodeValue;
var description = abbr.getAttribute("title");
arr[key] = description;
}
//创建定义列表
var xdl = document.createElement("dl");
for(key in arr){
var xdt = document.createElement("dt");
var atxt = document.createTextNode(key);
xdt.appendChild(atxt);
var xdd = document.createElement("dd");
var btxt = document.createTextNode(arr[key]);
xdd.appendChild(btxt);
xdl.appendChild(xdt);
xdl.appendChild(xdd);
}
document.body.appendChild(xdl);
}显示效果:
what is the Document Object Model?
The W3C defines theDOM as:
A platform and language-neutral interface that will allow programs and scripts to dynamically access and update the content. structures and style of documents.
it is an API that can be used to navigate HTML and XML documents.
W3Cworld wide webconsortiumDOMDocument Object ModelAPIApplication Programming InterFace
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- 如何创建对象以及jQuery中创建对象的方式
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式