最近在学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. SQLServer复合查询条件(AND,OR,NOT)对NULL值的处理方法

    在SQL的3值逻辑下,一个查询条件可以产生以下三种情况:TRUE,FALSE,NULL.只有那些满足WHERE子句的值是TRUE的记录才出现在结果表中. NULL值影响查询条件的结果,并且结果很微妙. ...

  2. MDX函数（官方顺序，带示例）

    MDX函数(官方顺序) 1.  AddCalculatedMembers (MDX) 返回通过将计算成员添加到指定集而生成的集. 语法: AddCalculatedMembers(Set_Expres ...

  3. POSIX, Bash, GPL etc

    POSIX , SUS, XSI Portable Operating System Interface POSIX是给Unix/Linux系统使用的通用调用接口(SCI, System Call I ...

  4. python标准库00 学习准备

    Python标准库----走马观花 python有一套很有用的标准库.标准库会随着python解释器一起安装在你的电脑上的.它是python的一个组成部分.这些标准库是python为你准备的利器,可以 ...

  5. linux mount 硬盘挂载和卸载

    Linux 挂载 [root@whp6 ~]# mount /dev/sdb5 /mnt/ [root@whp6 ~]# df -h Filesystem Size Used Avail Use% M ...

  6. OpenStack 企业私有云的若干需求（9）: 云管理平台 CMP

    本系列会介绍OpenStack 企业私有云的几个需求: 自动扩展(Auto-scaling)支持 多租户和租户隔离 (multi-tenancy and tenancy isolation) 混合云( ...

  7. 连接到Windows Azure Point to Site VPN

    Windows Azure支持两种模式的VPN接入: Site to Site,接入端需要有固定的公网IP地址,用于连接局域网和Windows Azure的虚拟网络. Point to Site,客户 ...

  8. Struts2工作原理

    Struts2工作原理 Struts2请求响应流程: 在struts2的应用中,从用户请求到服务器返回相应响应给用户端的过程中,包含了许多组件如:Controller.ActionProxy.Acti ...

  9. [Top-Down Approach] Chatper 4 Notes

    4.2 Virtual Circuit and Datagram Networks VC Set up connection Exchange data Free the connection The ...

  10. u3d_Shader_effects笔记4 BRDF

    1.英文意思 bidirectional reflectance distribution function bidirectional :双向的 reflectance :反射 distributi ...