删除节点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. oracle将查询到的数据插入到数据库的表中

    一.Oracle数据库中,把一张表的查询结果直接生成并导入一张新表中.   例如:现有只有A表,查询A表,并且把结果导入B表中.使用如下SQL语句:   create table b as selec ...

  2. Linux下汇编语言学习笔记22 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  3. Linux下汇编语言学习笔记14 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  4. maven打包插件maven-shade-plugin简单介绍

    作用: 1.可以把依赖打入jar包,然后直接使用这个jar包,从而不用担心依赖问题 2.通过设置MainClass,创建一个可以执行的jar包 3.Java工程经常会遇到第三方 Jar 包冲突,使用 ...

  5. JAVA: 解决is expected to be of type but was actually of type com.sun.proxy.$Proxy的问题

    修改spring-config文件中的transactionManager部分为 <tx:annotation-driven proxy-target-class="true" ...

  6. iOS开发项目实战——Swift实现图片轮播与浏览

    近期開始开发一个新的iOS应用,自己决定使用Swift.进行了几天之后,发现了一个非常严峻的问题.那就是无论是书籍,还是网络资源,关于Swift的实在是太少了,随便一搜全都是OC实现某某某功能.就算是 ...

  7. redux 存值 及 取值 的操作

    项目目录 首先,一个基于React + Redux + React-Router的项目目录可以按照我下方的图片来构建: 其中assets目录用于存放项目的静态资源,如css/图片等,src目录则用于存 ...

  8. Linux/UNIX之进程环境

    进程环境 进程终止 有8种方式使进程终止,当中5中为正常终止,它们是 1)      从main返回 2)      调用exit 3)      调用_exit或_Exit 4)      最后一个 ...

  9. J2SE基础:11.异常处理

    1:异常的概念: 异常是程序在执行时发生的事件(异常发生在执行期间). 程序出现错误.打断原本的运行流程. 2:Java中处理异常. 在Java中.异常被封装成一个对象.(属性和方法) 3:异常产生 ...

  10. swift 笔记 (二十一) —— 高级运算符

    高级运算符 位运算符 按位取反: ~ 按位与运算:  & 按位或运算:  | 按位异或运算:  ^ 按位左移运算: << 按位右移动算: >> 溢出运算符 自从swif ...