BlogJava-摆渡人，外婆桥！-随笔分类-javascript&DHTML&CSS

IE对select的处理，又一怪现象：innerHTML竟然不起作用。

swingboat — Wed, 12 Sep 2007 02:43:00 GMT

我们用select来选取一个国家，当我辛辛苦苦拼凑字符串，然后把这个字符串赋值给select的innerHTML，运行，在firefox下能显示出所有的国家。但是在IE下却什么都没有显示。刚开始我还以为是我拼凑的字符串有问题，仔细检查没有啊。后台到google上search了下，发现是ie处理select的一个bug。于是做了一个简单的测试。

1<html>
2<head>
3<title>testtitle>
4<script language="javascript">
5function test(){
6    var elem=document.getElementById("testS");
7    elem.innerHTML="aa";
8}
9
10script>
11head>
12<body>
13<input type=button value=test onclick='test()'>
14<div>
15    <select id='testS'>select>
16div>
17body>
18html>

点击test按钮，在IE下，select框没有任何的内容。怪异啊！
于是不得不利用Option对象来增加select的内容。

swingboat 2007-09-12 10:43 发表评论

在IE下，页面只有一个text的时候，回车将自动submit。

swingboat — Tue, 28 Aug 2007 08:47:00 GMT

真是一个很怪的缺省操作啊！

1<html>
2<head>
3<title>testtitle>
4<script language="javascript">
5script>
6head>
7<body>
8<form name="test" method="post" action="test.htm">
9<input type='button' value='test' onclick="javascript:test()">
10<input type="text" name="textfield" class="input">
11form>
12body>
13html>

运行上面的html文件，在text中输入内容，然后回车，这个页面将会自动提交表单。即使我在这个页面中增加file，checkbox，hidden等的控件，这个页面还是会自动提交。这是IE的一个缺省操作。如果想改变这个缺省操作，我们可以再增加一个text，然后隐藏这个text。

If you have a Web Form with just one single-line text input (even if there are additional input fields, like CheckBoxLists, RadioButtonLists, DropDownLists, and so on), hitting enter in the text input will not cause the Button Web control's Click event to fire when using Internet Explorer

swingboat 2007-08-28 16:47 发表评论

设置input的内容居中？

swingboat — Fri, 24 Aug 2007 08:02:00 GMT

让input的内容在纵向居中，首先我使用了vertical-align样式，没有任何的效果。
后来google了一把，发现需要设置line-height样式，设置后运行，果然如此！
.input   {
FONT-SIZE:   12px;
height:100px;
line-height:100px;
}
以下是引用内容（http://topic.csdn.net/t/20050722/20/4162420.html）：
实际上，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。前面那个   span定义了一个60px的高度，但是这个span的Box中存在很多行，那段文本并不能对齐到span的中央。因此希望那段文本对齐span的中行，   需要给它定义一个line-height的属性，让line-height为60px，作用于一行的vertical-align就按你的想法工作了

swingboat 2007-08-24 16:02 发表评论

可恶的“本页不但包含安全的内容，也包含不安全的内容。是否显示不安全的内容”对话框？

swingboat — Wed, 15 Aug 2007 08:15:00 GMT

今天解决了一个困扰我们很久的一个问题（说是很久，但一直没有花时间去research，想想不影响功能使用，没什么啊。而真正解决问题，也就那二十来分钟，哎！人已经懒惰成这样了）。
问题描述：
我们利用ajax做了一套系统，但通过https访问的时候，IE总会弹出下面的对话框：

而在我们的代码中所有的访问都是通过https的，怎么会有不安全的元素呢？在网上google了一下，有人提到可能是iframe的问题。而在我们系统中确实用到了很多的iframe。修改code，去掉所有的iframe。再次run，上面的对话框没有了，终于找到原因了。但是我们的系统中是需要iframe啊？请看下面的code：

1var iframe=document.createElement("iframe");
2        iframe.style.zIndex=-1;
3        iframe.style.position="absolute";
4        iframe.style.left=0;
5        iframe.style.top=0;
6        iframe.style.width=menu.getSize().x-2;
7        iframe.style.height=menu.getSize().y-4;
8        menu.getHtmlElement().appendChild(iframe);

从上面的code，可以看出代码中没有指定src属性，这样IE是没有办法知道这个iframe将引用的是安全内容还是不安全内容呢。所以会弹出上面的对话框。增加src属性，修改code：

var iframe=document.createElement("");//src是个只读属性，不能直接赋值，black.html是个空的静态页面。

