文章目录

一、添加一个新元素
- (1)创建一个新的空元素对象
- (2)为新元素添加必要属性
- (3)将新元素添加到DOM树上指定父元素下，浏览器才能显示出新元素
- - a.在父元素下末尾追加新元素
  - b. 在父元素下插入到一个现有子元素之前
  - c. 替换父元素下的一个现有的子元素
二、删除元素
三、优化
- 1.父元素追加DOM树法
- 2.文档片段对象法

一、添加一个新元素

(1)创建一个新的空元素对象

var 新元素对象=document.createElement("标签名")

结果：<元素></元素>

示例：

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

↓

<a></a>

(2)为新元素添加必要属性

元素对象.属性名=新值

示例：

a.innerHTML="go to tmooc";
a.href="http://tmooc.cn";

↓

 <a href=" http://tmooc.cn "> go to tmooc </a>

(3)将新元素添加到DOM树上指定父元素下，浏览器才能显示出新元素

a.在父元素下末尾追加新元素

父元素.appendChild(新元素)

示例：

//1. 创建一个新的空元素等待
var a=document.createElement("a")//2. 为新元素对象设置必要属性
a.innerHTML="baidu";
a.href="http://www.baidu.com";//3. 将新元素添加到DOM树
document.body.appendChild(a);

b. 在父元素下插入到一个现有子元素之前

 父元素.insertBefore(新元素，现有子元素)

示例：

<script>var a = document.createElement("a");a.innerHTML="baidu";a.href="http://www.baidu.com";document.body.appendChild(a);//再创建一个文本框var input=document.createElement("input"); //input-><input/>// insertBefore：在已有的子节点前插入一个新的子节点document.body.insertBefore(input,a);
</script>

c. 替换父元素下的一个现有的子元素

父元素.replaceChild(新元素，现有子元素)

示例： 替换红盒子中的标题

<div id = "red"><h1>红盒子</h1>
</div>
<div id = "blue">蓝盒子</div>
<button id = "ok">替换</button><script>var ok = document.getElementById("ok");// 获取按钮元素的引用ok.onclick = function() {      // 为按钮注册一个鼠标单击事件处理函数var red = document.getElementById("red");        // 获取红色盒子的引用var h1 = document.getElementsByTagName("h1")[0];// 获取一级标题的引用var h2 = document.createElement("h2");            // 创建二级标题元素，并引用h2.innerHTML = '我是新来的';red.replaceChild(h2,h1);    // 把一级标题替换为二级标题}
</script>

结果：

二、删除元素

使用removeChild删除节点，节点所包含的所子节点都将同时被删除

父元素.removeChild(子元素)

示例： 删除红盒子中的h1

<div id = "red"><h1>红<b>盒</b>子</h1>
</div>
<div id = "blue">蓝盒子</div>
<button id = "ok">移动</button><script>var ok = document.getElementById("ok");    // 获取按钮元素的引用ok.onclick = function() {  // 为按钮注册一个鼠标单击事件处理函数var red = document.getElementById("red");       // 获取红色盒子的引用var h1 = document.getElementsByTagName("h1")[0];// 获取标题元素的引用red.removeChild(h1);  // 移出红盒子包含的标题元素}
</script>

↓

三、优化

只要修改DOM树的内容，几乎都会导致重排重绘。

频繁重排重绘，降低页面加载的效率。

所以我们应该 尽量减少修改DOM树次数， 但是，内容不能少！

1.父元素追加DOM树法

a. 如果同时添加父元素和子元素时，应该先将子元素添加到父元素，最后再将父元素一次性添加到DOM树上。

示例： 动态创建一个表格

<body><div id="data"><table><thead><tr><th>姓名</th><th>薪资</th><th>年龄</th></tr></thead></table></div><script>var json = [{ "ename": "Tom", "salary": 11000, "age": 25 },{ "ename": "John", "salary": 13000, "age": 28 },{ "ename": "Mary", "salary": 12000, "age": 25 }];//1. 创建tbody，暂时不要添加table中var tbody=document.createElement("tbody")//2. 遍历json数组中每个元素员工对象for(var emp of json){//每遍历一个员工对象，就创建一个tr，将tr追加到tbody中。var tr=document.createElement("tr");tbody.appendChild(tr);//3. 遍历当前这个员工对象中每个属性for(var 属性名 in emp){//每遍历一个属性，就创建一个td，追加到tr中var td=document.createElement("td")tr.appendChild(td);//将当前emp对象的当前属性值保存进td的内容中td.innerHTML=emp[属性名];}}//4. 循环结束后，tbody中已经包含了所有员工的tr和td。最后一次性将tbody追加到table中var table=document.querySelector("#data>table");table.appendChild(tbody);</script>
</body>

2.文档片段对象法

