使用DOM技术操纵文档

　　我们知道，如果使用DHTML对象模型对文档的内容进行操纵，就必须了解相关文档元素的特殊属性和方法。因为文档的元素有很多种，相应的属性和方法也就非常多，为了实现一个功能，开发人员不得不查询许多资料。但是有了DOM技术，一切变得简单起来，那些操纵文档内容的属性和方法具备了元素无关性（element-independent）特点，这使得我们能够按照相同的步骤操纵文档内容。毋庸置疑，DOM技术为开发人员在对象层次上操纵文档提供了最便捷的手段。 
　　本文就为你全面介绍在JavaScript中如何使用DOM属性和方法操纵文档内容。 
　　使用data、nodeValue和src属性 
　　DOM提供了2个属性用于修改文本节点的内容，它们是data和nodeVaule。2个属性实现的功能相同，语法是：object.data="new value"或者object.nodeVaule="new value"，其中object代表页面中的文本项节点。如果修改图形文件的内容，语法是：object.src="new value"，其中object表示页面中的img标记节点。来看看下面的例子： 

   
   
   
   

    
    
    
    
    <
    
    
    
    html
    
    
    
    >
    
    
    
    

    
    
    
    <
    
    
    
    head
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    title
    
    
    
    >
    
    
    
    DOM Demo 
    
    
    
    
    
    
    
    title
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    head
    
    
    
    >
    
    
    
    

    
    
    
    <
    
    
    
    body 
    
    
    
    id
    
    
    
    ="bodyNode"
    
    
    
    >
    
    
    
    
    This is the document body
    
    
    
    
    <
    
    
    
    p 
    
    
    
    id
    
    
    
    ="p1Node"
    
    
    
    >
    
    
    
    
        This is paragraph 1.
    
    
    
    
    
    
    
    p
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    p 
    
    
    
    id
    
    
    
    ="p2Node"
    
    
    
    >
    
    
    
    
        This is paragraph 2.
    
    
    
    
    
    
    
    p
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    p 
    
    
    
    id
    
    
    
    ="p3Node"
    
    
    
    >
    
    
    
    
        This is paragraph 3.
        
    
    
    
    <
    
    
    
    img 
    
    
    
    id
    
    
    
    ="imgNode"
    
    
    
     src
    
    
    
    ="myexam.gif"
    
    
    
    >
    
    
    
    This text follows the image
        
    
    
    
    <
    
    
    
    table 
    
    
    
    id
    
    
    
    ="tableNode"
    
    
    
    >
    
    
    
    
            
    
    
    
    <
    
    
    
    tr
    
    
    
    >
    
    
    
    
                
    
    
    
    <
    
    
    
    td 
    
    
    
    bgcolor
    
    
    
    ="yellow"
    
    
    
    >
    
    
    
    
                    This is row 1, cell 1
                
    
    
    
    
    
    
    
    td
    
    
    
    >
    
    
    
    
                
    
    
    
    <
    
    
    
    td 
    
    
    
    bgcolor
    
    
    
    ="orange"
    
    
    
    >
    
    
    
    
                    This is row 1, cell 2
                
    
    
    
    
    
    
    
    td
    
    
    
    >
    
    
    
    
            
    
    
    
    
    
    
    
    tr
    
    
    
    >
    
    
    
    
            
    
    
    
    <
    
    
    
    tr
    
    
    
    >
    
    
    
    
                
    
    
    
    <
    
    
    
    td 
    
    
    
    bgcolor
    
    
    
    ="red"
    
    
    
    >
    
    
    
    
                    This is row 2, cell 1
                
    
    
    
    
    
    
    
    td
    
    
    
    >
    
    
    
    
                
    
    
    
    <
    
    
    
    td 
    
    
    
    bgcolor
    
    
    
    ="magenta"
    
    
    
    >
    
    
    
    
                    This is row 2, cell 2
                
    
    
    
    
    
    
    
    td
    
    
    
    >
    
    
    
    
            
    
    
    
    
    
    
    
    tr
    
    
    
    >
    
    
    
    
            
    
    
    
    <
    
    
    
    tr
    
    
    
    >
    
    
    
    
                
    
    
    
    <
    
    
    
    td 
    
    
    
    bgcolor
    
    
    
    ="lightgreen"
    
    
    
    >
    
    
    
    
                    This is row 3, cell 1
                
    
    
    
    
    
    
    
    td
    
    
    
    >
    
    
    
    
                
    
    
    
    <
    
    
    
    td 
    
    
    
    bgcolor
    
    
    
    ="beige"
    
    
    
    >
    
    
    
    
                    This is row 3, cell 2
                
    
    
    
    
    
    
    
    td
    
    
    
    >
    
    
    
    
            
    
    
    
    
    
    
    
    tr
    
    
    
    >
    
    
    
    
        
    
    
    
    
    
    
    
    table
    
    
    
    >
    
    
    
    
    
    
    
    
    
    
    
    
    p
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    p 
    
    
    
    id
    
    
    
    ="p4Node"
    
    
    
    >
    
    
    
    This is paragraph 4.
    
    
    
    
    
    
    
    p
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    script 
    
    
    
    language
    
    
    
    ="JavaScript"
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    

    
    
    
        
    
    
    
    
    
    
    
    script
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    body
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    html
    
    
    
    >
   
   
   
   

