最近在学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. hibernate和mybatis的区别

    本文出自 alicejiyayun原创 第一章     Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架,它出身于sf.NET,现在已经成为Jboss的 ...

  2. cocos2d-x之 利用富文本控件解析xhml标签（文字标签，图片标签，换行标签，标签属性）

    执行后效果: 前端使用: 后台SuperRichText解析code void SuperRichText::renderNode(tinyxml2::XMLNode *node){ while (n ...

  3. Linux多进程编程

    进程的状态 Linux进程有7种基础状态(两种running算一种),除了traced都可以用$ps命令查看,$ps可以查看的进程状态如下,更多进程状态信息参见Linux Process VS Thr ...

  4. x01.os.10: 输入输出

    从 x01.Lab.Download 中下载源代码,进入工程目录,make 后再 bochs,即可见到如下界面: 随便打几个字,ok!按 F2,可切换到第二个终端,界面如下: 当然,按 F3 还可切换 ...

  5. viso2010从mysql中导出ER图

    mysql connector 下载地址: http://dev.mysql.com/downloads/connector/odbc/5.1.html 首先机器要安装mysql-connector- ...

  6. javascript刷新父页面的内容

    适应于超级链接和弹出窗口 function RefreshParent() {     if (window.opener != null) {                             ...

  7. [译] 企业级 OpenStack 的六大需求（第 3 部分）：弹性架构、全球交付

    全文包括三部分: 第一部分:API 高可用和管理以及安全模型 第二部分:开放架构和混合云兼容 第三部分:弹性架构和全球交付 需求 5 - 扩展.弹性和性能 企业级的内容很丰富.过去,企业级往往和高可靠 ...

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

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

  9. Appium学习实践（二）Python简单脚本以及元素的属性设置

    1.简单的Python脚本 Appium中的设置与Appium学习实践(一)简易运行Appium中的一致 Launch后,执行脚本 #coding:utf-8 import unittest impo ...

  10. bzoj2438[中山市选2011]杀人游戏

    Description 一位冷血的杀手潜入 Na-wiat,并假装成平民.警察希望能在 N 个人里面, 查出谁是杀手. 警察能够对每一个人进行查证,假如查证的对象是平民,他会告诉警察,他 认识的人, ...