DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。

(1)创建新节点

  createDocumentFragment() //创建一个DOM片段

  createElement() //创建一个具体的元素

  createTextNode() //创建一个文本节点

(2)添加、移除、替换、插入

(1)创建新节点

  createDocumentFragment()    //创建一个DOM片段

  createElement()   //创建一个具体的元素

  createTextNode()   //创建一个文本节点

(2)添加、移除、替换、插入

  appendChild()

  removeChild()

  replaceChild()

  insertBefore()

(3)查找

  getElementsByTagName()    //通过标签名称

  getElementsByName()    //通过元素的Name属性的值

  getElementById()    //通过元素Id,唯一性

  本节要用到的html例子

  <ul id="myList">

    <li>项目一</li>

    <li>项目二</li>

    <li>项目三</li>

  </ul>

1.创建元素节点document.createElement() 方法 用于创建元素,接受一个参数,即要创建元素的标签名,返回创建的元素节点

  var div = document.createElement("div");  //创建一个div元素

  div.id = "myDiv";        //设置div的id

  div.className = "box";    //设置div的class

  创建元素后还要把元素添加到文档树中

2.添加元素节点appendChild() 方法 用于向childNodes列表的末尾添加一个节点,返回要添加的元素节点

  var ul = document.getElementById("myList");    //获得ul

  var li = document.createElement("li");         //创建li

  li.innerHTML = "项目四";                    //向li内添加文本

  ul.appendChild(li);                //把li 添加到ul子节点的末尾

  添加后:

  <ul id="myList">

    <li>项目一</li>

    <li>项目二</li>

    <li>项目三</li>

    <li>项目四</li>

  </ul>

appendChild() 方法还可以添加已经存在的元素,会将元素从原来的位置移到新的位置

  var ul = document.getElementById("myList");    //获得ul

  ul.appendChild(ul.firstChild);            //把ul的第一个元素节点移到ul子节点的末尾

  运行后(IE):

  <ul id="myList">

    <li>项目二</li>

    <li>项目三</li>

    <li>项目一</li>

  </ul>

insertBefore() 方法 ,如果不是在末尾插入节点,而是想放在特定的位置上,用这个方法,该方法接受2个参数,第一个是要插入的节点,第二个是参照节点,返回要添加的元素节点

eg-1:

  var ul = document.getElementById("myList");    //获得ul

  var li = document.createElement("li");         //创建li

  li.innerHTML= "项目四";                    //向li内添加文本

  ul.insertBefore(li,ul.firstChild);        //把li添加到ul的第一个子节点前

  添加后:

  <ul id="myList">

    <li>项目四</li>

    <li>项目一</li>

    <li>项目二</li>

    <li>项目三</li>

  </ul>

eg-2:

    var ul = document.getElementById("myList");    //获得ul

    var li = document.createElement("li");         //创建li

    li.innerHTML= "项目四";               //向li内添加文本

    ul.insertBefore(li,ul.lastChild);        //把li添加到ul的子节点末尾

  添加后:

  <ul id="myList">

    <li>项目一</li>

    <li>项目二</li>

    <li>项目三</li>

    <li>项目四</li>

  </ul>

eg-3:

  var ul = document.getElementById("myList");    //获得ul

  var li = document.createElement("li");         //创建li

  li.innerHTML= "项目四";                    //向li内添加文本

  var lis = ul.getElementsByTagName("li")   //获取ul中所有li的集合

  ul.insertBefore(li,lis[1]);            //把li添加到ul中的第二个li节点前

  添加后:

  <ul id="myList">

    <li>项目一</li>

    <li>项目四</li>

    <li>项目二</li>

    <li>项目三</li>

  </ul>

 3.移除元素节点

 removeChild() 方法 ,用于移除节点,接受一个参数,即要移除的节点,返回被移除的节点,注意被移除的节点仍然在文档中,不过文档中已没有其位置了

  var ul = document.getElementById("myList");            //获得ul

  var fromFirstChild = ul.removeChild(ul.firstChild);    //移除ul第一个子节点

  var ul = document.getElementById("myList");    //获得ul

  var lis = ul.getElementsByTagName("li")        //获取ul中所有li的集合

  ul.removeChild(lis[0]);                  //移除第一个li,与上面不同,要考虑浏览器之间的差异

