玩转Ajax之五：DOM的CRUD(增、读、改、查)

jhlovett

浏览: 614027 次
性别:
来自: 卡哇伊

最近访客更多访客>>

vcmasm

成长的菜鸟

zaweze

wwwxxxttt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

Ajax JavaScript HTML

本篇文章将与读者一起学习DOM（文档对象模型）的CRUD（增、读、改、删），有的读者可能会在想怎么没有查找了，因为RUD都是在查找的基础上再进一步的操作，所以没包括在其中。读者通过这篇文章能学到对DOM中的元素节点的CRUD。

一、技术点：

我们将要用到如下对象、方法、属性：
1、document：文档对象，代表文档。
2、getElementById：方法，通过ID查找元素节点。必用
3、innerText：属性，修改标签中的文本。
4、parentNode：属性，获取元素节点的父节点。
5、createElement：方法，创建一个标签，注意：此时还没有添加到document中。
6、appendChild：方法，把新建的节点添加至父节点中。
7、removeChild：方法，删除某个节点。

二、我们创建的Html页面：

<HTML> <HEAD> <TITLE>麦博网</TITLE> <script language="JavaScript"> function Insert() { //新增代码下：3-1 } function Read(id) { //读取代码见：3-2 } function Delete(id) { //删除代码见：3-3 } function Modif(id) { //修改代码见：3-4 } </script> </HEAD> <BODY> <DIV iD="Content"> <SPAN iD="Num2">XINGKONG</SPAN> <SPAN iD="Num3">XINGKONG</SPAN> </DIV> <DIV> <A HREF="#" onCLICK="return Insert();">添加</A> <A HREF="#" onCLICK="Delete('Num3');">删除</A> <A HREF="#" onCLICK="Modif('Num2');">修改</A> <A HREF="#" onCLICK="Read('Num2');">查找</A> </DIV> </BODY> </HTML>

三、CRUD（增、读、改、删）

1、增

   var newElement= document.createElement("p");
   newElement.innerText="我是新来的";
   document.getElementById("Content").appendChild(newElement);

2、读

var Element=document.getElementById(id);
    if(Element!=undefined)
    {
       alert(Element.innerText);
    }

3、删

    var Element=document.getElementById(id);
    Element.parentNode.removeChild(Element);

4、改

    var Element=document.getElementById(id);
     Element.innerText="修改完毕";

四、总结

本篇文章没有像本系列之前的文章去用很多文字介绍，而是通过代码让大家掌握基础的CRUD。我感觉这样更容易让读者看懂，我相信读者看到这里的时候对DOM的CRUD操作已经非常的熟练了吧。那我也没白费力气了。嘿嘿

分享到：

AbstractFactoryPattern | 玩转AJAX之四:深探XMLHttpRequest对象

2009-04-20 22:39
浏览 969
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论