每次写DOM的时候，就觉得好像没什么好写，因为涉及到知识点的方面的确不多，对于DOM来说，更多的还是练习为主。在练习的时候，最好能结合着js基础语法的知识点来学习。这样，在学习DOM的时候就不会那么枯燥了。

　　在DOM基础（三）里我提到了追加子元素的概念，也就是appendChild()方法，这个方法是用来给节点的子节点中的最后添加一个元素。之前我提到的是把克隆的节点添加到节点的末尾。但是，如果我们对原本就存在的节点使用这种方法呢？比如下述代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<ul id="ul">

    <li>111111</li>

    <li>222222</li>

    <li id="li3">333333</li>

    <li>444444</li>

</ul>

<script>

    var ul = document.getElementById("ul");

    var lis = ul.children;

    ul.appendChild(lis[2]);

</script>

</body>

</html>

　　这段代码在页面中打印的结果为

　　我们可以看到，原本应该是333333的位置变成了444444，而333333却到了最后。这是因为appendChild()这个实际上是剪切一个元素。也就是说，在执行的过程中，appendChild()方法先把第三个li剪切了一份，然后再放到了ul的最后。要使得他不被剪切的方法就是先复制一份，然后再加到ul的最后。也就是：

ul.appendChild(lis[2].cloneNode(true));

　　这样，我们就实现了复制一次第三行代码，然后把他追加到了ul的最后。

　　不过这种方法有他的局限性，那就是我们只能把剪切下来的元素放到最后一个位置，而不能放到任意位置。这时候，我们就要用到另一个方法了，就是insertBefore();这个方法有两个参数，第一个参数是用来控制要插入的内容的，而第二个参数则是用来控制要插入的位置的。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<ul id="list">

    <li>111111</li>

    <li>222222</li>

    <li>333333</li>

    <li>444444</li>

</ul>

<script>

    var ul = document.getElementById("list");

    var lis = ul.children;

    var n1 = lis[2];

    ul.insertBefore(n1, lis[0]);

</script>

</body>

</html>

　　这段代码在页面中的输出结果为

　　我们可以看到，跟appendChild一样，他也是把节点直接剪切到了第一个元素前面。所以，要解决这个问题就只能让元素先克隆一份，然后在追加到ul的最前面。也就是改变n1的值。

var n1 = lis[2].cloneNode(true);

　　这样，我们就能实现元素添加到任意位置了。

　　好了，解决了之前遗留的问题，接下来就可以说说其他的知识了。DOM除了可以获取和改变页面中的元素之外，还可以动态的创建元素，而且在创建了元素之后，还可以动态的给元素添加属性和方法。其实在我之前的文章中，就已经有涉及到过一些动态创建元素的概念了。document.write();这个方法是直接向页面中输出一句话，不过除了它输出普通的字符串之外，还能输出其他的内容：

document.write("<input type='text' value='456'>");

　　这句话在页面打印的结果为一个值为456的input输入框。因为在解析的时候，页面自动把这句话进行了转译，解析成了一个input标签，所以我们才能在页面上看到一个文本框。

除了document.write()之外，我们还可以用innerHTML的方式给页面添加元素。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div id="d"></div>

<script>

    var d = document.getElementById("d");

        for (var i = 0; i < 10; i++) {

            d.innerHTML += "<input type='text' value='123'><br/>";

    }

</script>

</body>

</html>

上述代码在页面中循环打印了是个input标签。我们在开发人员工具中查看页面结构

　　从上图我们可以看到，这些input标签都被放在id为d的这个div下面了，它作用的原理跟document.write()相同，都是把d.innerHTML的内容转译成了html的标签。使它能在页面中打印出来。

　　除了上述两种动态创建元素的方法外，DOM还给我们提供了内置的方法来动态的创建元素。document.createElement()，这个方法直译过来就是在文档中创建元素，所以看着这么一串其实记忆起来并不难，它的作用是在内存中生成一对标签。既然是生在内存中，我们就要用一个变量去接收他