　　上述代码首先显示页面的初始内容以及节点p1Node的相关属性值，然后对节点bodyNode的第1个孩子节点的nodeValue属性进行赋值修改其文本内容，对节点p3Node的第2个孩子节点（也就是了img标记）的src属性进行赋值修改图形的内容。
　　使用createElement方法
　　createElement方法的功能是在文档中创建一个孤立HTML标记节点。孤立节点既没有孩子节点也没有双亲节点，而且与文档中的现存节点也互不关联。被创建的孤立HTML标记节点的唯一信息就是它代表的HTML标记，比如< P>、< FONT>和< TABLE>。CreateElement的语法为document.createElement(HTMLTag)，HTMLTag表示要创建的HTML标记，返回值是创建的孤立HTML标记节点。来看看下面的例子： 

   
   
   
   

    
    
    
    
    <
    
    
    
    html
    
    
    
    >
    
    
    
    

    
    
    
    <
    
    
    
    head
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    title
    
    
    
    >
    
    
    
    DOM Demo 
    
    
    
    
    
    
    
    title
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    head
    
    
    
    >
    
    
    
    

    
    
    
    <
    
    
    
    body 
    
    
    
    id
    
    
    
    ="bodyNode"
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    script 
    
    
    
    language
    
    
    
    ="JavaScript"
    
    
    
    >
    
    
    
    


    
    
    
    
    
    
    
    

    
    
    
        
    
    
    
    
    
    
    
    script
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    body
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    html
    
    
    
    >
    
    
    
    

   
   
   
   

　　上述代码在文档中创建了4个孤立HTML标记节点tableObj、tbodyObj、trObj和tdObj，它们就象太空中4颗人造卫星一样，彼此间以及和文档中的现有节点间都互不关联。创建孤立节点的目的不是为了让它真正孤立，随后我们会介绍如何将创建的孤立节点彼此相连，并添加到文档的DOM Tree结构中。
　　使用cloneNode方法 
　　cloneNode方法的功能是通过克隆（也就是复制）文档中一个现存节点的方式创建文档的一个孤立节点。根据被克隆节点的类型，新创建的孤立节点或者是HTML标记节点，或者是包含字符串信息的文本项节点。cloneNode的语法为oldNode.createNode(false)或者oldNode.createNode(true)，oldNode表示被克隆的节点，返回值是新创建的节点，false表示仅仅克隆oldNode，true表示克隆oldNode并包含其下属节点。来看看下面的例子： 

   
   
   
   

    
    
    
    
    <
    
    
    
    html
    
    
    
    >
    
    
    
    

    
    
    
    <
    
    
    
    head
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    title
    
    
    
    >
    
    
    
    DOM Demo 
    
    
    
    
    
    
    
    title
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    head
    
    
    
    >
    
    
    
    

    
    
    
    <
    
    
    
    body 
    
    
    
    id
    
    
    
    ="bodyNode"
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    script 
    
    
    
    language
    
    
    
    ="JavaScript"
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    

    
    
    
        
    
    
    
    
    
    
    
    script
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    body
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    html
    
    
    
    >
    
    
    
    

   
   
   
   

