节点的替换:
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>
分享到：
相关推荐
根据提供的文件信息，我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术（第2版）》。尽管实际书籍内容并未给出，但从标题、描述及部分链接信息来看，这本书主要涉及JavaScript...
例如，遍历找到特定元素后添加样式、移除节点或替换内容。 7. **性能考虑** - 大量遍历DOM可能会影响页面性能，因此应尽量减少操作。可以使用`createDocumentFragment`创建一个虚拟DOM，先在此处进行操作，最后再...
`appendChild`用于在元素末尾添加子节点，`insertBefore`则可在指定子节点前插入新节点，`replaceChild`则替换已有子节点。 4. **属性操作**：`element.getAttribute()`用来获取元素属性值，`element.setAttribute...
在JavaScript中，可以使用DOM API轻松创建新的节点，并将其添加到现有的DOM树中。例如，创建一个新的`<div>`元素并将其添加到页面上： ```javascript var newDiv = document.createElement("div"); newDiv.innerHTML...
4. **DOM节点**：包括元素节点、文本节点、属性节点等，每个节点都有自己的属性和方法，如`nodeValue`用于获取或设置文本节点的值，`parentNode`指向父节点，`childNodes`则返回子节点的集合。 5. **选择元素**：`...
2. **访问DOM节点** - **getElementById**：通过ID获取元素，如`document.getElementById('myId')`。 - **getElementsByClassName**：通过类名获取元素集合，如`document.getElementsByClassName('myClass')`。 -...
事件可以绑定到任何DOM节点上，如点击（click）、鼠标移动（mousemove）等，从而实现交互效果。 六、DOM性能优化 DOM操作往往会导致浏览器重新渲染，频繁操作可能会影响页面性能。为了优化，可以： 1. 使用文档碎片...
5. HTML DOM节点树 - HTML文档的结构通过节点树体现，每个元素、属性和文本都是树中的一环，具有父节点、子节点、同辈节点等概念。 6. DOM操作 - 访问节点：通过`getElementById`、`getElementsByTagName`等方法...
DOM是 Document Object Model的缩写，由W3C进行标准化。文档对象模型(DOM)是一个基础性概念，主要涉及网页页面元素...介绍DOM中的节点操作，主要包括:节点插入与追加、节点复制、节点删除与替换、修改节点内容等知识。
### JavaScript DOM 节点 API 个人总结 #### 文档概述 本文档旨在总结JavaScript中DOM（Document Object Model）节点API的基本用法及其在实际开发中的应用。通过深入理解这些API，开发者能够更加灵活地操控网页文档...
- `Node`接口：是所有DOM节点的基类，包含通用的节点操作方法，如`appendChild()`、`removeChild()`、`replaceChild()`等。 - 属性访问：通过`.`操作符获取或修改元素的属性，例如`element.style.color`可以改变...
每个DOM节点都有一系列的属性，如`nodeType`、`nodeName`、`nodeValue`等，它们分别表示节点类型、节点名称和节点值。例如，元素节点的`nodeType`为1，文本节点的`nodeType`为3。 #### 遍历节点树 DOM提供了遍历...
在JavaScript中，我们可以利用DOM API来创建、删除、修改或者查找这些节点，从而实现对网页内容的动态操作。 在这个"JavaScript-DOM实战案例"中，包含了两个主要的资源部分：`css`和`img`。 1. **CSS（Cascading ...
《JavaScript DOM编程艺术》这本书对于初学者来说非常友好，它不仅介绍了DOM的基本概念，还深入讲解了DOM的操作方法，包括创建、复制、插入、删除、替换、处理及查找节点等。本文将根据书中的内容摘要，重点解析DOM...
在实现广告文字特效时，可能需要动态创建或替换DOM节点，以达到预期的视觉效果。 6. **CSS3动画**：除了JavaScript，现代浏览器还支持CSS3动画，这也可以用于创建文字突显效果。开发者可能会结合JavaScript与CSS3...
JavaScript DOM编程艺术是一本专为前端开发者准备的基础教程，它深入浅出地讲解了如何使用JavaScript操作DOM（Document Object Model）来实现动态网页效果。DOM是HTML和XML文档的结构化表示，允许程序和脚本动态更新...
本文将深入探讨DOM在JavaScript中的应用，包括DOM的基本概念、节点类型、节点层次结构和如何查找并操作DOM节点。 一、DOM概念 DOM是Document Object Model（文档对象模型）的缩写，是一种以树状结构来表示HTML或XML...
3. **操作DOM节点**：包括创建新节点、插入节点、删除节点和替换节点的方法，如`createElement`、`appendChild`、`removeChild`、`replaceChild`。 4. **属性操作**：如何获取和设置元素的属性，如`getAttribute`、`...
- `parentElement.replaceChild(newNode, oldNode)`：用新节点替换旧节点。 #### 四、DOM 事件处理 - **绑定事件**： - `element.addEventListener(event, function)`：为指定元素添加事件监听器。 - `element....
- **replaceChild(newNode, oldNode)**: 替换子节点。 - **scrollIntoView(alignWithTop)**: 将元素滚动到视口内。 - **Form** - **submit()**: 提交表单。 - **Range** - **collapse(toStart)**: 收缩范围。 ...