DOM增删改

上一篇主要是针对查询的,本文主要针对的是DOM的增删改

添加节点:

       1,appendChild() 用于向ChildNodes列表的末尾添加一个节点,返回新增的节点,如果传入到appendChild()中通的节点已经是文档的一部分了,那结果就是将该节点从原来的位置转移到新的位置。因此 如果在调用appendChild()传入了父节点的第一个子节点,那么该节点就会成为父节点的最后一个子节点

 1 <div>
 2     <ul>
 3         <li>1</li>
 4         <li>2</li>
 5         <li>3</li>
 6     </ul>
 7 </div>
 8  var a=document.getElementsByTagName(‘ul‘)[0];
 9  var node1=a.firstElementChild;
10  var returnnode1=a.appendChild(node1);
11  alert(returnnode1== a.lastElementChild);  // true
12  alert(returnnode1== a.firstElementChild);  //  false  说明返回的就是添加的那个节点

2,insertBefore(),该方法接收两个参数 要插入的节点和作为参照的节点,插入后被插入的节点就会变成参考节点的前一个同胞节点,同时被方法返回 插入成为第一个子节点 则var returnNode=someNode.insertBefore (newNode,someNode.firstChild); alert(returnNode==someNode.lastElementChild); 插入成为最后一个子节点 第二个参数 为null 即可 这个方法的关键是要理解:会插入到参考节点的前面

删除节点

removeChild() 该方法只接受一个参数 就是要删除的节点

替换节点

replaceChild()   第一个参数为要插入的节点 第二个参数为要替换的节点

这个几个方法的共性是 操作的都是某个节点的子节点,使用之前必须先取到其父节点,另外不是所有类型的节点都有子节点(nodeType为 3,4,7,8,10,12的节点类型均为子节点)如果在这些节点上 调用上述方法会报错

其他方法:

1,cloneNode()  用于常见创建调用这个方法的节点的一个完全的副本(该方法不复制javascript属性 如事件处理程序) 接受一个参数

为true 执行深复制 复制该节点及其整个子节点树

为false 执行浅复制 只复制该节点

2,和上面方法相似的还有importNode() 方法  该方法是document 对象上的方法 接受两个参数 要导入的节点 和 一个bool值  当为true时 复制子孙节点 为false时只复制 本级节点

1 var a = document.getElementById(‘1123‘);
2 var b = a.cloneNode(true);
3 document.getElementById(‘aaaa‘).appendChild(b);
4 var x=  document.importNode(a,true);
5 document.getElementById(‘aaaa‘).appendChild(x);

注: 这两个方法复制的节点 可再次插入到之前的父节点中  这和上面的appendChild和insertBefore() 就有点区别了 appendChild() 和insertBefore() 如果插入已存在的节点则会将之前的节点指向新的位置 就是不能重复添加,但是cloneNode() 和importNode()  则产生的是一个新的对象 新的节点 因此能重复添加

 1       <div id="a1123">
 2            <ul id="uld">
 3                <li>123</li>
 4            </ul>
 5        </div>
 7             var a = document.getElementById(‘uld‘);
 8             var b = a.cloneNode(true);
 9             document.getElementById(‘a1123‘).appendChild(a);//添加已存在的节点-无效果
10             document.getElementById(‘a1123‘).appendChild(b);//添加克隆后的节点 能添加
11             var x=  document.importNode(a,true);
12             document.getElementById(‘a1123‘).appendChild(x);//添加导入后的节点 能添加

参考自:《JavaScrpt高级程序设计》 《JavaScrpt权威指南JavaScrpt》

时间: 2024-10-14 07:16:40

DOM增删改的相关文章

JavaScript HTML DOM增删改查

首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的:通过ID查找: <!DOCTYPE html> <html> <head> <title>learn javascript</title> </head> <body> <p id="demo"&g

js基础(dom增删改)

新增节点: /* * document.createElement() * 可以用于创建一个元素节点对象, * 它需要一个标签名作为参数,将会根据该标签名创建元素节点对象, * 并将创建好的对象作为返回值返回 */ var li = document.createElement("li"); /* * document.createTextNode() * 可以用来创建一个文本节点对象 * 需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回 */ var gzTex

dom增删改查

一.创建节点 document.createElement(Tag),Tag必须是合法的HTML元素 二.DOM添加.删除节点的方法: appendChild(newNode) 将newNode添加成当前节点的最后一个子节点 insertBefore(newNode,refNode) 将refNode节点之前插入newNode节点 replaceChild(newNode,oldNode) 将oldNode节点替换成newNode节点 removeChild(oldNode) 将oldNode子

DOM增删改替换

一.在创建元素的时候为什么要把创建元素到也页面写到后面? 要求:创建一个div,在div中创建10个span. var div = document.createElement("div"); //document.body.appendChild(div); for(var i=0;i<10;i++){ var span = document.creatElement("span"); div.appendChild(span); } document.bo

HTML DOM(二):节点的增删改查

上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点.元素节点.文本节点.属性节点.注释节点,其中,属性节点是属于元素节点),本篇的内容就是通过DOM对这些节点进行增删改查的操作. 获取(R) 1. getElementById(id).getElementsByName(name).getElementsByTagName(tagName),这三种方法都会忽略文档的结构. getElementById(id):通过id获取元素节点,如果页面上含有多

使用dom元素和jquery元素实现简单增删改的练习

软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquery的强大: 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" con

HTML DOM节点的增删改查

上篇博客中,我们已经初步接触了DOM基础,可是我们学习是为了可以更好地应用,今天我们就来看看DOM节点的增删改查. 无论在哪里,我们想要操作一个东西,总是应该先去获得它.那么我们怎么获得呢? HTML的每一个成分都能够看作是节点(文档节点.元素节点.文本节点.属性节点.凝视节点.当中,属性节点属于元素节点). W3C 提供了比較方便简单的定位节点的方法和属性,以便我们高速的对节点进行操作. 分别为:getElementById().getElementsByTagName().getElemen

使用DOM进行xml文档的crud(增删改查)操作&amp;lt;操作详解&amp;gt;

很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这里入下载)导入到Eclipse或MyEclipse. Node和Element的关系 Element是Node的子接口,所以Element的方法要比Node方法要多,这样的话使用起来比较方便,一般情况我们都把节点转换成元素(或者叫标签,即Element); Element是Node的子类型: 比如我

使用DOM进行xml文档的crud(增删改查)操作&lt;操作详解&gt;

很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这里入下载)导入到Eclipse或MyEclipse. Node和Element的关系 Element是Node的子接口,所以Element的方法要比Node方法要多,这样的话使用起来比较方便,一般情况我们都把节点转换成元素(或者叫标签,即Element); Element是Node的子类型: 比如我