标签：highlight world 链接 list 快捷 事件 子节点 family 根据
七、动态创建标记
在文档中不写占位图片和文字代码，在能调用js的情况下动态创建，文档支持性更好。
在原来的addLoadEvent prepareGallery showPic的基础上增加函数preparePlaceHolder
最后调用preparePlaceHolder和prepareGallery两个函数
function preparePlaceHolder(){
//对象检测
if(!document.createElement) return false;
if(!document.creatTextNode) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
//创建占位图片元素
var placeholder=document.createElement("img");
placeholder.setAttribute("id" ,"placeholder");
placeholder.setAttribute("src" ,"images/placeholder.gif");
placeholder.setAttribute("alt" ,"my image gallery");
//创建文本段元素节点
var description=document.createElement("p");
description.setAttribute("id","description");
//创建文本节点
var destext=document.createTextNode("choose an image");
description.appendChild(destext);
var gallery=document.getElementById("imagegallery");
//将placeholder插入gallery后
insertAfter(placeholder,gallery);
//将description插入placeholder后
insertAfter(description,placeholder);
}
function insertAfter(newElement, targetElement){
//取出目标元素的父元素
var parent=targetElement.parentNode;
//如果目标元素是父元素最后一个子节点，则追加到父元素最后
if(parent.lastChild==targetElement){
parent.appendChild(newElement);
}
//如果不是，则插入到目标元素的下一个兄弟元素之前
else{
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
注：
innerHTML：需要插入一大段内容时用，比如testdiv.innerHTML="<p>I insert <em>this</em> content</p>";可以放在外部js中与文档分离。属于html专用属性，其他标记语言不支持。
document.creatElement(nodeName):添加元素节点。
document.creatTextNode(text):添加文本节点。
parent.appendChild(child):使child元素成为parent元素最后一个子节点。
targetElement.parentNode.insertBefore(newElement, targetElement):将newElement插入targetElement之前。
targetElement.nextSibling:targetElment元素的下一个兄弟元素。
Ajiax和Hijax后面讲。
八、充实文档内容
把文档中的现有信息用另一种结构呈现，比如缩略语列表，文献来源链接，快捷键清单。基本步骤都是，先创建一个特定元素（如缩略语）构成的节点集合，然后循环遍历这个集合，在每次循环里创建一些标记，最后把新创建的标记插入到文档里。
缩略语列表：
在文档中是<p>The <abbr title="world wide web consortium">w3c</abbr></p>用abbr来标记，里面的title内容不显示，只显示文本w3c
function displayAbbreviations(){
if(!doucument.getElementsByTagName||!document.createElement||!document.createTextNode) return false;
//取得所有缩略语元素
var abbreviations=document.getElementsByTagName("abbr");
if(abbreviations.length<1) returen false;
//创建存储数组
var defs=new Array();
//遍历缩略语元素
for(i=0; i<abbreviations.length; i++){
var current_abbr=abbreviations[i];
//如果是空的继续下一个循环
if(current_abbr.childNodes.length<1) continue;
//存储对应的key和defination
var key=current_abbr.lastChild.nodeValue;
var defination=current_abbr.getAttribute("title");
defs[key]=definition;
}
//创建定义列表
var dlist=document.createElement("dl");
//遍历缩略语数组defs
for(key in defs){
//为每一个创建定义标题dt对应key
var dtitle=document.createElement("dt");
var dtitle_text=document.createTextNode(key);
dtitle.appendChild(dtitle_text);
//创建定义描述dd对应defination
var ddesc=document.createElement("dd");
var ddesc_text=docuement.createTextNode(defination);
ddesc.appendChild(ddesc_text);
//将每组dt dd添加到列表dl
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
if(dlist.childNodes.length<1) return false;
//将定义列表添加到页面
document.body.appendChild(dlist);
}
文献来源连接表：
在页面中是blockquote的cite属性：<blockquote cite="http://www.w3.org/DOM"><p></p></blockquote>，想把cite内内容添加到p的最后。在页面中用sup元素包装，显示为上标。
function displayCitations(){
if(!document.getElementsByTagName||!document.createElement||!document.createTextNode) return false;
//取得所有引用
var quotes=document.getElementsByTagName("blockquote");
//遍历引用
for(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(quotoChildren.length<1) continue;
//取得引用中最后一个元素节点
var elem=quoteChildren[quoteChildren.length-1];
//创建标记a
var link=document.createElement("a");
var link_text=document.createTextNode("source");
link.appendChild(link_text):
link.setAttribute("href",url);
//封装到sup元素里
var superscript=document.createElement("sup");
superscript.appendChild(link);
//添加到引用的最后一个元素里
elem.appendChild(superscript);
}
}
显示快捷键清单：
a元素的accesskey属性，如<a href="index.html" accesskey="1">Home</a>，方法与上同。
九、CSS-DOM
1、style属性
通过DOM style属性获取样式：elem.style.fontFamily，可以识别速记属性，另外有连接线的属性名在dom中采用驼峰法表示。
但是，这种方式只能获取内嵌在html代码里的属性声明，外部链接的样式表和文档head里声明的style属性，用这种方法都提取不到。
用这种方式设置样式：para.style.font="2em ‘Times‘, serif";
2、什么时候使用DOM设置属性
一般情况下样式应该用CSS去设置，只有当CSS无法找到想要处理的目标元素，或者是用CSS找目标元素的方法还未得到广泛的支持时，采用DOM的方法，另外用DOM的方法尽量不直接设置style属性，而是更新className属性。
（1）根据元素节点的位置设置样式styleHeaderSiblings
（2）遍历一个节点集合设置有关元素的样式stripeTables
（3）在事件发生时设置有关元素的样式highLightRows
（1）：根据元素在节点树的位置来设置样式
function styleHeaderSiblings(){
//对象检测
if(!document.getElementsByTagName) return false;
//选出h1元素
var headers=document.getElementsByTagName("h1");
var elem;
for(var i=0; i<headers.length; i++){
//找到header后面一个元素节点
elem=getNextElement(headers[i].nextSibling);
//为该元素增加一个属性，而不是改变属性
addClass(elem,"intro");
}
}
function getNextElement(node){
//获取下一个元素节点，而不是下一个节点
if(node.nodeType==1) return node;
if(node.nextSibling){
return getNextElement(node.nextSibling);
}
}
function addClass(element,value){
if(!element.className) element.className=value;
else{
element.className+=" intro";
}
}
最后在CSS中设置intro类的属性：.intro{font-weight:bold; font-size:1.4em};
（2）：根据某种条件反复设置某种样式
function stripeTables(){
if(!document.getElementsByTagName) return false;
//取出所有列表
var tables=document.getElementsByTagName("table");
var odd,rows;
//遍历列表
for(var i=0; i<tables.length; i++){
odd=false;
//取出列表所有行
rows=tables[i].getElementsByTagName("tr");
for(var j=0; j<rows.length; j++){
//根据行的奇偶性设置属性
if(odd==true){
addClass(rows[j],"odd");
odd=false;
}
else{
odd=true;
}
}
}
}
再在CSS中设置odd类样式： .odd{background-color:#ffc};
（3）：根据相应事件设置样式
function highLightRows(){
if(!document.getElementsByTagName) return false;
var rows=document.getElementsByTagName("tr");
for(var i=0; i<rows.length; i++){
rows[i].onmousover=function(){this.style.fontWeight="bold";}
rows[i].onmouseout=function(){this.style.fontWeight="normal";}
}
}
标签：highlight world 链接 list 快捷 事件 子节点 family 根据
原文地址：http://www.cnblogs.com/ziye89/p/7345308.html
