这是我学习javascript中面向对象特性的一点总结。希望对具有其他语言的面向对象设计经验的朋友理解javascript的OO有所帮助。我具有c++,java和python的面向对象设计的经验。

总的感受， javascript作为一种弱类型的动态语言，语法接近于java，但其面向对象的方式更和python相识。

1 面向对象的特性

类，成员变量，成员函数，类变量，类方法，继承，多态

1） 类

类的定义：function Circle(r) { this.r = r; }

类的实例化： c = Circle(3);

2）成员变量

成员变量在初始化函数里申明：this.r = r;

注意，在对象生成后，你也可以给它附上成员变量，比如c.name="my circle"，

但是除非特别的需要，我强烈建议你不要这样做。也就是所有的成员都应在初始化函数里声明。我认为这是一种好的style。

这一点和python很相识。

3）成员函数

成员函数的标准形式是这样的：

Cricle.prototype.area = function() { return 3.14 * this.r * this.r; }

这和java或python或c++都大不一样。但为了帮助理解，你可以把prototype看作基类。

prototype里面的变量或方法，是所有对象共享的。

比如，c.area()调用最终就会让解释器调用到Circle.prototype.area().

相比于java和c++，javascript具有他们都没有的一个语义，也就是你可以在prototype里定义变量。定义在prototype里的变量可以被所有的实例共享量。所以一般它应该是一个常数，比如：Circle.prototype.PI = 3.14.

显然，prototype里的变量和方法都应该是不变的。每一个对象实例都不应该取修改prototype中的内容。虽然语言允许你可以这样做，但这样做没有任何意义，也违反了面向对象的语义（想想，java会让你动态修改一个类的方法吗）。

当然，对于多态是另外一回事，在后面详述。

而且，我建议所有的成员函数都在紧接类定义的地方定义。而不应该在代码运行的某个地方对一个对象实例增加/修改成员函数。这样的结果是javascript的类定义尽量向java看齐。使得代码更清晰。

4）类变量

类变量是属于一个类的变量。就像java里用static修饰的变量。因为它属于类，所以它也应该是一个常量。实例不应该去修改它，虽然你可以（java里可以用final修饰，使得类变量一旦定义，就不能修改）。这里可以看到，类变量和prototype里定义的变量的功能是相似的。确实如此，他们的目的都是一样的。但他们的访问方式

不一样。比如：

Circle.prototype.PI = 3.14;

Circle.PI = 3.14;

//用prototype里的变量

Circle.prototype.area1 = function() { return this.PI * this.r * this.r; }

//用类变量

Circle.prototype.area2 = function() { return Circle.PI * this.r * this.r; }

5）类方法

这个概念应该很简单。注意类方法里绝对不要用this关键字，和java完全一样。

Circle.max = function(a, b) {
    return a.r > b.r ? a : b;
}

theMax = Circle(new Circle(1), new Circle(4));

6）继承

子类继承父类，那么 “子类实例” 具有和 “父类实例” 完全一样的行为。javascript是这样实现的。

function SubCircle(x, y, r) {
  this.x = x;
  this.y = y;
  this.r =r;
}

SubCircle.prototype = new Circle(0);
记得前面说的吗？可以把prototype看作一个基类。这里，prototype确确实实是一个基类。它是如何实现的呢？

举例如下：
sc = SubCirlce(1,1,3);
sc.area();

调用的传递：
sc.area()->sc.prototype.area()->Circle(0).area()->Circle.prototype.area().
看来是不是很奇妙呢。

通过这种方式，javascript实现了继承。

7）多态

多态是子类会定义和父类具有相同signature的方法。假设在SubCircle所在的空间PI=100,而面积公式也变为 PI*R*R*R。

SubCircle.prototype.PI = 100

SubCircle.prototype.area = function() {
   return this.PI*this.r*this.r*this.r;
}
Sc.area()

这样的操作可以认为是:

Sc.PI->sc.prototype.PI->Cricle(0).PI = 100

Sc.area()->sc.prototype.area()->Circle(0).area.
这个时候，调用过程是这样的

sc.area()->sc.prototype.area(),在这里解释器发现了area这个方法，于是它就调用此方法。