b. 如果父元素已经在页面上了，要添加多个平级子元素。就要借助于文档片段对象来实现

文档片段对象：内存中临时保存多个平级子元素的虚拟父元素

i. 先创建文档片段对象
var 文档片段对象=document.createDocumentFragment();

ii. 将子元素先添加到文档片段对象中
文档片段对象.appendChild(子元素)

iii. 将文档片段对象一次性添加到页面上
父元素.appendChild(文档片段对象);

示例： 动态创建一个表格

<body><div id="data"><table><thead><tr><th>姓名</th><th>薪资</th><th>年龄</th></tr></thead><tbody></tbody></table></div><script>var json = [{ "ename": "Tom", "salary": 11000, "age": 25 },{ "ename": "John", "salary": 13000, "age": 28 },{ "ename": "Mary", "salary": 12000, "age": 25 }];//1. 创建文档片段对象var frag=document.createDocumentFragment();//2. 遍历json数组中每个元素员工对象for(var emp of json){//每遍历一个员工对象，就创建一个tr，将tr追加到文档片段中。var tr=document.createElement("tr");frag.appendChild(tr);//3. 遍历当前这个员工对象中每个属性for(var 属性名 in emp){//每遍历一个属性，就创建一个td，追加到tr中var td=document.createElement("td")tr.appendChild(td);//将当前emp对象的当前属性值保存进td的内容中td.innerHTML=emp[属性名];}}//4. 循环结束后，文档判断对象中已经包含了所有员工的tr和td。最后一次性将文档片段对象追加到tbody中var tbody=document.querySelector("#data>table>tbody");tbody.appendChild(frag);</script>
</body>

DOM（三）——创建删除元素及优化（文档片段）相关推荐

ElasticSearch教程——创建索引、类型、文档
ElasticSearch汇总请查看:ElasticSearch教程--汇总篇介绍索引是ElasticSearch存放数据的地方,可以理解为关系型数据库中的一个数据库.事实上,我们的数据被存储和索 ...
ES篇：ElasticSearch教程——创建索引、类型、文档
ES知识汇总:https://blog.csdn.net/gwd1154978352/article/details/82781731 介绍索引是ElasticSearch存放数据的地方,可以理解为 ...
c#取消word修订痕迹_C# 设置、删除、读取Word文档背景——基于Spire.Cloud.Word
Spire.Cloud.Word.Sdk提供了接口SetBackgroudColor().SetBackgroudImage().DeleteBackground().GetBackgroudColo ...
一篇小短文教你如何创建《标准的HTML文档》
文章目录一.初识HTML 二.创建一个标准的HTML文档三.HTML标签语法四.HTML注释.代码书写规范五.HTML标签属性六.HTML的元素七.HTML文档结构一.初识HTML HT ...
仿百度文库方案[openoffice.org 3+swftools+flexpaper](三) 之使用JODConverter将office文档转换为pdf...
第三步,使用JODConverter将office文档转换为pdf JODConverter是一个java的OpenDucument文件转换器,可以进行许多文件格式的转换,它利用 OpenOffice ...
掌握XML系列(四)---创建格式良好的XML文档
掌握XML系列(四)---创建格式良好的XML文档前言:创建良好格式的XML文档,虽然写了这些,其实,等到大家真正的看完之后美酒会发现,其实也很简单的,我们这里所做的是带着大家全面的看看怎么样创建. ...
[官方] mysql 性能优化文档（中英文自译）
大家好,我是烤鸭: 根据官方文档翻译并精简部分内容.建议有时间的朋友下载原版查看,全文106页pdf,快的话1-2天就能看完.自己翻译的有些地方可能不完整,欢迎指正. 官方pdf下载,需登录: htt ...
【itext学习之路】--1.创建一个简单的pdf文档
来源:https://blog.csdn.net/tomatocc/article/details/80666011 iText是著名的开放源码的站点sourceforge一个项目,是用于生成PDF文 ...
python27是什么文件夹可以删除吗_python如何跳过错误继续运行，同时删除产生错误的文档...
python如何跳过错误继续运行,同时删除产生错误的文档0 因为我用的package有bug有些文档不能处理当程序在读取这个文件的时候会出现math domain error,所以我现在要实现的目的就 ...

DOM（三）——创建删除元素及优化（文档片段）

文章目录

一、添加一个新元素

(1)创建一个新的空元素对象

(2)为新元素添加必要属性

(3)将新元素添加到DOM树上指定父元素下，浏览器才能显示出新元素

a.在父元素下末尾追加新元素

b. 在父元素下插入到一个现有子元素之前

c. 替换父元素下的一个现有的子元素

二、删除元素

三、优化

1.父元素追加DOM树法

2.文档片段对象法

DOM（三）——创建删除元素及优化（文档片段）相关推荐

最新文章

热门文章