最近在学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. spring hibernate摘记

    一.spring 1.ContextLoaderListener    它作用就是启动Web容器时,自动装配ApplicationContext的配置信息.因为它实现了ServletContextLi ...

  2. js和jquery页面初始化加载函数的方法及先后顺序

    运行下面代码.弹出A.B.C.D.E的顺序:A=B=C>D=E. jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频), js:是页面全部加载完成才执行初始化加载. <! ...

  3. 利用NuSoap开发WebService(PHP)

    利用NuSoap开发WebService(PHP) 分类: php 2010-09-08 12:00 5005人阅读 评论(1) 收藏 举报 webservicephpsoapstringencodi ...

  4. jquery——滚动条插件jscroll.js

    一.效果如下 点击“测试中奖纪录”弹出弹框.弹框中内容超出时显示滚动条. 二.代码部分 1.html结构 <body> <a href="javascript:;" ...

  5. 使用Bootstrap v3.3.4注意细节box-sizing

    一.bootstrap样式 在Bootstrap v3.3.4中有下面一条重置样式: * { -webkit-box-sizing: border-box; -moz-box-sizing: bord ...

  6. [转]KendoUI系列：Grid

    本文转自:http://www.cnblogs.com/libingql/p/3774879.html 1.基本使用 <div id="grid"></div&g ...

  7. [转]pyhon之Tkinter实例化学习

    本文转自:http://www.cnblogs.com/kaituorensheng/p/3287652.html 阅读目录 1. 产品介绍 2. 设计规划 3. 相关知识 4. 源码附件 Tkint ...

  8. C#基础---IComparable用法，实现List<T>.sort()排序

    List<T>.sort()可以实现对T的排序,比如List<int>.sort()执行后集合会按照int从小到大排序.如果T是一个自定义的Object,可是我们想按照自己的方 ...

  9. Learning Spark: Lightning-Fast Big Data Analysis 中文翻译

    Learning Spark: Lightning-Fast Big Data Analysis 中文翻译行为纯属个人对于Spark的兴趣,仅供学习. 如果我的翻译行为侵犯您的版权,请您告知,我将停止 ...

  10. NOIP2002字串变换[BFS]

    题目描述 已知有两个字串 A$, B$ 及一组字串变换的规则(至多6个规则): A1$ -> B1$ A2$ -> B2$ 规则的含义为:在 A＄中的子串 A1$ 可以变换为 B1$.A2 ...