一、在创建元素的时候为什么要把创建元素到也页面写到后面?
 
要求:创建一个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.body.appendChild(div);
原因是如果写在前面就创建一个span 就要打开一次body,div写入,这样的效率太慢啦。但是如果先讲span 在内存中直接写入,这样就打开2次,这样一次行就节省了很多的效率。
先创建一个容器,将子元素,放到父容器中,最后讲父容器放到页面中。
 
如果一定要写入到body页面中。就用碎片容器。
//创建碎片容器:
var elem = document.createDocumentFragment();
for(var i =0;i<10;i++){
var div = document.creatElement("div");
}
document.body.appendChile(elem);

二、删除元素三部曲

//元素删除的时候应该先删除事件,在删除元素。因为纯粹的删除的元素只是从Dom书中删除,并没有删除内容。删除元素的步骤:
第一步:删除事件
 
第二步:删除元素
 
第三步:将元素设为null
var div = document.createElement("div");
var span = document.createElement("span");
span.addEventListener("click",clickHandler); div.appendChild(span);
document.body.appendChild(div);
function clickHandler(e){
span.textContent="欢迎";
}
//删除之前的将事件删除
span.removeEventListener("click",clickHandler);
//使用onclick事件的时候,删除方法删除事件
//span.onclick=null //删除元素
div.removeChild(span);
span=null; div.appendChild(span);
//此时的span不再是节点,是null,再添加的时候就会报错
三、替换元素:
父容器.removeChild(新元素,要替换掉的旧元素)

 四、复制元素:

源元素.cloneNode(deep)
deep 是深度的意思;
true:时是深度赋值,将子元素和内容一起赋值,源元素的属性复制
false: 是潜复制,将源元素和属性复制
注意:
如果使用 cloneNode 复制元素的时候,必须修改元素的 id .

  

 

 

 

DOM增删改替换的更多相关文章

  1. DOM增删改

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. JavaScript HTML DOM增删改查

    首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的 ...

  3. linux sed 命令 实现对文件的增删改替换查 实验

    1. 统一实验文本 # 创建包含下面内容的文件,后面的操作都会使用这个文件 [root@MongoDB ~]# cat person.txt ,mike,CEO ,jack,CTO ,yy,CFO , ...

  4. DOM增删改操作

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. 第 9 章 DOM 的增删改查

    DOM 的增删改查 本文不会详细讲解,只是简单提及知识要点,详细可以参考<dom高级编程>. 1. document.write document.write('<h1>创建节 ...

  6. DOM节点的增删改查

    在开始展开DOM操作前,首先需要构建一棵DOM树. <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. HTML DOM节点的增删改查

    上篇博客中,我们已经初步接触了DOM基础,可是我们学习是为了可以更好地应用,今天我们就来看看DOM节点的增删改查. 无论在哪里,我们想要操作一个东西,总是应该先去获得它.那么我们怎么获得呢? HTML ...

  8. JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件

    JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...

  9. 超详细的DOM操作(增删改查)

    操作DOM的核心就是增删改查 原文地址:https://jianshu.com/p/b0aa846f4dcc 目录 一.节点创建型API 1.1 createElement 1.2 createTex ...

随机推荐

  1. mfc CString 转 char *

    做界面时遇到需要从界面编辑框接受输入字符(用户名,密码之类),然后转为char *类型交给程序处理,记录一下找到的方法,主要参考https://blog.csdn.net/neverup_/artic ...

  2. GAN算法笔记

    本篇文章为Goodfellow提出的GAN算法的开山之作"Generative Adversarial Nets"的学习笔记,若有错误,欢迎留言或私信指正. 1. Introduc ...

  3. Redis面试篇 -- Redis主从复制原理

        Redis一般是用来支撑读高并发的,为了分担读压力,Redis支持主从复制.架构是主从架构,一主多从, 主负责写,并且将数据复制到其它的 slave 节点,从节点负责读. 所有的读请求全部走从 ...

  4. div模拟select/option解决兼容性问题及增加可拓展性

    个人博客: http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式,比如line-height等,还会由此 ...

  5. 写mysql语句时tab键与空格键

    某网页上复制的一份mysql语句,报错,重写一遍后,好了,对比后,发现, 可以看到在sublime text中,网上复制的缩进是空白的,tab键是横杠,空格键是一个点

  6. CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?

    CSS 选择符有哪些? 1.id选择器(#id) 2.类选择器(.class) 3.标签选择器(div,h1,p) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器 ...

  7. React 项目引入 Dva

    背景 现在手上在做的 React 项目因为年代久远,用的 Redux,写代码的体验不太好,所以想升级一下引入 dva.以往使用 dva 都是使用 dva-cli 直接生成 dva 项目,或者在使用 a ...

  8. 网页布局——Flex弹性框布局

    布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 需要安卓4.4及以上版本可以使用 ...

  9. python编程基础之二

    交互式: 此处以windows为例:开始->运行->cmd,输入python 交互式界面 优点:即时,所见即所得 缺点:代码不可复用,根本无法进行维护 退出:exit() 代码是顺序执行: ...

  10. UDP方式的传输

    UDP 部分内容需要查文档学习,我们需要了解下面的两个类:java.net.DatagramSocket和java.net.DatagramPacket java.net.DatagramSocket ...