最近在学DOM，但是还是没有办法很好的记住API，想找些例子来练习，网上的例子将一个个DOM对象方法挨个举例，并没有集合在一起用，效果不尽人意。所以自己写一份实例，顺便巩固下学到的知识。

      这个例子很简单，主要就是操作ul下面的li，但是会贯穿很多DOM的对象方法。

      首先在body下面创建一个ul，注意<ul></ul> 之间不要有空格或回车，否则会造成文本节点。

```

<body>

    <ul id="fruit"></ul>

</body>

```

　　接下来就是Javascript代码了，首先我们需要通过id为“fruit”来获取ul这个节点。

```

    var oUl = document.getElementById("fruit");

```

　　通过getElementById()便可以获得ul这个节点了，之后我们要在ul节点下面创建子节点。通过createElement()创建li节点，然后再通过textContent属性来给新建的节点增加内容，最后在通过appendChild()将li节点绑定到ul上面。

```

var newNode1 = document.createElement("li");

newNode1.textContent = "第一个节点";

oUl.appendChild(newNode1);

var newNode2 = document.createElement("li");

newNode2.textContent = "第二个节点";

oUl.appendChild(newNode2);

```

　　这样我们的网页上就已经有两个节点了，看下网页效果。


　　接下来，我们要在“第二个节点”的前面插入“第三个节点”。所以我们需要先获取到“第二个节点”，可以通过childNode和nodeList实现，获取到之后在通过insertBefore()进行插入。

```

var nodeList = oUl.childNodes;

var newNode3 = document.createElement("li");

newNode3.textContent = "第三个节点";

oUl.insertBefore(newNode3,nodeList[1]);

```

　　效果如下：


　　现在，我打算用“第四个节点”替换掉“第一个节点”，这里需要用的replaceChild()函数以及获取第一个元素firstChild。

```

var newNode4 = document.createElement("li");

newNode4.textContent = "第四个节点";

oUl.replaceChild(newNode4,oUl.firstChild);

```

　　效果如下：


　　最后，我们来移除最后一个节点，也就是“第二个节点”，用到了lastChild，不过在移除之前，需要用hasChildNodes来判断oUl是否有子节点。

```

if(oUl.hasChildNodes){

    oUl.removeChild(oUl.lastChild);

}

```

　　至此，DOM简单的实例完成了。<br/>


　　这里是完整代码

```

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DOM</title>

<style>

body{background:#f1f1f1;}

</style>

<script>

window.onload = function(){

    var oUl = document.getElementById("fruit");//获取id为“fruit”的元素

    var newNode1 = document.createElement("li");//创建一个li节点

    newNode1.textContent = "第一个节点";//给新创建的li节点赋值

    oUl.appendChild(newNode1);//添加到oUl上

    var newNode2 = document.createElement("li");

    newNode2.textContent = "第二个节点";

    oUl.appendChild(newNode2);

    var nodeList = oUl.childNodes;

    var newNode3 = document.createElement("li");

    newNode3.textContent = "第三个节点";

    oUl.insertBefore(newNode3,nodeList[1]);//newNode3插入到nodeList[1]之前

    var newNode4 = document.createElement("li");

    newNode4.textContent = "第四个节点";

    oUl.replaceChild(newNode4,oUl.firstChild);//newNode4替换掉oUl的第一个子节点

    if(oUl.hasChildNodes){//如果oUl存在子节点

        oUl.removeChild(oUl.lastChild);//删除oUl的最后一个节点

    }

}

</script>

</head>

<body>

    <ul id="fruit"></ul>

</body>

</html>

```

Javascript DOM操作实例的更多相关文章

  1. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  2. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  3. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  4. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  5. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  6. 仅100行的JavaScript DOM操作类库

    如果你构建过Web引用程序,你可能处理过很多DOM操作.访问和操作DOM元素几乎是每一个Web应用程序的通用需求.我们我们经常从不同的控件收集信息,我们需要设置value值,修改div或span标签的 ...

  7. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

  8. javascript DOM操作 第19节

    <html> <head> <title>DOM对象</title> <script type="text/javascript&quo ...

  9. 常见的原生javascript DOM操作

    1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...

随机推荐

  1. 谷歌/微软/必应web页面免费翻译插件

    随着网络时代的日益壮大,现在我们经常需要浏览一些各种外语的网页,或者是查阅资料帮助我们解决问题.更多的时候还是头疼在语言障碍上,正所谓"它认识你,你不认识它啊."谷歌和微软两个企业 ...

  2. Webview加载本地js、图片的方法

    在项目开发中经常会将比较大的js.图片.css等放到app中,而html放服务器,这样在使用时流量较少,加载也比都放服务器上快,其实方法也比较多,网上搜了很久都没结果. 一种是获取服务器返回的html ...

  3. js 数组删除指定元素

    Array.prototype.remove = function(obj) { for (var i = 0; i < this.length; i++) { var temp = this[ ...

  4. 给锁住的行解锁（oracle）

    1.查看数据库锁,诊断锁的来源及类型: select object_id,session_id,locked_mode from v$locked_object; 或者用以下命令: select b. ...

  5. 使用bakefile编译C工程代码

    前言 最近有个想法,想把ineedle整体架构从头自己编写代码来实现一下,来加深对iNeedle系统的理解,同时加强Linux + C相关知识.由于iNeedle系统的庞大,只能是先把框架搭起来,根据 ...

  6. Qt5.5.0使用mysql编写小软件源码讲解---顾客信息登记表

    Qt5.5.0使用mysql编写小软件源码讲解---顾客信息登记表 一个个人觉得比较简单小巧的软件. 下面就如何编写如何发布打包来介绍一下吧! 先下载mysql的库文件链接:http://files. ...

  7. java 重载、重写、构造函数详解

    方法重写 1.重写只能出现在继承关系之中.当一个类继承它的父类方法时,都有机会重写该父类的方法.一个特例是父类的方法被标识为final.重写的主要优点是能够定义某个子类型特有的行为. class An ...

  8. 移动Windows用户文件夹的方法研究

    这种方法可能导致升级Windows失败.请谨慎使用. Windows 8.1 使用有效.其他系统请酌情修改. —————————————————————————— 复制文件内容(带权限等信息):有的说 ...

  9. C 结构体位域

    位域 : 有些信息在存储时,并不需要占用一个完整的字节, 而只需占几个或一个二进制位.例如在存放一个开关量时,只有0和1 两种状态, 用一位二进位即可.为了节省存储空间,并使处理简便,C语言又提供了一 ...

  10. 把web项目部署到tomocat上

    版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 常识 1 War包 2 Tomcat服务器 配置Java运行环境 1 下载并安装JDK 2 设置JDK环境变量 3 验证是否JD ...