What is the Document Object Model?
The W3C defines the DOM as：
A platform- and language-neutral interface that will allow programs and scripts to dynamically acess and update the content,structure and style of documents.
It is an API that can be used to navigate HTML and XML documents.
添加标记：
<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 acess 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>
<!DOCTYPE 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 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 acess 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>
var abbreviations=document.getElementsByTagName("abbr");
var defs=new Array();
for(var i=0;i<abbreviations.length;i++){
var definition=abbreviations[i].getAttribute("title");
var key=abbreviations[i].lastChild.nodeValue; //firstChild也可以，但若文本本<em>包含则只能用lastChild
defs[key]=definition; //将key用作数组元素的下标
}
创建标记
var dlist=document.createElement("dl");
for(key in defs){ //含义：对于defs关联数组里的每个键，把它的值赋给变量key
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);
}
插入这个定义列表
创建一个描述性标题并将它们插入文档中。 displayAbbreviations()函数代码：
function displayAbbreviations(){
var abbreviations=document.getElementsByTagName("abbr");
var defs=new Array();
for(var i=0;i<abbreviations.length;i++){
var definition=abbreviations[i].getAttribute("title");
var key=abbreviations[i].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);
}
var header=document.createElement("h2");
var header_text=document.createTextNode("Abbreviations");
header.appendChild(header_text);
document.body.appendChild(header);
document.body.appendChild(dlist);
}
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("source");
link.appendChild(link_text);
link.setAttribute("href",url);
插入链接
var superscript=document.createElement("sup");
superscript.appendChild(link); //呈现上标的效果
elem.appendChild(superscript);
代码清单
function displayCitations(){
if(!document.getElementsByTagName) return false;
if(!document.createElement) return false;
if(!document.createTextNode) return false;
var quotes=document.getElementsByTagName("blockquote");
for(var i=0;i<quotes.length;i++){
if(!quotes[i].getAttribute("cite")){
continue;
}
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("source");
link.appendChild(link_text);
link.setAttribute("href",url);
var superscript=document.createElement("sup");
superscript.appendChild(link);
elem.appendChild(superscript);
}
}
addLoadEvent(displayCitations);
