`

DOM 删除节点

阅读更多

 

removeChild() 方法删除指定节点。

removeAttribute() 方法删除指定属性。

实例

下面的例子使用 XML 文件 books.xml

函数 loadXMLDoc() ,位于外部 JavaScript 中,用于加载 XML 文件。

删除元素节点
本例使用 removeChild() 来删除第一个 <book> 元素。
删除当前元素节点
本例使用 parentNode 和 removeChild() 来删除当前的 <book> 元素。
删除文本节点
本例使用 removeChild() 来删除第一个 <title> 元素的文本节点。
清空文本节点的文本
本例使用 nodeValue() 属性来清空第一个 <title> 元素的文本节点。
根据名称删除属性
本例使用 removeAttribute() 从第一个 <book> 元素中删除 "category" 属性。
根据对象删除属性
本例使用 removeAttributeNode() 删除 <book> 元素中的所有属性。

删除元素节点

removeChild() 方法删除指定的节点。

当一个节点被删除时,其所有子节点也会被删除。

下面的代码片段将从载入的 xml 中删除第一个 <book> 元素:

xmlDoc=loadXMLDoc("books.xml");

y=xmlDoc.getElementsByTagName("book")[0];

xmlDoc.documentElement.removeChild(y); 

例子解释:

  • 通过使用 loadXMLDoc() 把 "books.xml " 载入 xmlDoc 中
  • 把变量 y 设置为要删除的元素节点
  • 通过使用 removeChild() 方法从父节点删除元素节点

TIY

删除自身 - 删除当前的节点

removeChild() 方法是唯一可以删除指定节点的方法。

当你已定位需要删除的节点时,就可以通过使用 parentNode 属性和 removeChild() 方法来删除此节点:

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book")[0];

x.parentNode.removeChild(x); 

例子解释:

  • 通过使用 loadXMLDoc() 把 "books.xml " 载入 xmlDoc 中
  • 把变量 y 设置为要删除的元素节点
  • 通过使用 parentNode 属性和 removeChild() 方法来删除此元素节点

TIY

删除文本节点

removeChild() 方法可用于删除文本节点:

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title")[0];

y=x.childNodes[0];
x.removeChild(y); 

例子解释:

  • 通过使用 loadXMLDoc() 把 "books.xml " 载入 xmlDoc 中
  • 把变量 x 设置为第一个 title 元素节点
  • 把变量 y 设置为 要删除的文本节点
  • 通过使用 removeChild() 方法从父节点删除节点

TIY

不太常用 removeChild() 从节点删除文本。可以使用 nodeValue 属性代替它。请看下一段。

清空文本节点

nodeValue 属性可用于改变或清空文本节点的值:

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue=""; 

例子解释:

  • 通过使用 loadXMLDoc() 把 "books.xml " 载入 xmlDoc 中
  • 把变量 x 设置为第一个 title 元素的文本节点
  • 使用 nodeValue 属性来清空文本节点的文本

TIY

循环并更改所有 <title> 元素的文本节点:TIY

根据名称删除属性节点

removeAttribute(name) 方法用于根据名称删除属性节点。

Example: removeAttribute('category')

下面的代码片段删除第一个 <book> 元素中的 "category" 属性:

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book");
x[0].removeAttribute("category"); 

例子解释:

  • 通过使用 loadXMLDoc() 把 "books.xml " 载入 xmlDoc 中
  • 使用 getElementsByTagName() 来获取 book 节点
  • 从第一个 book 元素节点中删除 "category" 属性

TIY

遍历并删除所有 <book> 元素的 "category" 属性:TIY。

根据对象删除属性节点

removeAttributeNode(node) 方法通过使用 Node 对象作为参数,来删除属性节点。

Example: removeAttributeNode(x)

下面的代码片段删除所有 <book> 元素的所有属性:

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book");

for (i=0;i<x.length;i++)
{
while (x[i].attributes.length>0)
  {
  attnode=x[i].attributes[0];
  old_att=x[i].removeAttributeNode(attnode);
  }
}

例子解释:

  • 通过使用 loadXMLDoc() 把 "books.xml " 载入 xmlDoc 中
  • 使用 getElementsByTagName() 来获取所有 book 节点
  • 检查每个 book 元素是否拥有属性
  • 如果在某个 book 元素中存在属性,则删除该属性
分享到:
评论

相关推荐

    删除DOM节点 删除DOM节点

    删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点...

    XML应用开发(软件品牌)-1期 6.6 课堂实践-XML DOM删除节点.doc

    本篇我们将聚焦于XML DOM删除节点的实践,通过两个具体任务来深入理解这一过程。 首先,我们需要了解DOM的基本概念。DOM是一种W3C标准,它定义了XML文档的结构以及如何通过编程接口与XML数据交互。在DOM模型中,每...

    XML应用开发(软件品牌)-1期 6.6 案例分析-XML DOM删除节点.doc

    在本文中,我们将深入探讨XML文档对象模型(DOM)中的删除节点操作,这是XML应用开发中的一个重要技能。DOM允许我们以编程方式操作XML文档,包括添加、修改和删除节点。以下将详细介绍如何删除元素节点和属性节点。 ...

    dom节点的添加与删除

    dom节点的添加与删除适合初级阅读,有解说

    JS实现DOM删除节点操作示例

    在Web开发中,对DOM(文档对象模型)进行动态操作是实现网页动态交互的基础...以上就是关于JS实现DOM删除节点操作的知识点总结,希望本文的内容能够对JavaScript程序设计有所帮助,让大家在进行Web开发时更加得心应手。

    jQuery DOM删除节点操作指南

    ### jQuery DOM删除节点操作指南知识点 #### 1. jQuery DOM操作简介 jQuery是一个快速、小巧且功能丰富的JavaScript库,它简化了HTML文档遍历和操作、事件处理、动画以及Ajax交互等操作。在进行DOM操作时,我们...

    前端教程:65 dom 删除空白节点

    千锋Web前端教程_65_dom_删除空白节点

    解决XML节点删除后会留下一个空节点的问题

    删除节点时,如果只是简单地设置其父节点的子节点列表,可能会使被删除节点的位置变成一个空节点。这是因为DOM树中的位置仍然保留,但内容为空。 要解决这个问题,我们可以采取以下策略: 1. **使用正确的API**:...

    超全面javaweb教程第6天- 12 使用dom4j实现删除节点的操作

    超全面javaweb教程第6天-_12_使用dom4j实现删除节点的操作

    第06章 DOM节点操作(上)

    4. **删除节点**:`removeChild`方法用于删除指定的子节点。 5. **查找和遍历节点**:除了前面提到的`getElementById`和`getElementsByTagName`,还有`querySelector`和`querySelectorAll`,它们分别返回匹配CSS...

    domtoimage使用HTML5canvas从DOM节点生成图像

    1. **DOM(Document Object Model)**:DOM是HTML和XML文档的编程接口,它将文档表示为树形结构,允许程序和脚本动态更新、添加、删除和改变元素和属性。 2. **HTML5 Canvas**:HTML5中的Canvas元素是一个可绘制...

    JAVASCRIPT操作DOM建立增加删除克隆访问节点示例宣贯.pdf

    6. 删除节点 使用 `removeChild()` 方法可以删除一个节点。例如,`node.removeChild(_p);` 将删除 `&lt;p&gt;` 节点。 7. 替换节点 使用 `replaceChild()` 方法可以替换一个节点。例如,`node.replaceChild(_p, _span);...

    使用DOM4J对XML文件操作-添加、修改、删除、获取元素节点

    在本教程中,我们将深入探讨如何使用DOM4J来执行基本的XML操作,包括添加元素、修改元素、删除元素以及获取元素节点。 1. **添加元素节点** 在DOM4J中,添加元素节点通常涉及创建一个新的`Element`对象,然后将其...

    dom解析基本操作删除 修改……

    删除节点可以通过父节点的`removeChild`方法实现。例如,删除名为"two"的元素: ```java if (node.getNodeName().equals("two")) { Node parent = node.getParentNode(); parent.removeChild(node); } ``` #### ...

    JQ 删除节点

    "JQ删除节点"是jQuery中的一个重要功能,允许开发者从DOM(文档对象模型)中移除元素,从而更新页面内容或优化性能。这篇博客文章(虽然链接不可用)很可能详细解释了这一过程。 删除节点是jQuery中的一个常见任务...

    动态插入和删除节点

    综上所述,Java中的动态插入和删除节点主要通过前端技术实现,尤其是利用jQuery库简化DOM操作。掌握这些技巧,可以让你构建出更加灵活和交互丰富的Web应用程序。在实际项目中,配合服务器端的Java代码,可以实现更...

    第06章 DOM节点操作(下)

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

    XML中dom根据属性检索节点(C#)

    5. 操作节点:找到目标节点后,可以进行各种操作,如修改属性值、添加子节点、删除节点等。例如,要修改属性值: ```csharp XmlAttribute attr = targetElement.Attributes["attributeName"]; attr.Value = ...

Global site tag (gtag.js) - Google Analytics