var ul = document.createElement("ul");

　　在这里，我动态的生成了一个ul标签，括号直接填写要生成的标签的标签名就好了，并用双引号引起来，然后把他赋给一个变量。这样，我们就动态的生成了一个ul标签。生成了之后要怎么把他添加到页面中呢？这时候，就要用到appendChild方法了。下面是一个完整的例子：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div id="d"></div>

<script>

    var ul = document.createElement("ul");

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

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

    var d = document.getElementById("d");

    d.appendChild(ul);  

    ul.appendChild(li1);

    ul.appendChild(li2);

    li1.innerHTML = "这是动态创建的元素";

    li2.innerHTML = "这是动态创建的元素";

</script>

</body>

</html>

　　上述例子中，我动态的生成了一个ul标签，两个li标签，然后把ul标签剪切到了id为d的div盒子的末尾。在把两个li标签添加到了ul中。最后再给两个li标签设置了内容。这段代码，在页面中打印的结果为

　　我们在来看看它的页面结构

　　在页面中，也动态的生成了ul标签和li标签，这样，动态的创建元素就完成了。

DOM基础（四）的更多相关文章

  1. HTML DOM基础知识

    HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...

  2. 第一百一十三节，JavaScript文档对象，DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  3. DOM基础（二）

    在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...

  4. 第五讲 DOM基础

    DOM基础: 什么是DOM:其实就是dovument,div获取.修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作: 浏览器支持情况:IE(IE7-8,10% ...

  5. JavaScript DOM基础总结

    上个月在进行百度三面时候,面试官提问JavaScript DOM方法,我回答的有点少,前面太关注JavaScript 兼容性,框架方面,JavaScript 原生DOM基础没有记牢,心中有点遗憾.下来 ...

  6. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

  7. Python全栈开发【基础四】

    Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...

  8. Bootstrap<基础四> 代码

    Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...

  9. Javascript DOM基础（一）概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

随机推荐

  1. Hdu-2112 HDU Today (单源多点最短路——Dijsktra算法)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2112 题目大意:给你N个公交车站,起点,终点,各站之间的距离,求起点到终点之间的最短距离.(起点终点相 ...

  2. HTML 5 简介、视频、Video + DOM、音频、拖放

    HTML5 是下一代的 HTML. 什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web ...

  3. bootstrap 树

    http://jsfiddle.net/jhfrench/GpdgF/ 把原文的i标签中的图标显示出来: 源码: <div class="tree well"> < ...

  4. js运算符单竖杠“|”的作用

    在js整数操作的时候,相当于去除小数点,parseInt.在正数的时候相当于Math.floor(),负数的时候相当于Math.ceil() 注: 1. Math.ceil()用作向上取整. 2. M ...

  5. HDU4474

    Yet Another Multiple Problem Time Limit: 40000/20000 MS (Java/Others)    Memory Limit: 65536/65536 K ...

  6. 纯css实现轮播图

    轮播图的实现原理其实是比较简单的 举个例子 <div class="main"> <div class="div-main"></ ...

  7. pwnable.kr-collision -Writeup

    bof html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,addres ...

  8. C++编程练习(16)----“排序算法 之 快速排序“

    快速排序 基本思想: 通过一趟排序将待排记录分割成独立的两部分,其中一部分记录的关键字均比另一部分记录的关键字小,则可分别对这两部分记录继续进行排序,以达到整个序列有序的目的. 算法介绍: 设要排序的 ...

  9. angular2使用官网npm install下载依赖失败的处理方法

    上一两个月在学习angular2,在下载依赖阶段看官网是直接自动下载的,[npm install] 就能把依赖全部弄下来.不过作为新手的我,是倒腾来倒腾去都倒不出来,因为老是报同一个错.官网也还有手动 ...

  10. Oracle数据库语言修改成UTF-8

    select * from v$nls_parameters; sqlplus "/ as sysdba" SQL> SHUTDOWN IMMEDIATE SQL> S ...