使用DOM技术操纵文档-技术开发it知识库-Ubuntu系统_Ubuntu服务器

　　我们知道，如果使用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">
<!--
        alert("页面初始状态" + "/n/n" + "bodyNode.firstChild.nodeValue = " + bodyNode.firstChild.nodeValue + "/n" + "bodyNode.firstChild.data = " + bodyNode.firstChild.data + "/n");
        bodyNode.firstChild.nodeValue = "This is the new document body, set by the nodeValue property";
        p3Node.childNodes[1].src = "myexam2.gif";
        alert("对页面内容进行修改后" + "/n/n" + "bodyNode.firstChild.nodeValue = " + bodyNode.firstChild.nodeValue + "/n" + "bodyNode.firstChild.data = " + bodyNode.firstChild.data + "/n" + "p3Node.childNodes[1].src = " + p3Node.childNodes[1].src);
// -->
    </script>
</body>
</html>　　使用insertBefore方法  
　　insertBefore方法的功能和appendChild相似，都是将一个孩子节点连接到一个父亲节点，但insertBefore方法允许我们指定孩子节点的位置。insertBefore的语法是fatherObj.insertBefore(childObj, brotherObj)，返回值是被连接的孩子节点。执行后，childObj的位置在brotherObj之前。来看看下面的例子：  
 
<html>
<head>
    <title>DOM Demo </title>
</head>
<body id="bodyNode">
    <script language="JavaScript">
<!--
        alert("页面初始状态");
        tableObj = document.createElement("TABLE");
        tbodyObj = document.createElement("TBODY");
        tr1Obj = document.createElement("TR");
        tr2Obj = tr1Obj.cloneNode();
        tr3Obj = tr1Obj.cloneNode();
        tr1td1Obj = document.createElement("TD");
        tr1td2Obj = tr1td1Obj.cloneNode();
        tr2td1Obj = tr1td1Obj.cloneNode();
        tr2td2Obj = tr1td1Obj.cloneNode();
        tr3td1Obj = tr1td1Obj.cloneNode();
        tr3td2Obj = tr1td1Obj.cloneNode();

        row1cell1Obj = document.createTextNode("This is row 1, cell 1");
        row1cell2Obj = row1cell1Obj.cloneNode();
        row2cell1Obj = row1cell1Obj.cloneNode();
        row2cell2Obj = row1cell1Obj.cloneNode();
        row3cell1Obj = row1cell1Obj.cloneNode();
        row3cell2Obj = row1cell1Obj.cloneNode();

        row1cell2Obj.nodeValue = "This is row 1, cell 2";
        row2cell1Obj.nodeValue = "This is row 2, cell 1";
        row2cell2Obj.nodeValue = "This is row 2, cell 2";
        row3cell1Obj.nodeValue = "This is row 3, cell 1";
        row3cell2Obj.nodeValue = "This is row 3, cell 2";

        returnValue = tableObj.insertBefore(tbodyObj);
        tbodyObj.insertBefore(tr3Obj);
        tbodyObj.insertBefore(tr2Obj, tr3Obj);
        tbodyObj.insertBefore(tr1Obj, tr2Obj);
        tr1Obj.insertBefore(tr1td2Obj);
        tr1Obj.insertBefore(tr1td1Obj, tr1td2Obj);
        tr2Obj.insertBefore(tr2td2Obj);
        tr2Obj.insertBefore(tr2td1Obj, tr2td2Obj);
        tr3Obj.insertBefore(tr3td2Obj);
        tr3Obj.insertBefore(tr3td1Obj, tr3td2Obj);
        tr1td2Obj.insertBefore(row1cell2Obj);
        tr1td1Obj.insertBefore(row1cell1Obj);
        tr2td2Obj.insertBefore(row2cell2Obj);
        tr2td1Obj.insertBefore(row2cell1Obj);
        tr3td2Obj.insertBefore(row3cell2Obj);
        tr3td1Obj.insertBefore(row3cell1Obj);
        bodyNode.insertBefore(tableObj);
// -->
    </script>
</body>
</html>
        
        
        
        
      
        it知识库：使用DOM技术操纵文档，转载需保留来源！
        郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

相关文章阅读