而Cricle.prototype.area就永远也不会被调用。PI的调用也是如此。那么子类如何想调用父类的方法应怎么办呢？好像没有什么办法哦，谁知道可以告诉我。但面向对象的理论告诉我们，继承主要是提供接口而不是代码复用，所以还是少有这样的念头为好 ：）。

下面是一个例子程序。包含上面的所有的概念。
例子
///////////define: Cricle//////////////////
function Circle(r) {
this.r = r;
}
Circle.PI = 3.14;
Circle.prototype.PI = 3.14;
Circle.prototype.area = function() { return Circle.PI*this.r*this.r; }
Circle.prototype.area2 = function() { return this.PI*this.r*this.r; }

//// test
c = new Circle(3);
//alert("area1 :"+c.area());
//alert("area2 :"+c.area2());

Circle.max = function(a, b) { return a.r>b.r ? a.r : b.r; }
//alert("max is "+Circle.max(new Circle(1), new Circle(3)));

c1 = new Circle(1);
c2 = new Circle(1);
c2.PI = 100;//Circle.prototype.PI=100;

//alert("c1.area1 "+c1.area());
//alert("c1.area2 "+c1.area2());
//alert("c2.area1 "+c2.area());
//alert("c2.area2 "+c2.area2());

////////////////////////define: SubCircle //////////////////
function SubCircle(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
}
SubCircle.prototype = new Circle(0);
SubCircle.prototype.PI = 100;
SubCircle.prototype.move2 = function(x, y) { this.x = x; this.y = y;}
SubCircle.prototype.area = function() { return this.PI*this.r*this.r*this.r; }

//// test
sc = new SubCircle(0,0,2);

alert(sc.area());

from: http://www.klstudio.com/post/52.html

这是一个网友在论坛上问的一个问题。大体上在javascript中用xmlhttp读取一个xml文件：

xml文件内容如下：

假设其网络地址为： /rss/listings.xml

则，针对网友的这个需求：

写的代码如下：

　　1、Client - helloworld.htm

(4)如果是通过"a.jsp?param=中文"传递参数,则需要:
     a.在传参数之前先把参数进行转码:java.net.URLEncoder.encode(param);
       取值用java.net.URLDncoder.decode(param);再转回中文
     b.在你的Tomcat目录-->conf目录-->server.xml里找出这段:
       <Connector
         port="8080"               maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
               enableLookups="false" redirectPort="8443" acceptCount="100"
               debug="0" connectionTimeout="20000"
               disableUploadTimeout="true" <!--在里边加上这个参数-->URIEncoding="gb2312"/>

from: http://www.yuanma.org/data/2006/0911/article_1503.htm

用XMLHTTP Post/Get HTML页面时的中文乱码问题之完全Script解决方案

关键词：VBScript, ASP, JavaScript, Java, XML

以前我曾经贴过一篇用XMLHTTP Post Form 的帖子，那里的代码中我Post E文的Value毫无问题，但是后来发现Post含有中文的表单时会出现乱码，原因当然是UTF-8 和GB2312 之间的转换问题了！TNND，打倒GB2312！大家都用UTF8多好。

用XMLHTTP Post Form时的表单乱码有两方面的原因??Post表单数据时中文乱码；服务器Response被XMLHTTP不正确编码引起的乱码。换句话说，本文主要解决两个问题??怎样正确Post中文内容&怎样正确显示得到的中文内容。

Part I Post中文内容

先看看E文的表单是怎么提交的：//from www.w3sky.com

<SCRIPT language="JavaScript">
strA = "submit1=Submit&text1=scsdfsd";
var oReq = new ActiveXObject("MSXML2.XMLHTTP");
oReq.open("POST","http://ServerName/VDir/TstResult.asp",false);
oReq.setRequestHeader("Content-Length",strA.length); 
oReq.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
oReq.send(strA);
</ScRIPT>

如果把strA = "submit1=Submit&text1=scsdfsd";换成：
strA = "submit1=Submit&text1=中文";

