节点的替换:
1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针
2). 该节点除了替换功能以外还有移动的功能.
3). 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:
/**
* 互换 aNode 和 bNode
* @param {Object} aNode
* @param {Object} bNode
*/
function replaceEach(aNode, bNode){
if(aNode == bNode){
return;
}
var aParentNode = aNode.parentNode;
//若 aNode 有父节点
if(aParentNode){
var bParentNode = bNode.parentNode;
//若 bNode 有父节点
if(bParentNode){
var tempNode = aNode.cloneNode(true);
bParentNode.replaceChild(tempNode, bNode);
aParentNode.replaceChild(bNode, aNode);
}
}
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function(){
//1. 把 "东京" 节点替换为 "平壤"
var pr = document.createElement("li");
pr.appendChild(document.createTextNode("平壤"));
document.getElementById("city").replaceChild(pr, document.getElementById("dj"));
//2. 实现 #bj 和 #rl 之间的互换, 需要使用 cloneNode() 方法
var bj = document.getElementById("bj");
var rl = document.getElementById("rl");
//
// var city = document.getElementById("city");
// var game = document.getElementById("game");
//
// city.replaceChild(rl.cloneNode(true), bj);
// game.replaceChild(bj, rl);
replaceEach(rl, bj);
};
/**
* 互换节点
* @param {Object} aNode
* @param {Object} bNode
*/
function replaceEach(aNode, bNode){
var aParentNode = aNode.parentNode;
var bParentNode = bNode.parentNode;
//若 aNode 和 bNode 都存在父节点
if(aParentNode && bParentNode){
aParentNode.replaceChild(bNode.cloneNode(true), aNode);
bParentNode.replaceChild(aNode, bNode);
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id="dj">东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</body>
</html>
分享到：
相关推荐
jsdom-jscore 精简版以在 JavaScriptCore 上运行，将节点标准库依赖项替换为其他选项，通常基于浏览器。它有什么用？ 你需要在你的 react-native iOS 应用程序中从 jsdom（DOM、解析等）中获取一些东西——例如，...
12.5 访问和操纵DOM节点 12.5.1 打开每一个盒子--遍历节点 12.5.2 弄清层级关系--父子与兄弟 12.5.3 如何搜索特定节点 12.5.4 克隆节点--一个使用cloneNode()复制表格的例子 12.5.5 移动节点...
主要介绍了JS实现添加,替换,删除节点元素的方法,实例分析了javascript针对节点元素的替换、删除及常用的几种添加技巧,需要的朋友可以参考下
DOM 元素子节点的基于索引的集合操作方法。 应用程序接口 insertAt（元素，索引，父） 在特定索引处插入 DOM 元素。 moveAt（元素，索引，父） 将 DOM 元素移动到特定索引。 replaceAt（元素，索引，父） 替换...
本文实例总结了JavaScript节点及列表操作的方法。分享给大家供大家参考。具体如下： （1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建...
|--x.toFixed(num):可把Number四舍五入为指定小数位数(num:0-20)的数字 |--x.toString():用于把一个 Number 对象转换为一个字符串，并返回结果 19.正则表达式对象:(专门用于查找和验证) reg.test(‘要验证的完整...
15.2 理解DOM节点 15.3 节点 15.3.1 父节点和子节点 15.3.2 兄弟节点 15.3.3 nodeName和nodeType属性 15.3.4 空白bug 15.4 遍历DOM 15.5 DOM查看器 15.6 查询DOM的快捷...
形态 轻量级模块，用于变形现有DOM节点树以匹配目标DOM节点树。 它快速且可与真实DOM一起使用-无需虚拟DOM！ 创建此模块是为了解决响应于UI组件或页面被重新呈现而更新DOM的问题。 更新DOM的一种方法是简单地抛弃...
5.5.4 删除和替换节点 5.5.5 文本节点操作 5.6 对象的事件处理程序 5.7 浏览器兼容性策略 5.8 本章小结 第6章 String、Math、Array等数据对象 6.1 String对象 6.1.1 如何使用String对象方法操作字符串 6.1.2 获取...
《JavaScript基础教程(第8版)》循序渐进地讲述了JavaScript及相关的CSS、DOM、Ajax、jQuery等技术。书中从JavaScript语言基础开始，分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie，并在上...
上2篇文章我们讲了 用dom方式 创建节点，复制节点，插入节点, 删除节点，替换节点，查找节点，获取属性等。。。
5.5.4 删除和替换节点 5.5.5 文本节点操作 5.6 对象的事件处理程序 5.7 浏览器兼容性策略 5.8 本章小结 第6章 String、Math、Array等数据对象 6.1 String对象 6.1.1 如何使用String对象方法操作字符串 6.1.2 获取...
安装 npm install mock-local-storage --save-dev用法摩卡咖啡Mocha中的Require，它将替换global对象和window对象上的localStorage和sessionStorage ： mocha --require mock-local-storage如果您使用的是jsdom-...
删除5.DOM节点类型(元素和文本)6.DOM属性节点7.DOM高级操作 1. DOM的概念和作用 DOM 是 JavaScript操作网页的api接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript...
1.ionic中的ion-select标签添加图片 ...还会学到javaScript的一些知识（如：获取Dom节点、获取html元素、自定义html元素） 4.内附有详细的代码介绍以及各种注意细节，可供各位喜欢研究ionic的学者学习参考
替换：字符串或接收参数的函数（节点，匹配），其中“节点”是其中存在匹配的 DOM 节点，“匹配”结果数组（由 RegExp.prototype.exec() 返回） 因此，您可以简单地查找/替换字符串（例如，'keyboard' -> '...
3.2.6 替换节点 3.2.7 包裹节点 3.2.8 属性操作 3.2.9 样式操作 3.2.10 设置和获取HTML、文本和值 3.2.11 遍历节点 3.2.12 CSS—DOM操作 3.3 案例研究——某网站的超链接和图片提示效果 3.4 小结 第4章 jQuery中的...
ngTemplate 1.0 ngTemplate是一个轻量级的基于DOM的模板引擎，其灵感来自AngularJS。 在涉及表单之前， mustache.js ， Handlebars或_.template都...性能： ngTemplate通过状态差异修改DOM节点； 仅在必要时才接触DOM
第1章. JQuery概述 2 1. Jquery基本作用 2 ...4. 替换节点 9 5. 包裹节点 9 6. 属性操作 9 7. 样式操作 9 8. 设置和获取html,文本和值 10 9. 遍历节点 10 10. css-DOM 操作 10 第4章. jQuery的事件 12
3.6 替换节点/68 3.7 包裹节点/69 3.8 遍历元素/71 3.9 删除元素/73 3.10 综合案例分析—数据删除和图片预览在项目中的应用/75 3.10.1 需求分析/75 3.10.2 效果界面/75 3.10.3 功能实现/77 3.10.4 代码分析...