删除节点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. 食物(bzoj 3280)

    Description 明明这次又要出去旅游了,和上次不同的是,他这次要去宇宙探险! 我们暂且不讨论他有多么NC,他又幻想了他应该带一些什么东西.理所当然的,你当然要帮他计算携带N件物品的方案数. 他 ...

  2. jQuery插件之ajaxFileUpload(ajax文件上传)

    一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数 ...

  3. Kerberos认证浅析

    1 引言 在希腊神话中Kerberos是守护地狱之门的一条凶猛的三头神犬,而我们在本文中所要介绍的Kerberos认证协议是由美国麻省理工学院(MIT)首先提出并实现的,是该校雅典娜计划的一部分.这个 ...

  4. HDU——2647 Reward

    Reward Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  5. codevs——1742 爬楼梯

    1742 爬楼梯  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 小明家外面有一个长长的楼梯,共N阶.小明的 ...

  6. Java高并发实战,锁的优化

    锁优化 这里的锁优化主要是指 JVM 对 synchronized 的优化. 自旋锁 互斥同步进入阻塞状态的开销都很大,应该尽量避免.在许多应用中,共享数据的锁定状态只会持续很短的一段时间.自旋锁的思 ...

  7. 纯css3实现按钮的 hover 和 active 时颜色的明暗变化效果

    效果:在任意HTML标签上增加样式类 f-color-control 就可以为此元素增加hover和avtive时颜色的变化; 代码如下: <!DOCTYPE html> <html ...

  8. 滚动载入server端内容——样例

    网页代码例如以下 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  9. hdu 1565 方格取数(1)(状态压缩dp)

    方格取数(1)                                                                 Time Limit: 10000/5000 MS (J ...

  10. Android网络爬虫程序(基于Jsoup)

    摘要:基于 Jsoup 实现一个 Android 的网络爬虫程序,抓取网页的内容并显示出来.写这个程序的主要目的是抓取海投网的宣讲会信息(公司.时间.地点)并在移动端显示,这样就可以随时随地的浏览在学 ...