<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>ExplainingtheDdocumentObModel</title><linkhref="style08.css"type="text/css"rel="stylesheet"/></head><body><h2>WhatistheDocumentobjectModel?</h2><p>The<abbrtitle="WorleWideWebConsortium">W3C</abbr>definesthe<abbrtitle="ObjectModel">DOM</abbr>as:</p><blockquotecite="http://www.w3.org/DOM/"><P>Aplatform-andlanguage-neutralinterfacethatwillallowprogramsandscriptstodynamicallyaccessandupdatethecontent,structureandstylesofdocuments.</p></blockquote><p>Itisan<abbrtitle="ApplicationProgrammingInterface">API</abbr>thatcanbeusedtonavigate<abbrtitle="eXtensibleMarkupLanguage">XML</abbr>documents.</p><scriptsrc="8.5.js"></script></body></html>

functionaddLoadEvent(func){//不管在页面加载完毕执行多少个函数，都应付自如varoldonload=window.onload;if(typeofwindow.onload!='function'){window.onload=func;}else{window.onload=function(){oldonload();func();}}}functiondisplayCitations(){//检查兼容性if(!document.getElementsByTagName||!document.createElement||!document.createTextNode)returnfalse;varquotes=document.getElementsByTagName("blockquote");for(vari=0;i<quotes.length;i++){if(!quotes[i].getAttribute("cite"))continue;varurl=quotes[i].getAttribute("cite");//获取cite属性的值：也就是链接varquoteChildern=quotes[i].getElementsByTagName("*");//因为p节点和blockquote节点之间有个换行符，不少浏览器会把它解释为几个文本节点，这样一来，blockquote元素节点的lastChild属性//检查长度是否小于1，如果是，立刻退出本次循环。//就是一个文本节点不是p元素节点。该条语句是为了获取最后一个元素节点的位置。建议：如果没有百分之百把握，一定要去检查if(quoteChildern.length<1)continue;//lastChild的nodeType属性，以免获取节点错误。varelem=quoteChildern[quoteChildern.length-1];varlink=document.createElement("a");//创建a元素varlink_text=document.createTextNode("source");link.appendChild(link_text);link.setAttribute("href",url);//把href属性添加给新链接//插入链接varsuperscript=document.createElement("sup");//sup元素：指定内含文本要以上标的形式显示，通常比当前字体稍小。superscript.appendChild(link);//以上语句html文本：<sup><ahref="http://www.w3.org/DOM/">source</a></sup>elem.appendChild(superscript);//追加为变量elem的最后一个子节点}}addLoadEvent(displayCitations);


浏览器效果：