删除节点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. 国内程序员的十大疑问之一:为什么老外不愿意用MyBatis?

    老外用MyBatis吗 昨天我在我在知乎看到了一张比较Hibernate和MyBatis使用情况的图,顺手发了条朋友圈: Hibernate vs MyBatis ,谁能告诉我什么样的国情导致了这么大 ...

  2. 【错误解决】 java.lang.ClassNotFoundException: org.apache.jsp.WEB_002dINF.classes.views.index_jsp

    转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自[大学之旅_谙忆的博客] 今天建立Spring MVC骨架的时候,突然遇到这么一个问题~~ HTTP Stat ...

  3. 守护进程详解及创建,daemon()使用

    一,守护进程概述 Linux Daemon(守护进程)是运行在后台的一种特殊进程.它独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件.它不需要用户输入就能运行而 且提供某种服务,不是对整 ...

  4. Thinkphp5.0 的使用模型Model添加数据

    Thinkphp5.0 的使用模型Model添加数据 使用create()方法添加数据 $res = TestUser::create([ 'name' => 'zhao liu', 'pass ...

  5. ***CSS总结-原创

    CSS规则 第一个是:选择符.和jquery的选择器是一个意思大括号是:申明块里面KV是:属性和属性值分号是结束符 类别选择符(器) p.red的意思,就是对p标签中类为red的进行CSS作用 ID选 ...

  6. python之练习-三层菜单

    今天练习编写显示3层城市名称并可以返回上一层以及退出程序. Readme: 程序概述1:程序名称为:menu_three.py2:记录省,市,县的原始文件名为:areafile3:areafile文件 ...

  7. Model、ModelMap、ModelAndView的使用和区别

    1.Model的使用 数据传递:Model是通过addAttribute方法向页面传递数据的: 数据获取:JSP页面可以通过el表达式或C标签库的方法获取数据: return:return返回的是指定 ...

  8. 上下文( Contexts )

    在 Indy9 的服务器中,链接特定(connection specific)的数据被作为线程类的一部分被存储. 实现这个要不然通过使用 thread.data 属性要不然通过继承对应的 thread ...

  9. Open Flash Chart IO ERROR Loading test data Error #2032

    http://blog.sina.com.cn/s/blog_6754464e0100qfvd.html Open Flash Chart 2 提示Open Flash Chart IO ERROR ...

  10. Matplotlib作图基础

    折线图 import matplotlib.pylab as pylab import numpy as npy x=[1,2,3,4,8] y=[5,7,2,1,5] #折线图 pylab.plot ...