document.createElement(tagName)--创建节点
通过对前面基础知识的学习，我们现在开始正式讲解这个实例的实现过程了，接着开实例下面代码：
复制内容到剪贴板
代码:
// 创建透明阴影遮照效果层
var shadow = document.createElement("div");这样我们就通过document.createElement("div");创建了一个div节点，但是只是创建节点还是远远不够的，看看我们开头的原理分析，我们创建的这个层有特殊的position定位，而我们怎么来实现给它添加这些属性（Attribute）呢？
element.setAttribute--设置CSS样式
为什么我要用Attribute而不是Property呢？因为我接下来要介绍的一个DOM操作的方法element.setAttribute(AttributeName,value)--给节点设置属性。还是回到例子
复制内容到剪贴板
代码:
shadow.setAttribute("id","shadow"); 这样我就给我刚刚创建的div添加了一个id属性，值是shadow,相当于这么写：
复制内容到剪贴板
代码:
<div id="shadow"></div>为什么要给这个节点添加id？其实目的很简单，以便我们在以后的程序开发中使用document.getElementById查寻这个节点。
element.getAttribute(AttributeName)--获得属性
既然能够设置属性，我们就可以使用element.getAttribute(AttributeName)方法获得属性，举个例子：
复制内容到剪贴板
代码:
<input name="btnshow" id="btnshow" type="button" onclick="CreateDiv()" value="显示信息层" />
<script language="javascript" type="javascript">
<!--
var btn=document.getElementById("btnshow");
alert(btn.getAttribute("value"));
//-->
</script>接下来就是要设置这个节点的position属性了，怎么做？看看我的代码：
复制内容到剪贴板
代码:
shadow.style.position="absolute";
shadow.style.left="0";
shadow.style.top="0";
shadow.style.width="100%";
shadow.style.height="100%";
shadow.style.zIndex="10";这么设置的结果就等于我们这么写CSS：
复制内容到剪贴板
代码:
#shadow{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:10;
}这么一写，我想大家就清楚现在的这个遮照层的样式是个什么样子了：一个用绝对定位的层，占满整个屏幕，z坐标为10。
这么一翻译，我想他的效果大家很清楚了，这里要说明是的position:absolute;达到的效果，虽然它占满了真个屏幕，但却不影响其他元素的布局，例子中的按钮的布局就没有受到影响。而至于position方法的说明，请看
《[url=http://www.yaohaixiao.com/samples/articles/index.htm]Ajax标签导航实例详解[url]》一文中对position定位的说明。
而在这里我要重点介绍的是怎么使用Javascript给一个DOM节点添加CSS样式？在Javascript里我们是通过style这个关键字来设置的，然后就是接着属性，最后给属性付值。就像这样（element.style.property=value）：
复制内容到剪贴板
代码:
shadow.style.zIndex="10";呵呵，我为什么单单要拿z-index这个属性来讲呢？这里要讲一下设置CSS样式的语法：属性都必须是小写的，但是如z-index,background-color,text-decoration这样中间有连接符的属性，就采用骆驼华的写法，就是这样:
复制内容到剪贴板
代码:
shadow.style.zIndex="1";
shadow.style.backgroundColor="#FFF";
shadow.style.textDecoration="24px";现在大家清楚了怎么用javascript给一个节点设置样式了吧。其实还有更简单的方法，怎么个简单法？其实在我上面的代码就已经给出了答案，使用setAttribute()方法，大家看看下面的代码就清楚了。
复制内容到剪贴板
代码:
// 创建提示框层节点
var obj=document.createElement("div");
obj.setAttribute("id","window");
obj.style.zIndex="999";发现了什么问题没有？对了，在这里我创建了节点后，只是使用setAttribute()方法给节点设置了id 属性，而没有像设置shadow节点那样再给它添加CSS样式了，但是它的样式已经获得了，因为我早已经在之前的CSS代码写好样式了。
复制内容到剪贴板
代码:
#window{
position:absolute;
left:50%;
top:50%;
width:400px;
height:180px;
margin:-90px 0 0 -200px;
}所以这个更简单的方法就是事先就把要创建的节点的样式写好，就可以直接使用setAttribute()方法给节点设置一个于写好的CSS对应的id或class属性就可以了（给节点添加class属性，如：element.setAttribute("class",className)）。
怎么给节点设置CSS样式，这里基本上就讲完了，还是回到我们的实例，看看，后来我又给shadow节点添加了什么样式：
复制内容到剪贴板
代码:
// 如果是Opera浏览器则给shadow设置背景色和透明效果
if(!isOpear){
shadow.style.backgroundColor="#06C";
if(document.all){
shadow.style.filter = "alpha(opacity=20)";
}
else{
shadow.style.opacity = 0.2;
}
}对了，我们的shadow（阴影）是有一个半透明的效果的，所以我分别使用了shadow.style.filter = "alpha(opacity=20)";和shadow.style.opacity = 0.2;给它设置了透明的滤镜。其实就是一般的设置CSS样式。不过这里要说是————如何判断浏览器类型？
判断浏览器类型复制内容到剪贴板
代码:
// 判断是否为Opear浏览器
var isOpear=(navigator.userAgent.indexOf('Opera')>-1);
if(!isOpear){
...
if(document.all){
...
}
} 这些代码的作用就是用来判断用户使用的浏览器类型的。可是大家要问了，isOpear我们可以很清楚知道，是判断浏览器是否为opera，但是document.all是判断什么的？
这个问题问得好。接下来就是我要简单的讲一讲在javascript编程中另一个要经常面对的问题--对浏览器类型的判断。
首先我给出一段常用的判断浏览器类型的代码：
复制内容到剪贴板
代码:
var Brower={
// 判断是否为IE6浏览器
isIE6:function(){return navigator.userAgent.search('MSIE')>0&&navigator.userAgent.search('6')>0;},
// 判断是否为IE浏览器
isIE:function(){return navigator.userAgent.search('MSIE')>0;},
// 判断是否为Opera浏览器
isOpera:function(){return navigator.userAgent.indexOf('Opera')>-1;},
// 判断是否为FireFox浏览器
isMoz:function(){return navigator.userAgent.indexOf('Mozilla/5.')>-1;}
}还有些其他的判断其他类型的浏览器的代码，这里就不多写了，大家使用这些常用的代码基本就能够应对常规的开发了。调用这个类（这里就是我们前面提到的
“用户定义对象（user-defined object）”）的方法：
复制内容到剪贴板
代码:
if(!Brower.isOpera){
// Do something
}
使用起来很方便，不是吗？不过这里其实我重点要介绍的不是以这中方法来判断浏览器类型，而是重点介绍一下像if(document.all)这样的判断浏览器类型的方法。又是刚才的问题，这个怎么判断浏览器类型啊？来看看这段代码：
复制内容到剪贴板
代码:
// 获取DOM节点
function $(i){
if(!document.getElementById)return false;
if(typeof i==="string"){
if(document.getElementById && document.getElementById(i)) {
// W3C DOM
return document.getElementById(i);
}
else if (document.all && document.all(i)) {
// MSIE 4 DOM
return document.all(i);
}
else if (document.layers && document.layers[i]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[i];
}
else {
return false;
}
}
else{return i;}
}
呵呵，看到了这段代码里面的注释了吗？再看看else if (document.all && document.all(i))，呵呵，我们在开发要面对的一个很头疼的问题————
浏览器的兼容问题。原来我们做什么浏览器类型判断，其实根源就在于各大浏览器之间仍然存在着兼容问题。
各个浏览器之间都有着自己一些独特的标准，都有着自己的“专利”方法（对于以前的那段浏览器大战的历史，感兴趣的朋友可以GOOGLE一下），虽然现在我们的各个浏览器服务商都开始统一的支持W3C指定的标准，但是兼容性的问题仍然存在，也就是我刚才所的“专利”。
话题回到我们的实例，if(document.all) 是什么意思？这个就是我们的IE的“专利”（获得节点的“专利”），在IE浏览器中使用document.all[elementID]方法也可以同样获取指定ID的节点，效果跟document.getElementById一样，因为只有IE支持这么查找节点，所以如果支持docment.all（也就是if(document.all)）,那么它就是IE浏览器了。
再看看，我上面给的代码，就是一个为了兼容浏览器而改写（document.getElementById）的一个函数，document.layers就是基于Gecko内核浏览器支持的查询指定ID节点的方法。利用这些“专利”，我们就可以很方便的来判断浏览器的类型了，而不用花费大量时间和经历去分析userAgent的信息了。
顺便再多说一句，刚才的那些“专利”其实要是都改用支持W3C的document.getElementById，我们也就不用那么费力了。不过倒是真的要感谢我们IE的一些专利，比如我们著名的innerHTML。没有它，也就没有我们现在这个AJAX技术了。
又扯远了，还是回到我们的主题，由于浏览器的不兼容和各自的“专利”技术，所以我们这里要设置一个透明的效果，也针对IE和基于Gecko内核浏览器使用了filter和opacity属性来设置我们shadow层的透明值。
接着开下面的代码：
复制内容到剪贴板
代码:
var divTitle = document.createElement("div");
divTitle.setAttribute("id","win-tl");
var H2 = document.createElement("h2");
var IMG=document.createElement("img");
IMG.setAttribute("src","img/win.png");
IMG.setAttribute("alt","Window-Icon");
var txtTitle=document.createTextNode("爱唱卡充值");
H2.appendChild(IMG);
H2.appendChild(txtTitle);
var closeBar=document.createElement("div");
closeBar.setAttribute("id","closebar");
var A = document.createElement("a");
A.innerHTML="关闭窗口";
A.setAttribute("href","#1");
A.setAttribute("id","btnClose");
A.setAttribute("title","关闭窗口");
closeBar.appendChild(A);
var titleRight=document.createElement("div");
titleRight.setAttribute("id","win-tr");
divTitle.appendChild(H2);
divTitle.appendChild(closeBar);
divTitle.appendChild(titleRight);
var Container = document.createElement("div");
Container.setAttribute("id","msg-content");
var cntLeft=document.createElement("div");
cntLeft.setAttribute("id","msg-leftbar");
var MSG=document.createElement("div");
MSG.setAttribute("id","msg");
var INFO=document.createElement("div");
INFO.setAttribute("id","info");
var H3 = document.createElement("h3");
H3.innerHTML="恭喜您充值成功！";
var P = document.createElement("p");
P.innerHTML="充值单号为：<strong id=\"txtuid\">1653235</strong>（请您牢记，便于查询）";
INFO.appendChild(H3);
INFO.appendChild(P);
var Btns=document.createElement("div");
Btns.setAttribute("id","btns");
var btnEnter=document.createElement("a");
btnEnter.setAttribute("id","btnEnter");
btnEnter.setAttribute("href","#1");
var txtEnter=document.createTextNode("确定");
btnEnter.appendChild(txtEnter);
Btns.appendChild(btnEnter);
MSG.appendChild(INFO);
MSG.appendChild(Btns);
var cntRight=document.createElement("div");
cntRight.setAttribute("id","msg-rightbar");
Container.appendChild(cntLeft);
Container.appendChild(MSG);
Container.appendChild(cntRight);
var msgBottom = document.createElement("div");
msgBottom.setAttribute("id","msg-bottom");
var msgBLeft=document.createElement("div");
msgBLeft.setAttribute("id","msg-bottom-left");
var msgBRight=document.createElement("div");
msgBRight.setAttribute("id","msg-bottom-right");
msgBottom.appendChild(msgBLeft);
msgBottom.appendChild(msgBRight);
document.body.appendChild(shadow);
obj.appendChild(divTitle);
obj.appendChild(Container);
obj.appendChild(msgBottom);
document.body.appendChild(obj);这里的代码，想必大家现在已经可以看明白了。我们又继续创建了其他的节点并给他们各自添加了不同的属性。不过在讲如何给节点追加子节点之前，先来介绍一下：
element.createTextNode(data)。
element.createTextNode(data)--创建文本节点
前面我们一开始介绍了，节点有不同的类型，我们常用的就只有
Element Node（元素节点）、
Attribute Node（属性节点）、
Text Node（文本节点）。前面我们已经介绍了如何创建Element节点（Element.createElement(tagName)），其实创建属性节点的方法我们也介绍了，就是element.setAttribute(AttributeName,value)。只是在XHTML中，我们一般不把属性作为一个节点来看待。
现在要讲的就是如何创建文本节点（TextNode）。在我的代码中，不知道您注意看了没有，我在将一个节点里增加文本时，使用了两个方法：
复制内容到剪贴板
代码:
P.innerHTML="充值单号为：<strong id=\"txtuid\">1653235</strong>（请您牢记，便于查询）";
var txtTitle=document.createTextNode("爱唱卡充值");
H2.appendChild(txtTitle);怎么看？先来看看element.createTextNode(data)/document.createTextNode("爱唱卡充值");这里的date="爱唱卡充值";然后使用appendChild(Element)方法，添加到标题节点。用个不恰当，但是却很形象的比喻，看看我这么写：
复制内容到剪贴板
代码:
var date="爱唱卡充值";
H2.innerHTML=date;
P.innerHTML="充值单号为：<strong id=\"txtuid\">1653235</strong>（请您牢记，便于查询）";呵呵，现在是不是看出两个方法之间的关系了（虽然这些说不恰当）。那我这里使用了innerHTML方法将“充值单号为：<strong id=\"txtuid\">1653235</strong>（请您牢记，便于查询）”这段代码添加到了P节点里，要是我们用纯DOM的方法，应该怎么做呢？
问题留给大家了，我这里就简单的给大家分析下，这段文档（document）的结构：
1、“充值单号为：”--是一个文本节点。
2、<strong/>标签是一个元素节点
3、strong标签有一个id属性（Attribute）
4、strong又包含了一个文本节点“1653235”
5、“（请您牢记，便于查询）”--是一个文本节点
这个问题大家好好想想，我接着介绍下面的问题，前面看到，只是创建了节点，是不够的。要想让用户看到他们，你必须要把这些节点添加到我们的文档（document） 中。
Element.appendChild(obj)，看到了这个方法了吗？看看他的名字append（追加）,child(孩子)。也就是说，我们要创建的那写节点，是作为子节点来追加到文档中的。
在前面我已经简单的给大家演示了节点之间的关系，那我们现在倒过来，对照我生成完成后的文档目录树的结构土来分析一下我们现在的这个例子的节点关系。
图七
我们有一个标题拦节点window-tl，那么我们就创建一个标题栏节点：
复制内容到剪贴板
代码:
var divTitle = document.createElement("div");
divTitle.setAttribute("id","win-tl");标题栏里有3个子节点，h2,closeBar,win-tr,
那我们就创建它们：
复制内容到剪贴板
代码:
var H2 = document.createElement("h2");
var closeBar=document.createElement("div");
closeBar.setAttribute("id","closebar");
var titleRight=document.createElement("div");
titleRight.setAttribute("id","win-tr"); 而H2节点里又有一个img（元素）节点和一个文本节点，我们就创建并追加进去：
复制内容到剪贴板
代码:
var IMG=document.createElement("img");
IMG.setAttribute("src","img/win.png");
IMG.setAttribute("alt","Window-Icon");
var txtTitle=document.createTextNode("爱唱卡充值");
H2.appendChild(IMG);
H2.appendChild(txtTitle);接着是关闭按钮，里面有a标签，A标签又有一个文本节点，我们接着创建并追加进去：
复制内容到剪贴板
代码:
var closeBar=document.createElement("div");
closeBar.setAttribute("id","closebar");
var A = document.createElement("a");
/*
以纯DOM的方法，我们这么写：
var txtCloseWindow=document.createTextNode("关闭窗口");
A.appendChild(txtCloseWindow);
*/
A.innerHTML="关闭窗口";
A.setAttribute("href","#1");
A.setAttribute("id","btnClose");
A.setAttribute("title","关闭窗口");
closeBar.appendChild(A);最后是这里的win-tr节点，我们创建完后，然后跟前面的H2和closeBar节点一起追加到标题节点（win-tl）中：
复制内容到剪贴板
代码:
var titleRight=document.createElement("div");
titleRight.setAttribute("id","win-tr");
divTitle.appendChild(H2);
divTitle.appendChild(closeBar);
divTitle.appendChild(titleRight);接下来是创建内容节点msg-content，里面包含左边框msg-leftbar、右边框msg-rightbar、正文msg和确定按钮：
复制内容到剪贴板
代码:
var Container = document.createElement("div");
Container.setAttribute("id","msg-content");
var cntLeft=document.createElement("div");
cntLeft.setAttribute("id","msg-leftbar");
var MSG=document.createElement("div");
MSG.setAttribute("id","msg");
var cntRight=document.createElement("div");
cntRight.setAttribute("id","msg-rightbar");而正文中有包含标题h3和提示内容p：
复制内容到剪贴板
代码:
var INFO=document.createElement("div");
INFO.setAttribute("id","info");
var H3 = document.createElement("h3");
H3.innerHTML="恭喜您充值成功！";
var P = document.createElement("p");
P.innerHTML="充值单号为：<strong id=\"txtuid\">1653235</strong>（请您牢记，便于查询）";
INFO.appendChild(H3);
INFO.appendChild(P);接着添加提示按钮，而它里面有A标签和A标签的文本节点
复制内容到剪贴板
代码:
var Btns=document.createElement("div");
Btns.setAttribute("id","btns");
var btnEnter=document.createElement("a");
btnEnter.setAttribute("id","btnEnter");
btnEnter.setAttribute("href","#1");
var txtEnter=document.createTextNode("确定");
btnEnter.appendChild(txtEnter);
Btns.appendChild(btnEnter);接下来就我就这样一步步的创建和追加。最后将这里的3大块，标题栏，提示内容和底边一起追加到提示框中,然后将shadow和提示框追加到文档中。
复制内容到剪贴板
代码:
document.body.appendChild(shadow);
obj.appendChild(divTitle);
obj.appendChild(Container);
obj.appendChild(msgBottom);
document.body.appendChild(obj);到这里,我们程序基本上算完成了.现在就是稍加修饰下.让我们的提示框定位在shadow层之上,而且最好是在屏幕中央，这些问题CSS就可以搞定了.
[
本帖最后由 yaohaixiao 于 2008-4-5 18:05 编辑 ]
