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

最新推荐文章于 2021-02-15 04:21:05 发布

jhlovett

最新推荐文章于 2021-02-15 04:21:05 发布

阅读量180

点赞数

分类专栏： AJAX 文章标签： Ajax JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/jhlovett/article/details/83373654

版权

AJAX 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本篇文章将与读者一起学习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操作已经非常的熟练了吧。那我也没白费力气了。嘿嘿

jhlovett

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
玩转Ajax之五：DOM的CRUD(增、读、改、查)

本篇文章将与读者一起学习DOM（文档对象模型）的CRUD（增、读、改、删），有的读者可能会在想怎么没有查找了，因为RUD都是在查找的基础上再进一步的操作，所以没包括在其中。读者通过这篇文章能学到对DOM中的元素节点的CRUD。一、技术点：我们将要用到如下对象、方法、属性：1、document：文档对象，代表文档。2、getElementById：方法，通过ID查找元素节点。必用 3、in...
复制链接

扫一扫