再次run，对话框没有了，问题解决。

附录：

在IE下，如果div悬浮在select上面。select会透过div显示出来。这非常影响视觉效果。网上有很多的解决办法，其中一个就是在div中增加iframe。我们就是通过这个方法的，但又产生了这个问题。

swingboat 2007-08-15 16:15 发表评论

HTML的特殊字符

swingboat — Mon, 23 Apr 2007 07:16:00 GMT

学习BPEL，有个有名的开源引擎ActiveBEPL（http://www.active-endpoints.com），于是进入这个站点搜索些资料。在浏览中发现网页上有很多这种字符“ActiveBPEL™”，这个TM的样式非常的怪，是怎么实现的呢？我用firebug查看了下它的代码，也仅仅是“TM”两个字符。我又用IE Inspector查看了，是“? ”。这就更怪了，竟然不一样。后来又在一页的title上发现了这些字符，于是查看了下源代码。“ActiveBPEL™”™是什么，google一下。呵呵，原来是HTML的一个特殊字符而已。写了这么多年的HTML，竟然不知道，惭愧啊！

想表达的意图	处理方式
（回车换行）
（空格符）
&（AND符号）	&
<（左尖括号、小于号）	<
>（右尖括号、大于号）	>
°（度）	°
•（间隔符）	•
´	´
"	"
“	“
”	”
‰	‰
←	←
↑	↑
→	→
↓	↓
↔	↔
√	√
∝	∝
∞	∞
∠	∠
∧	∧
∨	∨
∩	∩
∪	∪
Ø	Ø
∫	∫
∴	∴
≈	≈
¥（RMB）	¥

想表达的意图	处理方式
≠	≠
≡	≡
≤	≤
≥	≥
⊕	⊕
λ	λ
μ	μ
ν	ν
ξ	ξ
ν	ν
ξ	ξ
∏	∏
∑	∑
¥	¥
…	…
¹（一次方符号）	¹
²（平方符号）	²
³（立方符号）	³
n^r（上标情形）	n^r
C_i（下标情形）	C_i
加粗	加粗
斜体	斜体
下划线	下划线
±（加减符号）	±
×（乘法符号）	×
÷（除法符号）	÷
©（版权所有）	©
®（注册商标）	®
™（商标符号）	™
—（破折号）	—

swingboat 2007-04-23 15:16 发表评论

javascript在IE和Firefox中的区别1

swingboat — Wed, 11 Apr 2007 08:33:00 GMT

1.调用appendChild方法增加input对象，设置type属性的位置

1  <html>
2    <head>
3    <title>testtitle>
4    <script language="javascript">
5    function test(){
6        var tbodyElement=document.getElementById("tbody1");
7        var trElement=document.createElement("tr");
8        var idTDElement=document.createElement("td");
9
10        idTDElement.innerHTML=1;
11        var nameTDElement=document.createElement("td");
12
13        var inputElement=document.createElement("input");
14        nameTDElement.appendChild(inputElement);
15        inputElement.type="button";
16        //在IE中，这句话将会抛出异常，但在firefox能正常运行，如果type为text或者不设置type属性，也都能正常运行
17        inputElement.value="Invoke";
18        /*
19        修改成下面的语句就能正常运行：
20        var inputElement=document.createElement("input");
21        inputElement.type="button";
22        nameTDElement.appendChild(inputElement);
23        */
24
25        tbodyElement.appendChild(trElement);
26        trElement.appendChild(idTDElement);
27        trElement.appendChild(nameTDElement);
28    }
29    script>
30    head>
31    <body>
32        <input type="button" value="insert" onclick='test()'>
33        <table cellpadding="0" cellspacing="0" border="1">
34            <tbody id='tbody1'>
35                <tr>
36                    <td width="50">IDtd>
37                    <td width="200">nametd>
38                tr>
39            tbody>
40        table>
41    body>
42  html>

2.appendChild一个radio对象，设置该对象的name属性

1  var nameTDElement=document.createElement("td");
2  var radioElement=document.createElement("input");
3  radioElement.type="radio";
4  nameTDElement.appendChild(inputElement);
5  radioElement.name="testRadioName";  //这句话在firefox是起作用的，但在IE下是不起作用的
6  /*解决的办法是
7  var radioElement=document.createElement("");
8  radioElement.type="radio";
9  nameTDElement.appendChild(inputElement);
10  */

3.对select控件增加和删除Option

