首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript之DOM插入更新删除_动力节点Java学院整理

Posted in Javascript onJuly 03, 2017

JavaScript之DOM插入更新删除，供大家参考，具体内容如下

更新

拿到一个DOM节点后，我们可以对它进行更新。

可以直接修改节点的文本，方法有两种：

一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的内部结构已修改

用innerHTML时要注意，是否需要写入HTML。如果写入的字符串是通过网络拿到了，要注意对字符编码来避免XSS攻击。
第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id"><script>alert("Hi")</script></p>

两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent。
修改CSS也是经常需要的操作。DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize：

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

插入

当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？
如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。
如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点。
有两个办法可以插入新的节点。一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点。例如：

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</div>

把<p id="js">JavaScript</p>添加到<div id="list">的最后一项：

var
  js = document.getElementById('js'),
  list = document.getElementById('list');
list.appendChild(js);

现在，HTML结构变成了这样：

<!-- HTML结构 -->
<div id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
  <p id="js">JavaScript</p>
</div>

因为我们插入的js节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。
更多的时候我们会从零创建一个新的节点，然后插入到指定位置：

var
  list = document.getElementById('list'),
  haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

这样我们就动态添加了一个新的节点：

<!-- HTML结构 -->
<div id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
  <p id="haskell">Haskell</p>
</div>

动态创建一个节点然后添加到DOM树中，可以实现很多功能。举个例子，下面的代码动态创建了一个<style>节点，然后把它添加到<head>节点的末尾，这样就动态地给文档添加了新的CSS定义：

var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

可以在Chrome的控制台执行上述代码，观察页面样式的变化。

insertBefore

如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。
还是以上面的HTML为例，假定我们要把Haskell插入到Python之前：

<!-- HTML结构 -->
<div id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</div>

可以这么写：

var
  list = document.getElementById('list'),
  ref = document.getElementById('python'),
  haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

新的HTML结构如下：

<!-- HTML结构 -->
<div id="list">
  <p id="java">Java</p>
  <p id="haskell">Haskell</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</div>

可见，使用insertBefore重点是要拿到一个“参考子节点”的引用。很多时候，需要循环一个父节点的所有子节点，可以通过迭代children属性实现：

var
  i, c,
  list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
  c = list.children[i]; // 拿到第i个子节点
}

删除

删除一个DOM节点就比插入要容易得多。
要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。
当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新。

例如，对于如下HTML结构：

<div id="parent">
  <p>First</p>
  <p>Second</p>
</div>

当我们用如下代码删除子节点时：

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错

浏览器报错：parent.children[1]不是一个有效的节点。原因就在于，当<p>First</p>节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。

因此，删除多个节点时，要注意children属性时刻都在变化。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JavaScript之DOM插入更新删除_动力节点Java学院整理

- Author -

liaoxuefeng

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
jquery的live使用注意事项
Feb 18 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 #Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 #Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 #Javascript
javaScript中封装的各种写法示例（推荐）
Jul 03 #Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 #Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 #Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 #Javascript
移动开发(2) OpenLayer(1) Sqlite(2) android studio(3) Spring Boot(5) Spring-Retry(1) 多线程(6) 多维数组(1) IDEA(2) EventBus(1)
You might like
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
php限制文件下载速度的代码
2015/10/20 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
Python复制文件操作实例详解
2015/11/10 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
python多维数组分位数的求取方式
2020/03/03 Python
python Selenium 库的使用技巧
2020/10/16 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
品质管理部岗位职责范文
2014/03/01 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
门市房租房协议书
2014/12/04 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
2015学校年度工作总结
2015/05/11 职场文书