`

dom文档节点操作-替换replaceChild()

阅读更多
replaceChild() 用新节点[可以是文档中某个已存在的节点,也可是新创建的节点]替换某个子节点。

语法:replaceChild(newnode,oldnode)

<ul id="myList"> 
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>
<button onclick="myFunction()">替换</button>

function myFunction()
{
   var textnode=document.createTextNode("Water");//创建文本节点
   var item=document.getElementById("myList").childNodes[0];//找到父节点
   //父节点的角度调用replaceChild(新,旧)方法进行替换
   item.replaceChild(textnode,item.childNodes[0]);
}

结果:
Water
Tea
Milk
分享到:
评论

相关推荐

    XMLDOM对象方法中文手册chm

    - `replaceChild`:替换已有的子节点。 - `cloneNode`:复制节点及其所有子节点。 - `normalize`:合并相邻的文本节点。 6. **DOM加载与保存** - `load`方法:加载XML文档到DOM树。 - `save`方法:将DOM树保存...

    DOM文档对象中文手册

    - **插入节点(Inserting Nodes)** - `appendChild()`、`insertBefore()`、`replaceChild()`等方法用于在文档树中添加、插入或替换节点。 - **删除节点(Removing Nodes)** - `removeChild()`方法用于删除指定的...

    DOM知识教程大全--讲述形象易理解

    - `replaceChild()`: 使用新的子节点替换现有的子节点。如`NodeA.replaceChild(NodeNew, NodeOld)`会用`NodeNew`替换`NodeOld`。 - `removeChild()`: 删除指定的子节点。例如,`NodeA.removeChild(NodeA2)`会移除`...

    DOM文档对象中文手册(chm).rar

    - **插入节点**: `appendChild()`、`insertBefore()`、`replaceChild()`用于在树中添加、插入或替换节点。 - **删除节点**: `removeChild()`方法移除指定的子节点。 - **修改节点**: `nodeValue`属性可改变文本...

    JS操作DOM元素属性和方法.pdf

    - `replaceChild(newNode, oldNode)`: 替换某个子节点为新的节点。 4. 获取和设置节点属性: - `getAttribute(name)`: 获取指定元素上的指定属性值。 - `setAttribute(name, value)`: 设置指定元素上的指定属性...

    在javascript中对于DOM的加强

    - 替换节点:使用replaceChild方法替换DOM树中的节点。 - 修改节点:可以修改节点的值,包括文本节点和元素节点的属性。 六、事件处理 JavaScript中的事件处理也是DOM的一部分,允许用户响应鼠标点击、键盘输入等...

    HTML DOM 文档

    - 文档节点:整个文档的顶级节点。 4. **选择和访问节点** - `getElementById()`:根据ID获取唯一元素。 - `getElementsByClassName()`和`getElementsByTagName()`:分别通过类名和标签名获取元素集合。 - `...

    文档对象模型(DOM)的帮助文档

    - `replaceChild(Node new, Node old)`:用新的节点替换旧的节点。 ##### NodeList 对象 - **定义**:`NodeList` 表示一个节点列表。 - **用途**:通常作为方法的结果返回,例如 `getElementsByTagName` 或者 `...

    DOM Node接口定义了所有节点类型都包含的特性和方法

    - `replaceChild(newNode, oldNode)`:用新节点替换旧节点。 4. **属性操作**: - `getAttribute(name)`和`setAttribute(name, value)`:获取或设置元素节点的属性值。 - `removeAttribute(name)`:删除元素...

    XML_DOM学习教程

    - **replaceChild()**: 替换指定的子节点。 **5. 创建节点** - **createElement()**: 创建新的元素节点。 - **createTextNode()**: 创建新的文本节点。 - **createAttribute()**: 创建新的属性节点。 **6. ...

    十三、前端基本功:DOM练习.rar

    - `replaceChild()`:用新的节点替换已有的子节点。 5. 事件处理: - `addEventListener()`:为元素添加事件监听器。 - `removeEventListener()`:移除事件监听器。 - `dispatchEvent()`:触发自定义事件。 6....

    DOM访问/创建/删除/修改文档节点及属性方法

    2. `replaceChild(newChild, oldChild)`: 用新节点替换旧节点。 修改文档节点 可以使用以下方法修改文档节点: 1. `appendData(string)`: 将字符串添加到文本节点的文本尾部。 2. `deleteData(offset, count)`: ...

    javascript 常用DomAPI总结

    - **Node.replaceWith()**: 用新的节点替换当前节点。 ##### 4. Document 节点 - **document.doctype**: 返回文档类型定义。 - **document.documentElement**: 返回当前文档的根节点。 - **document.defaultView**...

    JS_操作节点.doc

    - **replaceChild**:替换子节点列表中的指定子节点。 - **save**:保存XML文件到指定位置。 - **selectNodes**和**selectSingleNode**:根据XPath表达式选择节点。 掌握这些属性和方法是JavaScript DOM操作的基础...

    javascript

    - `replaceChild()`: 替换当前节点的一个子节点。 ### 实例应用 例如,要获取页面上具有特定ID的元素,可以使用`getElementById()`方法;如果需要改变某个元素的样式,可以通过`style`属性进行设置;当需要响应...

    php怎么得到dom元素.docx

    - `replaceChild`: 用新节点替换子节点列表中的指定子节点。 - `save`: 将XML文档保存到指定位置。 - `selectNodes` 和 `selectSingleNode`: 使用XPath表达式选择节点并返回结果列表或单个节点。 - `transform...

    DOM对象.docx

    - `replaceChild()`:用一个新节点替换一个已存在的节点。 通过这些操作,开发者可以轻松地修改文档的内容和结构,实现动态网页的效果。例如,可以在用户交互之后动态添加或移除页面元素,或者根据需要更改页面...

    第06章 DOM节点操作(下)

    在本章中,我们将深入探讨DOM(文档对象模型)节点操作的下半部分。DOM是HTML和XML文档的编程接口,允许我们通过JavaScript等脚本语言动态地修改、添加或删除网页内容。DOM节点操作是前端开发中的核心技能,对创建...

    详细讲解JS节点知识

    - `removeChild`、`replaceChild`:删除或替换子节点。 - `load`、`loadXML`:加载XML文档。 - `save`:保存XML到指定位置。 - `selectNodes`、`selectSingleNode`:根据XPath表达式选取节点。 - `transform...

Global site tag (gtag.js) - Google Analytics