1  <html>
2    <head>
3    <title>testtitle>
4    <script language="javascript">
5    function deleteRow(){
6        var selectElement=document.getElementById("select1");
7        selectElement.options.remove(1);  //IE:OK        Firefox:Failure
8        selectElement.remove(1);          //IE:OK        Firefox:OK
9    }
10    function insertRow(){
11        var selectElement=document.getElementById("select1");
12        var option=new Option("eeee",5);
13        selectElement.add(option);        //IE:OK        Firefox:Failure
14        selectElement.options.add(option);//IE:OK        Firefox:OK
15    }
16    script>
17    head>
18    <body>
19    <input type="button" value="Delete" onclick='deleteRow()'>
20    <input type="button" value="Insert" onclick='insertRow()'>
21    <select id="select1">
22        <option  value="1">aaaoption>
23        <option  value="2">bbboption>
24        <option  value="3">cccoption>
25        <option  value="4">dddoption>
26    select>
27    body>
28  html>

swingboat 2007-04-11 16:33 发表评论

利用div进行页面的布局2(position属性)

swingboat — Wed, 11 Apr 2007 07:23:00 GMT

一、请看下面的HTML代码

1<HTML>
2<HEAD>
3<TITLE>Position TITLE>
4HEAD>
5<BODY>
6<table border=1>
7    <tr>
8        <td >
9            <textarea id="textareaInput" style="font-family: Tahoma; font-size: 11px;" cols="35" rows="3"/>textarea>
10        td>
11        <td width='300' align='right' >
12            <DIV id=senddiv  style="WIDTH: 70px; HEIGHT: 41px;">
13                <IMG id=btnSendOut style="WIDTH: 70px; POSITION: absolute; HEIGHT: 41px" src="windows_button_bg.gif">
14                <div id=divSendOut style="WIDTH: 70px; POSITION: absolute; HEIGHT: 41px;line-height:41px" align='center' >Senddiv>
15            DIV>
16        td>
17    tr>
18table>
19div>
20BODY>
21HTML>

二、运行的结果

三、问题
     为什么img(id为btnSendOut)和文字div(id为divSendOut)出现在table外了呢？
四、原因
    img和文字div都用的绝对(position:absolute)位置,但都没有设置left和top属性，这样会根据当前的HTML位置来确定left和top属性。上级容器是个div(id为senddiv)中，此div延续上级td的align属性，这样当前位置应在div的右边。于是img和文字div从div（id为senddiv)的右边开始显示，由于都是绝对的，脱离HTML的显示，所以都会超出table外。
五、解决方案
      找到了原因，解决起来就容易了。我们只需要把div(id为senddiv)的align属性设置为left就可以了。因为img，div(id为divSendOut)，div(id为senddiv)的大小都是一样的。

六、另外的问题(层的居中问题)
对于把字符串"Send"居中在div(id为divSendOut)中间，我们可以设置div的line-height属性(注意该属性的单位)和height属性一样就可以了。但是如果需要居中的不是文字，而且其它的对象，例如另一个div，则就需要利用脚本来控制了。

swingboat 2007-04-11 15:23 发表评论

利用div进行页面的布局1(float＆clear属性)

swingboat — Sun, 25 Mar 2007 08:22:00 GMT

请看下面的代码：

1 < html >
2 < head >
3 < script language ="javascript" >
4 script >
5 < style type ="text/css" >
6 style >
7 head >
8 < body >
9 < div style ="position:absolute;top:100px;left:100px;width:300;height:300;background-color:#99FF00" >
10 < div style ="float:left;width:100;height:100;background-color:red" > div >
11 < div style ="clear:right;height:100;background-color:blue;" > div >
12 div >
13 body >
14 html >

float : none | left |right

参数：

none : 　对象不浮动
left : 　对象浮在左边
right : 　对象浮在右边

说明：
该属性的值指出了对象是否及如何浮动。
当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。
对应的脚本特性为styleFloat。

clear : none | left |right | both

参数：

none : 　允许两边都可以有浮动对象
both : 　不允许有浮动对象
left : 　不允许左边有浮动对象
right : 　不允许右边有浮动对象

说明：

该属性的值指出了不允许有浮动对象的边。
对应的脚本特性为clear。

swingboat 2007-03-25 16:22 发表评论

javascript转换日期字符串为Date对象

swingboat — Wed, 28 Feb 2007 02:21:00 GMT

把一个日期字符串如“2007-2-28 10：18：30”转换为Date对象：
1：

