删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。

语法:

nodeObject.removeChild(node)

参数:

node :必需,指定需要删除的节点。

我们来看看下面代码,删除子点。

运行结果:

HTML
删除节点的内容: javascript

注意: 把删除的子节点赋值给 x,这个子节点不在DOM树中,但是还存在内存中,可通过 x 操作。

如果要完全删除对象,给 x 赋 null 值,代码如下:

替换元素节点replaceChild()

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

语法:

node.replaceChild (newnode,oldnew ) 

参数:

newnode : 必需,用于替换 oldnew 的对象。 
oldnew : 必需,被 newnode 替换的对象。

我们来看看下面的代码:

效果: 将文档中的 Java 改为 JavaScript。

注意: 

1. 当 oldnode 被替换时,所有与之相关的属性内容都将被移除。

2. newnode 必须先被建立。

任务

试一试,补充函数 replaceMessage() 代码,实现将 b 标签替换成 i 标签。

JavaScript--DOM删除节点removeChild()的更多相关文章

  1. 删除节点removeChild()

    http://www.imooc.com/code/1700 删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点.如删除成功,此方法可返回被删除的节点,如失 ...

  2. javascript DOM操作 节点的遍历

    通过javascript的遍历可以由一个节点来查找它的子节点(childNodes).兄弟节点(nextSibling/previousSibling)和父节点(parentNode). 代码说明: ...

  3. JavaScript的DOM操作(节点操作)

    创建节点createElement()var node = document.createElement(“div”);没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(docum ...

  4. JavaScript HTML DOM元素节点常用操作接口

    在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...

  5. javascript DOM对象(2)

    访问兄弟节点 1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中). 语法: nodeObject.nextSibling 说明:如果无此节点,则该属性返回 null. ...

  6. Java web JavaScript DOM 编程

     JavaScript DOM 编程 (1).DOM概述及分类 (2).DOM结构模型:XML DOM 和 HTML DOM 关系? (3).结点,结点树,结点属性与方法? 1.DOM是什么? d ...

  7. javascript Dom 编程

     javascript Dom  编程 知识概要: (1)Dom是什么? (2)Dom结构模型 (3)XML DOM和 HTML DOM (4)NODE接口的特性和方法 (5)DOM结点的常用属性 ...

  8. 前端基础:JavaScript DOM对象

    JavaScript DOM对象 通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(D ...

  9. javascript DOM基本操作

    javascript DOM基本操作 1.DOM(Document Object Model 文档对象模型) 2.节点: 文档节点:document 元素节点:html.head.body.title ...

随机推荐

  1. POJ3107 树的重心

    题解:只不过如果有求多个点,输出所有方案. #include<cstring> #include<cmath> #include<iostream> #includ ...

  2. [bzoj2962]序列操作_线段树_区间卷积

    序列操作 bzoj-2962 题目大意:给定一个n个数的正整数序列,m次操作.支持:1.区间加:2.区间取相反数:3.区间求选c个数的乘积和. 注释:$1\le n,m\le 5\cdot 10^4$ ...

  3. IDUtil 永不重复的ID

    package com.xxx.common.util; import java.util.Random; /** * 各种id生成策略 * * @version 1.0 */ public clas ...

  4. 七牛云上传图片到cdn,cdn返回的是一个只有图片的url

    如:

  5. Port forwarding with xinetd Ask

    https://stackoverflow.com/questions/21716673/port-forwarding-with-xinetd --------------------------- ...

  6. mingw32-gcc.exe: error: CreateProcess: No such file or directory

    用code::blocks在windows平台下,搭建object c编译环境时,出现这个错误. 解决的方法: 将setting -> compliler -> Toolchain exe ...

  7. 改动select默认样式,兼容IE9

    前面有篇文章已经提供了怎样改动select标签的默认样式,可是仅仅能兼容到ie10,要兼容ie9仅仅能模拟一个类似的 html结构: <div class="select_diy&qu ...

  8. 一个最简单的Servlet实例

    先在tomcat的webapps目录下,新建一目录,如test.然后,在test目录下建立WEB-INF为名的目录.这个必须有. 然后,在WEB-INF目录下建立classes目录.用以存储所用到的c ...

  9. [WebGL入门]五,矩阵的基础知识

    注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上[lufy:],另外.鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指 ...

  10. easyui中点击datagrid的分页刷新按钮,数据无法更新到最新状态

    原因分析:点击刷新按钮是对当前页数据进行reload,因此所传的请求参数皆为上一次加载当前页的参数即datagrid的load方法中的参数,主要是因为请求的最终时间无法更新到最新状态 解决方案:对点击 ...