删除节点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. hihoCoder#1119 小Hi小Ho的惊天大作战:扫雷·二

    原题地址 没有复杂算法,就是麻烦,写起来细节比较多,比较考验细心,一次AC好开心. 代码: #include <iostream> #include <vector> #inc ...

  2. [luoguP1472] 奶牛家谱 Cow Pedigrees(DP)

    传送门 一个深度为i的树可以由一个根节点外加两个深度为i-1的树组成,这就决定了DP该怎么写. 然而我真的没有想到. f[i][j]表示深度为i节点数为j的个数 sum[i][j]表示深度小于等于i节 ...

  3. hnuun 11544 小明的烦恼——找字符串(求环形字符串的最小最大字典序)

    http://acm.hunnu.edu.cn/online/?action=problem&type=show&id=11544&courseid=0 最小最大表示法: 求环 ...

  4. HDU 5640 King's Cake【模拟】

    题意: 给定长方形,每次从中切去一个最大的正方形,问最终可以得到多少正方形. 分析: 过程类似求gcd,每次减去最小的边即可. 代码: #include <cstdio> #include ...

  5. JS中的apply、call、bind区别

    apply.call.bind 用法 1:作用 改变函数运行时的上下文,即改变this的指向问题. xxxFunction.call(this,arg1,arg2,arg3); xxxFunction ...

  6. webpack 输出多个文件

    http://react-china.org/t/webpack/1870/2 webpack 文章 entry = { "button": "demo/button/i ...

  7. kafka-manager 的编译和使用(附安装包)

    kafka-manager 的编译和使用(附安装包) 学习了:https://my.oschina.net/wangjiankui/blog/653139

  8. Office Excel找不到PERSONAL.XLS怎么办

    网上有人说这个文件在XLSTART里面,但是我里面没东西   打开PERSONAL.XLS的情况下,点击文件,属性,弹出窗口就有他的位置   你还是直接用Everything搜索一下吧.

  9. MTK Camera驱动移植

    对于MTK Camera驱动移植一般分为四部分: 1.硬件IO口配置: 2.Camera驱动移植: 3.上电时序. 4.改动i2c控制器: 硬件电路: 1.GPIO配置 打开 mediatek\dct ...

  10. 带头尾和动画的下拉刷新RecyclerView

    项目地址:https://github.com/shichaohui/AnimRefreshRecyclerView 项目中包括一个demo(普通Androidproject)和Android Lib ...