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

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攻击。
第二种是修改innerTexttextContent属性,这样可以自动对字符串进行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属性时刻都在变化。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-07-01

js操作DOM--添加、删除节点的简单实例

js removeChild() 用法 <body> <p id="p1">welcome to <b>javascript</b> world !</p> <script language="javascript" type="text/javascript"> <!-- function nodestatus(node) { var temp=""

JavaScript DOM节点操作实例小结(新建,删除HTML元素)

本文实例讲述了JavaScript DOM节点操作方法.分享给大家供大家参考,具体如下: 使用DOM可以新建HTML元素,也可以删除已有的HTML元素. (一)新建元素: <script> //创建新的 <p> 元素 var newEle=document.createElement("p"); //创建文本节点 var node=document.createTextNode("这是使用Javascript创建的新段落."); //将文本节

利用vue.js插入dom节点的方法

本文主要介绍的是vue.js插入dom节点的方法,下面话不多说,来看看详细的介绍吧. html代码: <div id="app"></div> js代码: var MyComponent = Vue.extend({ template: '<div>Hello World</div>' }) var myAppendTo = Vue.extend({ template:'<p>appendTo</p>' }) va

javascript 删除dom对象的事件函数代码

JS添加/删除事件在IE和支持dom浏览器分别为:attachEvent(ie中的添加事件),detachEvent(ie中的删除事件),addEventListener(支持dom浏览器中的添加事件),removeEventListener(支持dom浏览器中的删除事件). 例如第一次点击黑色区域的时候弹出警告,并移除click事件,也就是第二次再点击的时候就没反应了,整合代码如下: 添加删除事件 var EventUtil=new Object; //oTarget:目标:sEventTyp

JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)

http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html , 在回来看这里文章,你一定会有更深刻的认识.因为我在这里介绍概念上的东西比较少,看下面的例子,对初学的朋友可能会有些吃力! 1.DOM的架构 复制代码 代码如下: <html> <head> <title>document</title> </head> <body> <h1>CSS Demo<

javascript DOM操作之动态删除TABLE多行

DOM动态删除TABLE多行 function $(objId){ return document.getElementById(objId); } function del_tbl(tblN,ckN){ var ck = document.getElementsByName(ckN); var tab = $(tblN); var rowIndex; for(var i=0;i 2 3 第一行 1 第二行 2 第三行 3 第四行 4 第五行 5 [Ctrl+A 全选 注:如需引入外部Js需刷新

JavaScript中对DOM节点的访问、创建、修改、删除

DOM DOM就是Document object Model的缩写.文档对象模型是把XML或HTML以树节点为表现形式的文档.用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素.DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript 看看下面的一个文本. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/

JavaScript中数组添加值和访问值常见问题

通过本文给大家介绍关于数组方面的一些小问题,或许对大家有点帮助,本文写的不好,还请各位大侠见谅. 1. // var arr = [,,]; // arr["bbb"]="nor "; // arr[-]="nor "; // console.log(arr); >> [, , , bbb: "nor ", -: "nor "] // console.log(arr.bbb) >>

DOM节点的替换或修改函数replaceChild()用法实例

本文实例讲述了DOM节点的替换或修改函数replaceChild()用法.分享给大家供大家参考.具体分析如下: DOM节点的替换过程: (1)创建新的节点: (2)找到旧的节点: (3)站在父节点的角度,使用replaceChild(新,旧)函数来替换. 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  //思路:1.首先找到要替换的节点:2. 创建一个新的

Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法

本文实例讲述了Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法.分享给大家供大家参考,具体如下: 1.简介 本扩展包添加了两个视图相关的Artisan命令到Laravel应用,以便我们通过Artisan命令即可创建和管理视图文件,可谓是进一步解放了生产力. 2.安装 还是通过Composer安装: composer require sven/artisan-view 安装完成后到config/app.php中注册服务提供者ArtisanViewServiceProv

浅析javascript中的DOM

什么是Dom? 1.简介 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.Document Object Model的历史可以追溯至1990年代后期微软与Netscape的"浏览器大战",双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能.微软在网页技术上加入了不少专属事物,计有VBScript.ActiveX.以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览

JavaScript操作HTML DOM节点的基础教程

因为 DOM 的存在,这使我们可以通过 JavaScript 来获取.创建.修改.或删除节点. NOTE:下面提供的例子中的 element 均为元素节点. 获取节点 父子关系 element.parentNode element.firstChild/element.lastChild element.childNodes/element.children 兄弟关系 element.previousSibling/element.nextSibling element.previousElem

在javascript中对于DOM的加强

一.DOM DOM: DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.换句话说,这是表示和处理一个HTML或XML文档的常用方法.有一点很重要,DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言.D:文档 – html 文档 或 xml 文档O:对象 – document 对象的属性和方法M:模型DOM 是针对xml(html)的基于树的API.DOM树:节点(node)的层次.

js和jquery对dom节点的操作(创建/追加)

复制代码 代码如下: <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#Button1').click(function () { // var ha = '<p>a</p>'; // $('div').app

浅谈javascript中的DOM方法

1:获取对象的三种方法 1)document.getElementById(id);通过对象的属性id来获取; 2)element.getElementByTagName(tag);通过标签名来获取; 3)element.getElementByClassName(class);通过属性类名来获取; 2:属性的set和get方法. 1)object.getAttribute(attribute);获取元素的属性.===>>>HTMLDOM: object.attribute; 2)obj