你会发现提交上去的东东根本不对，ASP中Request.Form("Text1"）根本取不到值。俺用Request.BinaryRead把一个HTML Form中的Post内容写出来看了看，才发现问题??Form提交时也要编码的，编码后的中文是类似于%??%??的转义字符，比如“中文”就被编码为：%D6%D0%CE%C4。呵呵，也怪俺笨，人家CONTENT-TYPE里明明写的清清楚楚??application/x-www-form-urlencoded，urlencoded嘛当然就是这个样子了。既然这样,那我们也知道该怎么办了??自己做转换，代码见下：

<SCRIPT language="VBScript">
Function URLEncoding(vstrIn)
    strReturn = ""
    For i = 1 To Len(vstrIn)
        ThisChr = Mid(vStrIn,i,1)
        If Abs(Asc(ThisChr)) < &HFF Then
            strReturn = strReturn & ThisChr
        Else
            innerCode = Asc(ThisChr)
            If innerCode < 0 Then
                innerCode = innerCode + &H10000
            End If
            Hight8 = (innerCode  And &HFF00) &HFF
            Low8 = innerCode And &HFF
            strReturn = strReturn & "%" & Hex(Hight8) &  "%" & Hex(Low8)
        End If
    Next
    URLEncoding = strReturn
End Function

strA = URLEncoding("submit1=Submit&text1=中文")
oReq = CreateObject("MSXML2.XMLHTTP")
oReq.open "POST","http://ServerName/VDir/TstResult.asp",false
oReq.setRequestHeader "Content-Length",Len(strA)
oReq.setRequestHeader "CONTENT-TYPE","application/x-www-form-urlencoded"
oReq.send strA
</ScRIPT>

（在这里俺把前面的JavaScript的代码改成了VBScript，不是吃饱了撑的没事干，原因见后）

Part II.正确显示得到的中文内容

OK，如果你在Server端把Form的内容写到数据库/文件的话，你在那里看到的中文毫无问题，但是，假如你想看看Server的Response??问题来了：如果Response的结果不是XML，XMLHTTP.responseXML里当然是不会有东东的，那就用responseText好了，在代码的最后加一句：

alert(oReq.responseText)
看看俺们辛勤劳动的结果  :P

但是但是.....怎么所有的中文全变成了方格? （我打不出来，有兴趣自己去试，也不用Post，Get一个含有中文的网页就可以发现了。）

原因很简单：XMLHTTP得到Response时假定Response是UTF8编码的，如果Response是XML，那还可以通过encoding来指定编码，但HTML就不行了。（见鬼的GB2312，再次打倒！）所以它把含GB2312编码的HTML当成UTF8格式，不出错才有鬼！

不过好在还有补救的办法：XMLHTTP的responseBody 属性里包含的可是未解码的Resonse??"a raw undecoded bytes as received directly from the server" ：），唯一的问题是，responseBody返回的是一个unsigned bytes数组，我们怎么去访问它，怎么把它转换成BSTR？

这就是为什么我在上面把代码改成VBScript的原因??VBScript Can do it,but JavaScript Cannot!

代码见下：
<SCRIPT language="VBScript">
Function URLEncoding(vstrIn)
    strReturn = ""
    For i = 1 To Len(vstrIn)
        ThisChr = Mid(vStrIn,i,1)
        If Abs(Asc(ThisChr)) < &HFF Then
            strReturn = strReturn & ThisChr
        Else
            innerCode = Asc(ThisChr)
            If innerCode < 0 Then
                innerCode = innerCode + &H10000
            End If
            Hight8 = (innerCode  And &HFF00) &HFF
            Low8 = innerCode And &HFF
            strReturn = strReturn & "%" & Hex(Hight8) &  "%" & Hex(Low8)
        End If
    Next
    URLEncoding = strReturn
End Function

Function bytes2BSTR(vIn)
    strReturn = ""
    For i = 1 To LenB(vIn)
        ThisCharCode = AscB(MidB(vIn,i,1))
        If ThisCharCode < &H80 Then
            strReturn = strReturn & Chr(ThisCharCode)
        Else
            NextCharCode = AscB(MidB(vIn,i+1,1))
            strReturn = strReturn & Chr(CLng(ThisCharCode) * &H100 + CInt(NextCharCode))
            i = i + 1
        End If
    Next
    bytes2BSTR = strReturn
End Function

strA = URLEncoding("submit1=Submit&text1=中文")
oReq = CreateObject("MSXML2.XMLHTTP")
oReq.open "POST","http://ServerName/VDir/TstResult.asp",false
oReq.setRequestHeader "Content-Length",Len(strA)
oReq.setRequestHeader "CONTENT-TYPE","application/x-www-form-urlencoded"
oReq.send strA
alert bytes2BSTR(oReq.responseBody)
</ScRIPT>

嘿嘿，是不是很简单啊，用这个再试试看？一切OK！

（顺便说说byte()，这个东东在VBScript里的表现只能用妖来形容??对它调用VarType 返回8209??vbArray + vbByte,用LBound、UBound能拿到数组的上界下界，但是就是不能用name(i)的形式访问，搞得我以为在Script里根本没法处理这种类型，在bytes2BSTR函数里可以看到我是把它当成String来处理的??LenB/MidB什么的，发现这点纯属意外??我开始往这个函数里传的是XMLHTTP.responseText，想一个Byte一个Byte地看看里面到底有点什么，后来一时性起把responseText改成responseBody，结果就中奖了，哈哈）

最后的废话：//from www.w3sky.com
1、以上代码在MSXML Parser 3 Release＋VBScript 5.5环境下通过。那位兄弟有早一点版本的Script可以帮我试试看能不能成。
2、一直以为JavaScript vs VBScript应该是JavaScript略好，所以有时候想彻底抛弃VBScript，ASP Server/Client统统用JavaScript，看来未必是个好主意。

from: http://www.w3sky.com/2/2402.html

IE对于跨域访问的处理是，弹出警告框，提醒用户。如果用户将该网站纳入可信任网站，或者调低安全级别，那么这个问题IE就不会在提醒你。

FireFox等其它非微软的浏览器遇到跨域访问，则解决方案统一是拒绝访问。

有人说，IE是主流浏览器，只要它能正常使用就好了。此言差已，IE虽然能够处理，但是是有前提的，要么用户不厌其烦地在页面弹出警告框之后点击是（点击否就不执行该Ajax调用了），要么用户将该网站纳入可信任站点。这两种做法，在企业管理系统的应用中倒是比较常见，因为系统管理员可以以行政手段保证用户的行为。但是对于互联网上的网站或者门户开发，这种做法则不行。

最近遇到了这个问题，需要在跨域访问结束之后完成使主窗口出现一些特效，搜索了一些资料，通过不断尝试以及在不同浏览器中进行兼容性测试，找到了几个可行的方案：

1、Web代理的方式。即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面，由该页面代替用户页面完成交互，从而返回合适的结果。此方案可以解决现阶段所能够想到的多数跨域访问问题，但要求A网站提供Web代理的支持，因此A网站与B网站之间必须是紧密协作的，且每次交互过程，A网站的服务器负担增加，且无法代用户保存session状态。

2、on-Demand方式。MYMSN的门户就用的这种方式，不过MYMSN中不涉及跨域访问问题。动态控制script标记的生成，通过修改script标记的src属性完成对跨域页面的调用。此方案存在的缺陷是，script的src属性完成该调用时采取的方式时get方式，如果请求时传递的字符串过大时，可能会无法正常运行。不过此方案非常适合聚合类门户使用。

3、iframe方式。查看过醒来在javaeye上的一篇关于跨域访问的帖子，他提到自己已经用iframe的方式解决了跨域访问问题。数据提交跟获取，采用iframe这种方式的确可以了，但由于父窗口与子窗口之间不能交互（跨域访问的情况下，这种交互被拒绝），因此无法完成对父窗口效果的影响。

4、用户本地转储方式：IE本身依附于windows平台的特性为我们提供了一种基于iframe，利用内存来“绕行”的方案，即两个window之间可以在客户端通过windows剪贴板的方式进行数据传输，只需要在接受数据的一方设置Interval进行轮询，获得结果后清除Interval即可。FF的平台独立性决定了它不支持剪贴板这种方式，而以往版本的FF中存在的插件漏洞又被fixed了，所以FF无法通过内存来完成暗渡陈仓。而由于文件操作FF也没有提供支持（无法通过Cookie跨域完成数据传递），致使这种技巧性的方式只能在IE中使用。

5、我自己用于解决这类问题的方式：结合了前面几种方式，在访问A网站时，先请求B网站完成数据处理，再根据返回的标识来获得所需的结果。这种方法的缺点也很明显，B网站的负载增大了。优点，对session也实现了保持，同时A网站与B网站页面间的交互能力增强了。最重要的一点，这种方案满足了我的全部需要。

总结一下，以上方案中可选择的情况下，我最推荐on-Demand方式，在不需要提交大量数据的情况下，这种方式能够解决您的大部分问题。

from: http://blog.csdn.net/macroway/archive/2006/05/14/728090.aspx

June 20, 2005

Initially, I had planned on using the XmlHTTPRequest object to create a client-side application that integrated various web services like Google suggest, del.icio.us, Flickr, Yahoo developer network, etc. Unfortunately, the browser security restrictions severely limit the capabilities of a client-side application, essentially eliminating any cross-domain integration services. However, single-domain services can still be implemented by using the Javascript bootloading technique.

Same-Origin Policy

The most frustrating part of creating any client-side application is the security model that applies to just about all executable objects that can be accessed by the browser. Designed the prevent cross-site scripting attacks (XSS), the same-origin policy effectively prohibits a page served from www.mydomain.org to access any document served from a different domain, via XmlHTTPRequest, IFRAME's, or similar DOM methods. Therefore, a page with a URL of http://www.mydomain.org:80/ cannot access another page that does not share the same protocol, domain, and port.

One exception to this rule is when the document.domain property is set. This exception stipulates that in an FRAME/IFRAME situation, documents served from different subdomains of the same base domain may access each other's DOM tree if both pages set their respective document.domain property to the base domain. For example, if a page blue.domainA.org/master.html contains an IFRAME of the page red.domainA.org/slave.html, then by default the two pages will not be allowed to access each other's DOM tree. However, if both pages contain an explicit Javascript command, document.domain = "domainA.org";, then access to the DOMs will be granted. What is somewhat confusing is that all pages have a valid document.domain property that is set, but is considered null by the security model until it is set explicitly. Unfortunately, XmlHTTPRequest objects are not affected by the document.domain property. XmlHTTPRequest will only fetch documents from the originating server. In fact, you have to specify a relative URL, since it completely ignores any URL's with a fully-qualified domain name.

None of these security policies apply when executing a web page served from localhost. You can use IFRAME's and XmlHTTPRequest objects to access any valid URL to your heart's content.

Using the Javascript Bootloader

You can execute arbitrary Javascript code in the security context of any web page by simply typing a javascript command into the browser's address bar:

javascript:void(document.body.style.backgroundColor='#c00')

That command can also be bookmarked by either editing a bookmark property directly or using the drag-and-drop method, thus creating a Javascript bookmarklet. As anyone who has had the displeasure of implementing third-party banner ads knows, a web page may contain a <script> reference to any valid URL, i.e. <script src="http://shoddy.advertiser.net"></script>. The Javascript bootloader uses this capability to inject foreign code — not by writing out a <script> string, but by way of DOM node creation:

				
						// Create a new script node
				
var element = document.createElement('script');

// set the 'src' attribute of the element
element.setAttribute('src', 'http://johnvey.com/features/deliciousdirector/dboot.js');

// insert the new node into the current document
document.body.appendChild(element);

Once the new script node is inserted, the browser will automatically process the attached code. The complete javascript bookmarklet is as follows:

javascript:void((function() {var%20element=document.createElement('script'); element.setAttribute('src', 'http://johnvey.com/features/deliciousdirector/dboot.js'); document.body.appendChild(element)})())

This method eliminates the need to include large blocks of Javascript code inside a bookmark (compare with the Javascript shell), and allows central control of the core Javascript code.

Resetting the Page

Once the foreign code is loaded, you may want to clear the content from the page in order to start from a clean slate:

				
						// clear the body content
				
document.body.innerHTML = "";

// remove all the existing stylesheets
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
	if(a.getAttribute("rel").indexOf("style") != -1) {
		a.disabled = true;
	}
}