1var   strArray=str.split("   ");
2var   strDate=strArray[0].split("-");
3var   strTime=strArray[1].split(":");
4var   a=new   Date(strDate[0],(strDate[1]-parseInt(1)),strDate[2],strTime[0],strTime[1],strTime[2])

2：

1var s = "2005-12-15 09:41:30";
2var d = new Date(Date.parse(s.replace(/-/g, "/")));
3

第二种方法真是简单啊！

swingboat 2007-02-28 10:21 发表评论

Table中table-layout:fixed样式的作用。

swingboat — Tue, 19 Dec 2006 05:44:00 GMT

请看下面的html

<html>
    <body>
        <TABLE cellSpacing="0" cellPadding="0" width="100%" border="1" >
            <TBODY>
                <TR height="30">
                    <TD style="WIDTH: 12px">TD>
                    <TD class="BigCaption" style="WIDTH: 150px">Web Domain : <SPAN class="WarningDescription">*SPAN>
                    TD>
                    <TD>
                        <SELECT id="DWT189WebDomain"/>
                    TD>
                TR>
                <TR>
                    <TD>TD>
                    <TD vAlign="top" colSpan="2">
                        asfdassdgsdgfsdgfsdgfsdfffffffffffffffffffffffffffffffffffffffffffffsdgfsdfgsdgsdgfsdgfsdgsdg
                    TD>
                TR>
            TBODY>
        TABLE>
    body>
html>

显示这个页面，含有Web Domain的TD的实际长度绝对大于150px的。因为受第二行的colSpan的属性影响了

<html>
    <body>
        <TABLE cellSpacing="0" cellPadding="0" width="100%" border="1" style="table-layout:fixed" >
            <TBODY>
                <TR height="30">
                    <TD style="WIDTH: 12px">TD>
                    <TD class="BigCaption" style="WIDTH: 150px">Web Domain : <SPAN class="WarningDescription">*SPAN>
                    TD>
                    <TD>
                        <SELECT id="DWT189WebDomain"/>
                    TD>
                TR>
                <TR>
                    <TD>TD>
                    <TD vAlign="top" colSpan="2">
                        asfdassdgsdgfsdgfsdgfsdfffffffffffffffffffffffffffffffffffffffffffffsdgfsdfgsdgsdgfsdgfsdgs
                    TD>
                TR>
            TBODY>
        TABLE>
    body>
html>

这才是我要的效果！呵呵！

swingboat 2006-12-19 13:44 发表评论

网站图标

swingboat — Mon, 28 Aug 2006 07:48:00 GMT

找了很久，偶然间知道了，唉！
http://www.ibm.com/favicon.ico"/>

swingboat 2006-08-28 15:48 发表评论

javascript对象使用总结(1)

swingboat — Mon, 13 Mar 2006 09:32:00 GMT

1.javascript类的定义
function Person(name,age,sex){
var self=this;
this.name=name;
this.age=age;
this.sex=sex;

toString=function(){
  alert(self.name);
}

this.getName=function(){
  return this.name;
}
}

使用:
var person=new Person("yhp",28,1);
person.getName();//可以访问getName函数
person.toString();//不可以访问toString函数

利用prototype.js也可以这么定义
var Person=Class.create();
必须定义Person的构造函数:
Person.prototype.initialize=function(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
}

2.在上面的Person类中,toString函数是不能直接访问this.name的.
解决方法:可以定义变量self,把this赋值给它,在toString中利用self来访问this.name.
var self=this;
toString(){
alert(self.name);
}
应用:定义一个类,有个成员变量number,在构造函数中传入一个容器,在容器中创建一个div,div中绑定onclick,在onclick中访问number
var Module=function(container){
var self=this;
this.container=container;
this.build=function(){
  this.number=Math.random();
  var div=document.createElement("div");
  div.innerHTML="module";
  div.style.cursor="pointer";
  div.onclick=function(){
   alert(self.number);//在此处是不能访问this.number的.
  }
  this.container.appendChild(div);
  test();
}
}

3.对于下面代码:
while(count>=0){
    var div=document.createElement("div");
div.className="number";
div.innerHTML=count+1;
div.style.cursor="pointer";
div.onclick=function(e){
  alert(count);
}
}

当触发div的onclick的时候,每次alert显示都是-1;也就是最后count的值.但需要每次alert的都是innerHTML中值.
获取innerHTML的方法:
     对于事件,获取触发该事件的对象:
     IE     : window.Event.srcElement
     Firefox:e.target   //e是函数传入的事件参数
