【干货】JavaScript DOM编程艺术学习笔记7-9

七、动态创建标记

在文档中不写占位图片和文字代码，在能调用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";}

}

}