// fill in new body content
document.body.innerHTML = "Hello, World!";

// create a new stylesheet link
var ns = document.createElement("link");
ns.rel = "stylesheet";
ns.type = "text/css";
ns.href = "http://johnvey.com/features/deliciousdirector/d.css";
document.body.appendChild(ns);

// create a new script node for the main program logic
var js = document.createElement("script");
js.language = "javascript";
js.src = "http://johnvey.com/features/deliciousdirector/d.js";
document.body.appendChild(js);

// update the page title
document.title += " (Direc.tor)";



from: http://johnvey.com/features/deliciousdirector/web-service-broker.html

  唯一的解决方案是把需要处理的文件上传到服务器，然后返回到客户端，然后由脚本语言处理。

　　2.对于innerHTML而言，它不是字符串，用字符串的加法是没有办法使之成为xml字符流。

　　处理的办法：1）可以把innerText=innerHTML,然后用innerText来得到该字符流，但要把innerHTML中的“（在提取innerHTML,他也会把‘变成“）改为‘才可以！

 例： var XMLStr=new String(XMLFileInfo.innerHTML);
   XMLStr=XMLFileInfo.innerText;
   XMLFileInfo.innerText="";
   alert(XMLStr);
   XMLStr=""+XMLStr+"";
   XMLStr = XMLStr.replace(/\"/g, "'");

   用var str=new String(div.innerHTML)也可以得到。

　　3.对于一般的标记，像<span><input>等，通常可以直接用id来标示，然后用idName.attribute来获取和操作它的属性。如果用name来标示，则要从document向下追溯来获取和操作他的属性。 而id是不可以重名，否则无法获取

　　相关的属性！而name是可以重名的，通常操作第一个。

   注意：对于id而言，如果在form中，则要加一层formName.idName.attribute才能行得通！

　　4.在通过javascript来实现对某些表单的验证。（不要用onclick,它没有起到检验作用）

  例：

  在页面中：<form method="post" action="http://entry.126.com/cgi/login" name="form" onSubmit="return fCheck()">
    <input name="domain" type="hidden" value="126.com" />
    <input name="code" type="hidden" value="0" />
      </form>

  在.js文件中：

  function fCheck(){
 if( fm.user.value ==""|| fm.code.value=="") {
  window.alert("\请输入您的用户名 ?");
  fm.user.focus();
  return false;
 }
 else
          return true;
}

　　5.对于利用javascript用到参数传递时，要注意：

　　1）对于在html文档中对函数的调用，用"fanctionname('canshu')"这样的格式。不同于一般的语言传参数。

　　2）对于函数的声明，是不能代参数类型，直接声明变量：function functionname(canshu)即可。

　　这些就是因为它是弱语言，不同于通常的编程语言。

　　6.对于<a> <div> <span>等都支持事件和它们样式参数的应用。

例：<script language="javascript">
function selected(i){
Research.ResearchClass.value=i;
if(i==1){
book.style.color="red";
book.style.background="blue";
}
else
{
  book.style.color="black";
  book.style.background="#CCFFFF";
}
if(i==2){
magazine.style.color="red";
magazine.style.background="blue";
}
else
{
  magazine.style.color="black";
  magazine.style.background="#CCFFFF";
}
 if(i==3){
  others.style.color="red"
  others.style.background="blue";
  }
  else
{
  others.style.color="black";
  others.style.background="#CCFFFF";
}
}
</script>
。。。。。

            <td width="75" valign="top" bgcolor="#CCFFFF"> <div align="center" id="book"><strong><font size="4"><a  onclick="selected('1')"><u>图书</u></a></font></strong></div></td>
            <td width="5" valign="top" bgcolor="#FF0000"><!--DWLayoutEmptyCell-->&nbsp;</td>
            <td width="69" valign="top" bgcolor="blue" color="red"> <div align="center" id="magazine"   ><strong><font size="4"><a  onclick="selected('2')"><u>期刊</u></a></font></strong></div></td>
            <td width="5" valign="top" bgcolor="#FF0000"><!--DWLayoutEmptyCell-->&nbsp;</td>
            <td width="71" valign="top" bgcolor="#CCFFFF"> <div align="center" id="others"><font size="4"><strong><a  onclick="selected('3')"><u>其他</u></a></strong></font></div></td>

from: http://www.5217.cn/Article/jzjc/wzjss/htmljs/200603/1403.html

注意我们创建各元素和文字节点的顺序：

1.创建< table >元素
2.创建< table >的子元素< tbody >
3.使用一个循环来创建< tbody >的子元素< tr >
4.分别使用循环为每一个< tr >创建子元素< tb >
5.为每一个< tb >创建文本节点

　　创建完< table >,< tbody >,< tr >,< td >元素和文本节点，我们使用相反的顺序把它们分别添加到自己的父节点。
1.将创建的文本节点添加到< td >里

2.将列< td >添加到行< tr >

3.将行< tr >添加到< tbody >

4.将< tbody >添加到< table >

5.将< table >添加到< body >

记住这个方法。当你使用W3C DOM时会经常用到它。首先，你从上向下建立元素；然后从下向上把它们添加到父节点。
这是JavaScript代码生成的HTML：

这是代码生成的表格元素和它的子元素的DOM对象树：

　　你只需使用少量的DOM方法就可以构造这样一个表格和他的子元素。记住要时刻谨记你将创建的构造的模型树；这样会使编写代码更加简单。在图中的< table >树里，< table >有一个子元素< tbody >。< tbody >有两个子元素。< tbody >的每个子元素（< tr >）都有两个子元素< td >。最后，每个< td >有一个子元素：一个文本节点。　　

在这个例子里，我们设置myP变量为表示body里第二个p元素的DOM对象。
1.获取一个包含所有body元素的列表

因为一个有效的html文档只有一个body元素，这个列表讲只有一项。我们通过使用 [0] 选取列表的第一个元素来得到它。
2.获取blog子元素里所有的p元素

3.选取p元素列表的第二项

一旦获得一个html元素的DOM对象，你就可以设置它的属性。比如，你想设置style background color属性，只需要添加：

使用document.createTextNode(”..”)创建文本节点
使用文档对象调用createTextNode方法建立你的文本节点。你只需要输入文本内容。返回值是一个表示这个文本节点的对象。

以上代码创建一个文本数据是“word”的TEXT_NODE类型（文字块）节点，变量myTextNode指向这个节点对象。你需要设置这个文本节点为其他节点元素的字节点来插入这个文本到你的html页面里。
使用appendChild(..)插入元素
所以，通过调用myP.appendChild([node_element])，你设置这个文本节点为第二个p元素的字节点。

测试这个例子，注意“hello”和“world”两个词是连在一起的：“helloworld”。所以在当你看到html页面时两个文本节点hello和world看起来好像是一个节点，而实际上在这个文档模型里有两个节点。第二个节点是一个新的TEXT_NODE类型节点，并且是第二个p标签的第二个字节点。下图在文档树里显示了刚创建的文本节点。

createTextNode和appendChild是在hello和world之间添加空格的一种简单的方法。需要特别注意的是appendChild方法将添加在最后一个子节点后面，就像world被添加到hello后面。所以如果你想在hello和world之间添加一个文本节点需要使用insertBefore方法而不是appendChild。

使用文档对象和createElement(..)方法创建新元素
　　你可以使用createElement方法创建新的HTML元素或者其他任何你想要的其他元素。例如，如果你想为< body >元素添加一个字节点< p >元素，可以使用前例中的myBody添加一个新的元素节点。创建一个节点只需要调用document.createElement(”tagname”)。例如：

使用removeChild(..)方法删除节点
　　每个节点都可以删除。下面这行代码删除myP（第二个< p >元素）里包含单词world的文本节点。

　　最后你可以把包含单词world的文本节点myTextNode添加到新创建的< p >元素里：

　　修正的对象树最后像这样：

• 获取body对象（文档对象的第一项）
• 创建所有的元素
• 最后，按照上图的表格结构添加每一个字节点下面的源代码是sample1.html的注释

start函数的最后有一行新代码，使用另一个DOM方法setAttribute设置了表格的border属性。setAttribute方法有两个参数：属性名和属性值。你可以使用setAttribute方法设置任何元素的任何属性。

如果你的对象是文本节点，你可以使用data属性来获取它的内容

获取一个属性值
　　在sample1的最后有一个单元格使用了mytable对象的setAttribute方法。这个单元格用来设置这个表格的border属性。使用getAttribute方法来获取这个属性：

通过改变style属性隐藏列
　　当你使用一个JavaScript变量指向对象，你可以立即设置它的style属性。下面的代码是sample1.html的修改，第二列的单元格都被隐藏，第一列的单元格背景改为红色。注意style属性是直接设置的。