获取触发事件的对象的InnerHTML:
getClickPageNumber=function(e){
return Try.these(
    function() {return window.event.srcElement.innerHTML},
    function() {return e.target.innerHTML}
) ;
}
修改onclick:
div.onclick=function(e){
alert(getClickPageNumber(e));
}

4.清除html的table中tbody中的内容.

  a
  b


代码:
$("tBody").innerHTML="";
上面的代码在IE中是没有效果的.
修改:
while (tBody.rows.length > 0) {
tBody.deleteRow(0);
}

swingboat 2006-03-13 17:32 发表评论

javascript中event详解

swingboat — Thu, 23 Feb 2006 01:54:00 GMT

event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。
event对象只在事件发生的过程中才有效。
event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。
例子

下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下，就取消链接的跳转。
code
Cancels Links

下面的例子在状态栏上显示鼠标的当前位置。
code

属性：

altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX,
screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y

1.altKey
描述：
检查alt键的状态。

语法：
event.altKey

可能的值：
当alt键按下时，值为 TRUE ，否则为 FALSE 。只读。

2.button
描述：
检查按下的鼠标键。

语法：
event.button

可能的值：
0 没按键
1 按左键
2 按右键
3 按左右键
4 按中间键
5 按左键和中间键
6 按右键和中间键
7 按所有的键

这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件，不管鼠标状态如何，都返回 0（比如onclick）。

3.cancelBubble
描述：
检测是否接受上层元素的事件的控制。

语法：
event.cancelBubble[ = cancelBubble]

可能的值：
这是一个可读写的布尔值:

TRUE 不被上层原素的事件控制。
FALSE 允许被上层元素的事件控制。这是默认值。

例子：
下面的代码片断演示了当在图片上点击（onclick）时，如果同时shift键也被按下，就取消上层元素（body）上的事件onclick所引发的showSrc()函数。

code

4.clientX
描述：
返回鼠标在窗口客户区域中的X坐标。

语法：
event.clientX

注释：
这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。

5.clientY
描述：
返回鼠标在窗口客户区域中的Y坐标。

语法：
event.clientY

注释：
这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。

6.ctrlKey
描述：
检查ctrl键的状态。

语法：
event.ctrlKey

可能的值：
当ctrl键按下时，值为 TRUE ，否则为 FALSE 。只读。

7.fromElement
描述：
检测 onmouseover 和 onmouseout 事件发生时，鼠标所离开的元素。参考：18.toElement

语法：
event.fromElement

注释：
这是个只读属性。

8.keyCode
描述：
检测键盘事件相对应的内码。
这个属性用于 onkeydown, onkeyup, 和 onkeypress 事件。

语法：
event.keyCode[ = keyCode]

可能的值：
这是个可读写的值，可以是任何一个Unicode键盘内码。如果没有引发键盘事件，则该值为 0 。

9.offsetX
描述：
检查相对于触发事件的对象，鼠标位置的水平坐标

语法：
event.offsetX

10.offsetY
描述：
检查相对于触发事件的对象，鼠标位置的垂直坐标

语法：
event.offsetY

11.propertyName
描述：
设置或返回元素的变化了的属性的名称。

语法：
event.propertyName [ = sProperty ]

可能的值：
sProperty 是一个字符串，指定或返回触发事件的元素在事件中变化了的属性的名称。
这个属性是可读写的。无默认值。

注释：
你可以通过使用 onpropertychange 事件，得到 propertyName 的值。

例子：
下面的例子通过使用 onpropertychange 事件，弹出一个对话框，显示 propertyName 的值。

code

The event object property propertyName is
used here to return which property has been
altered.

VALUE="Click to change the VALUE property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
onclick="changeCSSProp()"
VALUE="Click to change the CSS backgroundColor property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>

12.returnValue
描述：
设置或检查从事件中返回的值

语法：
event.returnValue[ = Boolean]

可能的值：
true 事件中的值被返回
false 源对象上事件的默认操作被取消

例子见本文的开头。

13.screenX
描述：
检测鼠标相对于用户屏幕的水平位置

语法：
event.screenX

注释：
这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。

14.screenY
描述：
检测鼠标相对于用户屏幕的垂直位置

语法：
event.screenY

注释：
这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。

15.shiftKey
描述：
检查shift键的状态。

语法：
event.shiftKey

可能的值：
当shift键按下时，值为 TRUE ，否则为 FALSE 。只读。

16.srcElement
描述：
返回触发事件的元素。只读。例子见本文开头。

语法：
event.srcElement

17.srcFilter
描述：
返回触发 onfilterchange 事件的滤镜。只读。