4.替换元素节点replaceChild() 方法 ,用于替换节点,接受两个参数,第一参数是要插入的节点,第二个是要替换的节点,返回被替换的节点

  var ul = document.getElementById("myList");            //获得ul

  var fromFirstChild = ul.replaceChild(ul.firstChild);    //替换ul第一个子节点

  var ul = document.getElementById("myList");    //获得ul;

  var li = document.createElement("li");         //创建li

  li.innerHTML= "项目四";                    //向li内添加文本

  var lis = ul.getElementsByTagName("li")        //获取ul中所有li的集合

  var returnNode = ul.replaceChild(li,lis[1]);   //用创建的li替换原来的第二个li

5.复制节点cloneNode() 方法,用于复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点)

  var ul = document.getElementById("myList");    //获得ul

  var deepList = ul.cloneNode(true);            //深复制

  var shallowList = ul.cloneNode(false);        //浅复制

DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。的更多相关文章

  1. JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点

    DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...

  2. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

  3. DOM操作——JavaScript怎样添加、移除、移动、复制、创建和查找节点

    (1). 创建新节点 createDocumentFragment() // 创建一个DOM片段 createElement() // 创建一个具体的元素 createTextNode() // 创建 ...

  4. DOM操作怎样添加、移除、移动、复制。创建和查找节点?

    (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节 ...

  5. [简洁]JavaScript中添加、移除、移动、复制、创建和查找节点元素

    查找: document.getElementsByTagName通过标签名获取元素,不论有多少个都返回元素集合. document.getElementsByClassName通过类名获取元素,同上 ...

  6. jQuery系列 第七章 jQuery框架DOM操作

    第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...

  7. 理解js的DOM操作

    1.DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动.document.documentElement     返回文档的根节点<html> document.body ...

  8. js,jQuery和DOM操作的总结(一)

    废话不说,直接上图 一 js的基本操作 (1)js 的六种数据类型 var n4;//六种数据类型用typeof来确定类型,Null类型的用typeof是不行的,这个是特殊 alert(typeof ...

  9. 页面性能优化和高频dom操作

    一.DOM操作影响页面性能的核心问题 通过js操作DOM的代价很高,影响页面性能的主要问题有如下几点: 访问和修改DOM元素 修改DOM元素的样式,导致重绘或重排 通过对DOM元素的事件处理,完成与用 ...

随机推荐

  1. java面向对象设计原则

    原则1:DRY(Don't repeat yourself) 即不要写重复的代码,而是用"abstraction"类来抽象公有的东西.如果你需要多次用到一个硬编码值,那么可以设为公 ...

  2. 使用Memcache缓存mysql数据库操作的原理和缓存过程浅析

    转载自脚本之家 http://www.jb51.net/article/51831.htm  作者:忙碌的松鼠 对于大型网站如facebook,ebay等网站,如果没有Memcache做为中间缓存层, ...

  3. Matrix

    记载: Matrix Matrix是Android 提供的一个矩阵工具类,位于"android.graphics.Matrix"包下,它本身不能对图像或View进行变换, 但它可以 ...

  4. ActiveReports最终报表设计器本地化方法介绍

    ActiveReports UI界面中的所有字符信息.错误提示信息.以及一些logo.图像资源,都能够通过运行batch文件来本地化.本文主要介绍资源本地化的具体步骤: 1. 资源目录 所有可本地化的 ...

  5. css学习笔记 3

    css选择符: 通配选择符:* 类选择符:.className 标签选择符 后代选择符:例:p strong ,选择的是p标签内的所有strong标签. 子选择符:> ,只选择父标签内的直接子标 ...

  6. bash命令行返回值和展开

    bash命令行返回值和展开 标签(空格分隔): bash,命令,状态,展开 1.命令状态结果和执行结果 (1)命令执行的状态返回值,命令执行完成之后,其执行状态结果值保存于bash的特殊状态变量$?中 ...

  7. flume坑之channel.transactionCapacity和HdfsSink.batchSize

    不说过程了,直接说结果!一对相连接的channel-HdfsSink,无意间配置如下:...agent.channels.common-channel.transactionCapacity=10.. ...

  8. 51nod 1240 莫比乌斯函数

    题目链接:51nod 1240 莫比乌斯函数 莫比乌斯函数学习参考博客:http://www.cnblogs.com/Milkor/p/4464515.html #include<cstdio& ...

  9. Redis一个异常的解决办法,异常描述:Could not get a resource from the pool

    异常描述: redis.clients.jedis.exceptions.JedisConnectionException: Could not get a resource from the poo ...

  10. category - junit用例分组执行

    一.category 和 testSuite的比较 (1)testSuite是类级分组(xx.class) (2)category是用例级分组(@Test) (3)category是testSuite ...