　　上述代码中值得注意的是对文本项节点的处理方式： 
　　1、首先，使用语句row1cell1Obj = document.createTextNode("This is row 1, cell 1")创建单元格（1，1）所在节点； 
　　2、然后使用语句row1cell1Obj.cloneNode(false)分别创建其他单元格节点； 
　　3、最后，使用语句node.nodeValue = string分别为不同单元格赋值。 

　　使用appendChild方法 
　　appendChild方法的功能是在2个节点间建立起父子关系，如果作为父亲的节点已经具有了孩子节点，那么新添加的孩子节点被追加为最后一个孩子，也就是lastChild。appendChild的语法是fatherObj.appendChild(childObj)，返回值是被追加的孩子节点。来看看下面的例子： 

   
   
   
   

    
    
    
    
    <
    
    
    
    html
    
    
    
    >
    
    
    
    

    
    
    
    <
    
    
    
    head
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    title
    
    
    
    >
    
    
    
    DOM Demo 
    
    
    
    
    
    
    
    title
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    head
    
    
    
    >
    
    
    
    

    
    
    
    <
    
    
    
    body 
    
    
    
    id
    
    
    
    ="bodyNode"
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    script 
    
    
    
    language
    
    
    
    ="JavaScript"
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    

    
    
    
        
    
    
    
    
    
    
    
    script
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    body
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    html
    
    
    
    >
    
    
    
    

   
   
   
   

　　上面的代码演示了一个Table的动态创建过程。首先创建Table的各个行、列以及单元格的节点，然后使用appendChild将这些节点进行连接形成一个Table，最后通过语句bodyNode.appendChild(tableObj)将Table装载进文档中。
　　使用applyElement方法 
　　applyElement方法的功能是将一个节点与它的孩子节点和父亲节点脱离，然后将另外一个节点连接到这个节点，最终使它们成为父子关系。applyElement的语法是childObj.applyElement(fatherObj)，返回值是被连接的孩子节点。 
　　我们注意到，applyElement和appendChild实现的目的基本相同，都是在2个节点间建立父子关系，但有2个区别： 
　　1、applyElement方法只能操纵HTML标记节点，不能处理文本项节点。appendNode则能处理2种节点。 
　　2、appendNode对2个节点的连接方式是从父到子，applyElement则是从子到父。 
　　来看看下面的例子： 

   
   
   
   

    
    
    
    
    <
    
    
    
    html
    
    
    
    >
    
    
    
    

    
    
    
    <
    
    
    
    head
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    title
    
    
    
    >
    
    
    
    DOM Demo 
    
    
    
    
    
    
    
    title
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    head
    
    
    
    >
    
    
    
    

    
    
    
    <
    
    
    
    body 
    
    
    
    id
    
    
    
    ="bodyNode"
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    script 
    
    
    
    language
    
    
    
    ="JavaScript"
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    

    
    
    
        
    
    
    
    
    
    
    
    script
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    body
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    html
    
    
    
    >
    
    
    
    

   
   
   
   

　　上面的代码同样演示了一个Table的动态创建过程。首先创建Table的各个行、列以及单元格的节点，然后混合使用applyElement和appendChild将这些节点进行连接形成一个Table，最后通过语句bodyNode.appendChild(tableObj)将Table装载进文档中。