语法：
event.srcFilter

18.toElement
描述：
检测 onmouseover 和 onmouseout 事件发生时，鼠标所进入的元素。参考：7.fromElement

语法：
event.toElement

注释：
这是个只读属性。

例子：下面的代码演示了当鼠标移到按钮上时，弹出一个对话框，显示“mouse arrived”

code
:

19.type
描述：
返回事件名。

语法：
event.type

注释：
返回没有“on”作为前缀的事件名，比如，onclick事件返回的type是click
只读。

20. x
描述：
返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。如果没有css属性中有position属性的上级元素，默认以BODY元素作为参考对象。

语法：
event.x

注释：
如果事件触发后，鼠标移出窗口外，则返回的值为 -1
这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。

21. y
描述：
返回鼠标相对于css属性中有position属性的上级元素的y轴坐标。如果没有css属性中有position属性的上级元素，默认以BODY元素作为参考对象。

语法：
event.y

swingboat 2006-02-23 09:54 发表评论

javascript对XML的解析

swingboat — Tue, 21 Feb 2006 09:13:00 GMT

1.对XMLHttpRequest请求返回的responseXML进行解析,responseXML是个XMLDOcument对象
假设返回的responseXML为:
standalone="yes"?>

checkName
1

则获取method和result值方法为:
var response=req.responseXML.documentElement;
method    =response.getElementsByTagName('method')[0].firstChild.data;
result    = response.getElementsByTagName('result')[0].firstChild.data;

2.创建一个XMLDocument对象
function getXMLDocument() {
    var xDoc = null;
    if (document.implementation && document.implementation.createDocument) {
        xDoc = document.implementation.createDocument("", "", null);
    } else {
        if ((typeof ActiveXObject) != "undefined") {
            var msXmlAx = null;
            try {
                msXmlAx = new ActiveXObject("Msxml2.DOMDocument");
            }
            catch (e) {
                msXmlAx = new ActiveXObject("Msxml.DOMDocument");
            }
            xDoc = msXmlAx;
        }
    }
    if (xDoc == null || typeof xDoc.load == "undefined") {
        xDoc = null;
    }
    return xDoc;
}

3.创建一个DOM树

程序如下:
var doc=getXMLDocument();
var peopleElem = doc.createElement("people");
  var personElem1 = doc.createElement("person");
  personElem1.setAttribute("first-name", "eric");
  personElem1.setAttribute("middle-initial", "h");
  personElem1.setAttribute("last-name", "jung");

  var addressElem1 = doc.createElement("address");
  addressElem1.setAttribute("street", "321 south st");
  addressElem1.setAttribute("city", "denver");
  addressElem1.setAttribute("state", "co");
  addressElem1.setAttribute("country", "usa");
  personElem1.appendChild(addressElem1);

  var personElem2 = doc.createElement("person");
  personElem2.setAttribute("first-name", "jed");
  personElem2.setAttribute("last-name", "brown");

  var addressElem3 = doc.createElement("address");
  addressElem3.setAttribute("street", "321 north st");
  addressElem3.setAttribute("city", "atlanta");
  addressElem3.setAttribute("state", "ga");
  addressElem3.setAttribute("country", "usa");
  personElem2.appendChild(addressElem3);

  var addressElem5 = doc.createElement("address");
  addressElem5.setAttribute("street", "321 south avenue");
  addressElem5.setAttribute("city", "denver");
  addressElem5.setAttribute("state", "co");
  addressElem5.setAttribute("country", "usa");
  personElem2.appendChild(addressElem5);

  peopleElem.appendChild(personElem1);
  peopleElem.appendChild(personElem2);
  doc.appendChild(peopleElem);
  alert(doc.xml);//xml属性只对IE管用

swingboat 2006-02-21 17:13 发表评论

利用html中的div标签实现网页中某一块区域的自动滚动

swingboat — Wed, 28 Dec 2005 01:15:00 GMT

在web页面中，有一块固定大小的区域。在此区域中显示的数据由于条件不同而显示的数据也不同，有的时候显示的数据非常的多，会超出此区域的大小范围，而有的时候很少。所以希望有一种设置，能根据数据的多少，在固定区域中自动产生滚动条。在web页面中div标签就可以满足此要求。
html代码如下：

说明：div的高度为400，而table的高度为300，此种情况不会出现滚动条。div的高度为300，而table的高度为400，此种情况下，在table的旁边就会出现滚动条。主要是利用了div的overflow属性。

swingboat 2005-12-28 09:15 发表评论