但行好事 莫問前程 學習筆記
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Explaining the Document Object Model</title>
<script>
function init() {
var abbrs = document.getElementsByTagName("abbr");
var _abbr = new Array();
var dlList = document.createElement("dl");
for (var i = 0; i < abbrs.length; i++) {
var text = abbrs[i].getAttribute("title");
var key = abbrs[i].lastChild.nodeValue;
_abbr[key] = text;
}
for (key in _abbr) {
var title = key;
var text = _abbr[key];
var _dt = document.createElement("dt");
var dtText = document.createTextNode(title);
_dt.appendChild(dtText);
var _dd = document.createElement("dd");
var ddText = document.createTextNode(text);
_dd.appendChild(ddText);
dlList.appendChild(_dt);
dlList.appendChild(_dd);
}
//var _body = document.getElementsByTagName("body")[0];
//_body.appendChild(dlList);
var _h2 = document.createElement("h2");
var h2_text = document.createTextNode("Abbreviations");
_h2.appendChild(h2_text);
document.body.appendChild(_h2);
document.body.appendChild(dlList);
var _blockquote = document.getElementsByTagName("blockquote")[0];
var _cite = _blockquote.getAttribute("cite");
var _a = document.createElement("a");
_a.setAttribute("href", _cite);
_a.setAttribute("target", "_blank")
var _url = document.createTextNode("source");
_a.appendChild(_url);
//var blockquoteChilds = _blockquote.getElementsByTagName("*");
//blockquoteChilds[blockquoteChilds.length - 1].appendChild(_a);
//document.body.appendChild(_a);
//var blockquoteLastChildElement = lastChildElement(_blockquote);
//blockquoteLastChildElement.appendChild(_a);
var blockquoteLastChildElement = _blockquote.lastElementChild;
//alert(blockquoteLastChildElement);
var _sup = document.createElement("sup");
_sup.appendChild(_a);
blockquoteLastChildElement.appendChild(_sup);
var _navigation = document.getElementById("navigation");
var liList = _navigation.getElementsByTagName("li");
//alert(liList.length);
var _ul = document.createElement("ul");
for (var i = 0; i < liList.length; i++) {
var _a = liList[i].getElementsByTagName("a")[0];
//alert(_a.getAttribute("href") + " --- " + _a.getAttribute("accessKey") + " --- " + _a.lastChild.nodeValue);
var _li = document.createElement("li");
var _comment = document.createTextNode(_a.getAttribute("accessKey") + ":" + _a.lastChild.nodeValue);
_li.appendChild(_comment);
_ul.appendChild(_li);
}
var _h22 = document.createElement("h2");
var _h22_Text = document.createTextNode("Accesskeys");
_h22.appendChild(_h22_Text);
document.body.appendChild(_h22);
document.body.appendChild(_ul);
}
function lastChildElement(parent){
var parentChilds = parent.getElementsByTagName("*");
return parentChilds[parentChilds.length - 1];
}
window.onload = init;
</script>
</head>
<body>
<ul id="navigation">
<li><a href="index.html" accesskey="1">Home</a></li>
<li><a href="search.html" accesskey="4">Search</a></li>
<li><a href="contact.html" accesskey="0">Contact</a></li>
</ul>
<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 access 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>
